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

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

ng-init="initialize( '{{supervision.supervisor}}');

否则，由您来决定 - 保持组织有意义的任何事情。

Answer 2

如果你想保持你的无状态组件纯洁，你可以做这样的事情：

const helpers = { helper: text => text.toUpperCase() }

const makeGreeter = helpers => props => <div>helpers.helper(props.greet)</div>;
const greeter = makeGreeter(helpers);
export default greeter;

这样，你的组件就是一个封装自己的帮助器的闭包，它具有可预测的行为。

作为备注：如果你修改helper，你可以，因为对象是可变的，greeter不会是一个纯函数。

Answer 3

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

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

辅助无状态功能组件

3 个答案: