Reactjs 防止组件在redux同级状态更改时重新提交

ParentComponent呈现ChildComponent，该组件呈现从

state.foo

获取的对象数组。在每个

state.foo

项中都有一个按钮，该按钮触发一个操作，该操作将更新

state.bar

当我单击此按钮时，整个

foo

集合将重新呈现，即使我只是调用一个操作来更新状态树的

条

切片。因此，当单击按钮更新

栏时，集合本身将消失，然后在重新渲染后重新出现

如何防止状态树的
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);

类ParentComponent扩展了React.Component{
render（）{
返回
}
}
常量mapStateToProps=（状态）=>{
返回{
foo:state.foo，
bar:state.bar，
}
}
const mapDispatchToProps=（调度）=>{
返回{
UpdateBalanstateTree:（）=>分派（将返回NewBalanstateTree（）的操作）
}
}
导出默认连接（MapStateTrops、mapDispatchToProps）（ParentComponent）；

class-ChildComponent扩展了React.Component{
render（）{
返回(
{this.props.foo.map（f=>(
单击我更新栏
))
}
)
}
}

为什么在未在ChildComponents中使用时将条形图作为道具传入？如果您需要它，那么可以考虑使用<代码> BooDeCuffTebug更新>代码>检查特定的道具更改。在渲染中<代码> bar >代码>将出现在<代码> Foo项目中，因此它得到USEDFF <代码> BAR <代码>用于<代码>子组件< /代码>，你不想让他们在更新

bar

时重新渲染吗？我不想让

foo

重新渲染，因为当

foo

重新渲染时，整个集合从页面上消失，然后又回来——有点像眨眼。相反，我只想启动一个更新

bar

的操作，这样我就可以在返回时获取

bar

的值，并将其渲染到正确的位置，而无需触摸

foo

。

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>
    )
  }
}