如何将shouldComponentUpdate
用于州?
我可以查看:
shouldComponentUpdate(nextProps, nextState) {
return this.state.value != nextState.value;
}
但它对国家没有任何意义。因为如果我更改状态(this.setState({value: 'newValue'})
)this.state
将等于nextState
。
例如,onClick
事件:
handleClick() {
this.setState({value: 'newValue'});
}
答案 0 :(得分:16)
shouldComponentUpdate(nextProps, nextState)
方法适用于props和state。在您的示例中,在onClick
事件之后,React会触发以下方法。
shouldComponentUpdate(nextProps, nextState) {
return this.state.value != nextState.value;
}
这里的关键是,在上述方法中,this.state.value
的值等于之前<{strong> setState()
调用的值。这要归功于React:
setState()不会立即改变this.state但会创建一个 待定状态转换。
反应文档:https://facebook.github.io/react/docs/component-api.html#setstate
看一下这个演示:http://codepen.io/PiotrBerebecki/pen/YGZgom(下面的完整代码)
React保持状态按钮上的每次点击的计数,并保存随机选择的value
(真或假)。但是,由于shouldComponentUpdate
方法,仅当上一个 value
不等于即将发布/新value
时,才会重新呈现该组件。这就是显示的点击次数有时会跳过渲染其当前状态的原因。您可以注释掉整个shouldComponentUpdate
方法,以便在每次点击时重新呈现。
class App extends React.Component {
constructor() {
super();
this.state = {
value: true,
countOfClicks: 0
};
this.pickRandom = this.pickRandom.bind(this);
}
pickRandom() {
this.setState({
value: Math.random() > 0.5, // randomly picks true or false
countOfClicks: this.state.countOfClicks + 1
});
}
// comment out the below to re-render on every click
shouldComponentUpdate(nextProps, nextState) {
return this.state.value != nextState.value;
}
render() {
return (
<div>
shouldComponentUpdate demo
<p><b>{this.state.value.toString()}</b></p>
<p>Count of clicks: <b>{this.state.countOfClicks}</b></p>
<button onClick={this.pickRandom}>
Click to randomly select: true or false
</button>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);