reactjs :状态的 ShouldComponentUpdate [英] reactjs : ShouldComponentUpdate for states
问题描述
如何将 shouldComponentUpdate 用于状态?
我可以检查:
shouldComponentUpdate(nextProps, nextState) {
return this.state.value != nextState.value;
}
但它对状态没有任何意义.因为如果我改变 state(this.setState({value: 'newValue'})) this.state 将等于 nextState.>
例如，onClick 事件:
But it doesn't have any sense for states. Because if I change state(this.setState({value: 'newValue'})) this.state will be equal nextState.
For example, onClick event:推荐答案
shouldComponentUpdate(nextProps, nextState) 方法适用于 props 和 state.在您的示例中，在 onClick 事件之后，React 会触发以下方法.
The shouldComponentUpdate(nextProps, nextState) method works for both props and state. In your example, after the onClick event the following method is fired by React.这里的关键是，在上述方法中，this.state.value 的值等于 之前 setState()调用.这要归功于 React 中的事实:
shouldComponentUpdate(nextProps, nextState) {
return this.state.value != nextState.value;
}
setState() 不会立即改变 this.state 而是创建一个待处理的状态转换.
反应文档:https://facebook.github.io/react/docs/组件-api.html#setstate
The key here is that in the above method the value of this.state.value is equal to what it was before the setState() call. This is thanks to the fact that in React:
看看这个演示:http://codepen.io/PiotrBerebecki/pen/YGZgom(完整代码如下)
setState() does not immediately mutate this.state but creates a pending state transition.
React docs: https://facebook.github.io/react/docs/component-api.html#setstate
React 保持每次点击按钮的次数并保存随机选择的 value(真或假).然而，由于 shouldComponentUpdate 方法，只有当 previous value 不等于即将到来的/新的 值时，组件才会重新渲染.这就是为什么显示的点击计数有时会跳过呈现其当前状态的原因.您可以注释掉整个 shouldComponentUpdate 方法，以便在每次点击时重新渲染.
Have a look at this demo: http://codepen.io/PiotrBerebecki/pen/YGZgom (full code below)
React keeps on state the count of every click on the button and also saves the randomly picked value (true or false). However thanks to the shouldComponentUpdate method, the component is re-rendered only if the previous value is not equal to upcoming / new value. This is why the displayed click count sometimes skips rendering its current state. You can comment out the whole shouldComponentUpdate method to re-render on every click.);}}ReactDOM.render(<应用程序/>,document.getElementById('app'));
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')
);
这篇关于reactjs :状态的 ShouldComponentUpdate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
