reactjs : 状态的 ShouldComponentUpdate

Question

如何将shouldComponentUpdate 用于状态？

我可以检查：

shouldComponentUpdate(nextProps, nextState) {
  return this.state.value != nextState.value;
}

但它对状态没有任何意义。因为如果我改变状态（this.setState({value: 'newValue'})）this.state 将等于nextState。

例如onClick事件：

handleClick() {
  this.setState({value: 'newValue'});
}

Answer 1

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（true 或 false）。然而，由于shouldComponentUpdate 方法，只有当previous 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')
);