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