我如何使用shouldComponentUpdate状态？
我可以检查：
shouldComponentUpdate(nextProps, nextState) {
return this.state.value != nextState.value;
}
但它对国家没有任何意义。因为如果我改变 state( this.setState({value: 'newValue'}))this.state将是 equal nextState。
例如，onClick事件：
handleClick() {
this.setState({value: 'newValue'});
}
该shouldComponentUpdate(nextProps, nextState)方法适用于 props 和 state。在您的示例中，在onClick事件之后，React 会触发以下方法。
shouldComponentUpdate(nextProps, nextState) {
return this.state.value != nextState.value;
}
这里的关键是在上述方法中的值this.state.value等于调用之前的值setState()。这要归功于 React 中的事实：
setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。
react文档：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')
);