无状态功能组件的助手

Question

通过在响应中引入无状态功能组件，我们可以通过多种方式向组件添加辅助方法。关于助手功能，已定义的标准做法是什么？

辅助功能并非旨在用作通用工具功能。（这意味着它仅用于此特定组件）

将它们放在组件功能中吗？

export const myComponent = (props) => {
    const myHelper = (value) => {
        // Insert logic
    };       

    return <div>{myHelper(props.mystate.value)}</div>;
};

将它们放在函数之外，但在同一文件中？

const myHelper = (value) => {
    // Insert logic
};

export const myComponent = (props) => {    
    return <div>{myHelper(props.mystate.value)}</div>;
};

还是有一种常用的替代方法？

Answer 1

如果将辅助函数放在组件函数中，则每次执行组件函数时，它都会创建一个新的辅助函数实例，并且在执行该函数后，该实例可能会被垃圾回收。所以通常我会把它放在外面。

当然也有例外，如果你使用箭头函数，你可能需要词法作用域，因此把它放在组件函数里面，但如果它是一个纯函数，我会说它应该放在外面。

Answer 2

如果您打算重用辅助函数，请将其放在无状态组件函数之外（位于同一文件或另一个文件中），然后将其导出：

export const myHelper = (value) => {
    // Insert logic
};

否则，由您来决定 - 无论什么都有意义，以使事情井井有条。