Question

ParentComponent呈现ChildComponent，该ChildComponent呈现从state.foo获取的对象数组。在每个state.foo项目的内部都有一个按钮，该按钮触发将更新state.bar的操作。

当我单击此按钮时，即使我只是调用一个操作来更新状态树的foo切片，整个bar集合也会重新呈现。因此，当单击按钮更新bar时，集合本身会消失，然后在重新渲染后重新出现。

如何防止重新渲染状态树的foo切片，以便在更新状态树的bar切片时可以保持渲染状态？

class ParentComponent extends React.Component {
  render() {
    return <ChildComponent
      updateBarInStateTree={this.props.updateBarInStateTree}
      foo={this.props.foo} 
      bar={this.props.bar} 
    />
  }
}

const mapStateToProps = (state) => {
  return {
    foo: state.foo,
    bar: state.bar,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    updateBarInStateTree: () => dispatch(actionThatWillReturnNewBarInStateTree())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ParentComponent);

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.foo.map(f => (
          <div onClick={this.props.updateBarInStateTree}>Click me to update bar</div>
        ))
        }
      <div>
    )
  }
}

防止组件在Redux兄弟状态更改时重新呈现

0 个答案: