javascript - Redux - 在 React 组件的构造函数中使用 bindActionCreators 有什么缺点吗？

Question

我见过很多在 mapDispatchToProps 函数中使用 bindActionCreators 函数的示例，如下所示:

...
const mapDispatchToProps = (dispatch, props) => ({
    actions: bindActionCreators({
        doSomething: somethingActions.doSomething,
    }, dispatch)
});

export default connect(null, mapDispatchToProps)(SomeComponent);

这意味着每次存储更改时，该组件将更新并重新执行包装 dispatch 函数中的 somethingActions.doSomething Action 创建者并将其作为匿名返回功能。

像这样在构造函数中简单地执行一次会不会更高效？

constructor(props) {
    super(props);

    const { dispatch } = props;

    this.boundActionCreators = bindActionCreators({
        doSomething: somethingActions.doSomething,
    }, dispatch);
}

这样做有什么缺点吗？

Answer 1

mapDispatchToProps 默认情况下每个组件生命周期仅使用一次 - see this question in Redux GitHub .它可以运行多次，理论上会导致性能问题。

可能引起麻烦的事情:

• 关注点的分离 - 将 mapDispatchToProps 作为传递给 connect() 的单独函数 HOC 有助于 future 的重构 - 很容易将连接移动到其他地方，扩展它或完全删除它 - 无需单独更改组件。 See this article from Dan Abramov about Presentational and Container Components .在这种情况下，您的组件是 Presentational 并且 connect() + 它的 mapDispatchToProps 是 Container。
• 代码可重用性 - 构造函数可能变得非常冗长和困惑 - 想象一下必须使用 boundActionCreators 10 次。
• actions 的使用 - 对于您的解决方案，您需要执行 this.nameOfAction() 以将 action 分派(dispatch)给 redux。但是要获取数据，您可以执行 this.props.nameOfDataProp。以相同的方式访问所有 Redux 功能(又名通过 props)有助于提高可重用性和维护性。
• 此外，性能提升将是可讨论的 - 因为 mapDispatchToProps 仅在依赖于 props 时才被多次使用。我鼓励您在您的应用中对此进行测试，看看您是否可以获得足够好的性能提升。

TL;DR:您可以获得一些小的性能提升，但在代码维护和可重复性方面付出了巨大的代价。