1

我们有一个 react redux 应用程序。我们有一个绑定到 redux 的父类

这是我们的父类：

render() {
return (
<div>
<Child1 >
<Child2 >
..


const mapStateToProps = (state, ownProps) => ({
  parentRelatedFooVar: state.parentRelatedFooVar
})

const mapDispatchToProps = (dispatch, ownProps) => {
  parentRelatedFooMethod: () => dispatch(parentRelatedFooMethodAction())
}

export default connect(
  mapStateToProps ,
  mapDispatchToProps
)(Parent)

现在你看我们有两个孩子。Children1 必须调度自己的方法，但不需要任何绑定到状态（没有 mapStateToProps）

我们的孩子1：

const mapDispatchToProps = (dispatch, ownProps) => {
      child1RelatedFooMethod: () => dispatch(child1RelatedFooMethodAction())
    }

    export default connect(
      null,
      mapDispatchToProps
    )(Child1)

与我们拥有 child2 的方式相同，它也没有任何 mapstatetoprops，但必须调度自己的方法 child2RelatedFooMethodAction。

问题： 我们可以将 child1RelatedFooMethod 和 child2RelatedFooMethod 的调度移动到父组件，将这两个方法添加到父 mapDispatchToProps 列表中，如下所示：

修改了 Parent 的 mapDispatchToProps：

const mapDispatchToProps = (dispatch, ownProps) => {
      parentRelatedFooMethod: () => dispatch(parentRelatedFooMethodAction()),
     child1RelatedFooMethod: () => dispatch(child1RelatedFooMethodAction()),
     child2RelatedFooMethod: () => dispatch(child2RelatedFooMethodAction())
    }

当然我们的 child1 和 2 应该呈现为

再次是父级的渲染方法：

render () {
return(
<div>
<Child1 child1RelatedFooMethod={this.props.child1RelatedFooMethod} />
<Child2 child2RelatedFooMethod={this.props.child2RelatedFooMethod} />

我们完全删除了 Child1 和 Child2 组件中的连接导入 mapDispatchToProps 调用。因为我们之前没有mapstatetoprops，最近又搬了mapdispatchtoprops，所以在child1和child2中我们不需要再使用connect了。

考虑性能时哪个方面更好？累积父级中的 mapDispatchToProps 调用并保持子级简单而无需任何连接使用，或者子级应自行调度 mapDispatchToProps？

4

0 回答 0