Question

我在bindActionCreators函数中看到了许多使用mapDispatchToProps函数的示例，如下所示：

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

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

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

像这样在构造函数中只执行一次会不会更有性能？

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有助于将来的重构-可以轻松地将连接移动到其他任何地方，扩展它或完全删除它-无需任何操作仅更改组件。 See this article from Dan Abramov about Presentational and Container Components。在这种情况下，您的组件是Presentational，connect() +它是mapDispatchToProps是Container。
代码可重用性-构造函数可能变得很长而且很杂乱-假设不得不使用boundActionCreators 10次。
使用actions-对于您的解决方案，您需要执行this.nameOfAction()才能将操作分派到redux。但是，要获取数据，您可以执行this.props.nameOfDataProp。以相同的方式（通过Redux访问所有props功能）可以帮助实现可重复性和维护。
此外，性能提升是可以区分的-因为mapDispatchToProps仅在取决于props时才多次使用。我鼓励您在应用中对此进行测试，以查看是否可以获得足够的性能提升。

TL; DR：您可以稍微提高性能，但在代码维护和可重用性方面要付出高昂的代价。

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

1 个答案:

可能引起麻烦的事情