reactjs:ShouldComponentUpdate状态

如何对状态使用

shouldComponentUpdate

我可以查一下：

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

但这对各州没有任何意义。因为如果我改变状态（

this.setState（{value:'newValue'}）

）

this.state

将等于

nextState

例如，

onClick

事件：

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

---

shouldComponentUpdate（nextProps，nextState）

方法适用于道具和状态。在您的示例中，在

onClick

事件之后，React将触发以下方法

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

这里的关键是，在上述方法中，

this.state.value

的值等于

setState（）调用之前的值。这要归功于以下事实：

setState（）不会立即改变this.state，但会创建
等待状态转换

反应文档：

看看这个演示：（下面是完整的代码）

React保持每次点击按钮的计数状态，并保存随机选取的
值（true或false）。但是，由于使用了
shouldComponentUpdate
方法，仅当以前的
值
不等于即将出现的/新的
值
时，才会重新呈现组件。这就是为什么显示的单击计数有时会跳过渲染其当前状态。您可以注释掉整个
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')
);

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
价值观：正确，
点击次数：0
};
this.picklandom=this.picklandom.bind（this）；
}
pickRandom（）{
这是我的国家({
值：Math.random（）>0.5，//随机选择true或false
countOfClicks:this.state.countOfClicks+1
});
}
//注释掉下面的内容，以便在每次单击时重新渲染
shouldComponentUpdate（下一步，下一步状态）{
返回this.state.value！=nextState.value；
}
render（）{
返回(
应该更新组件演示吗
{this.state.value.toString（）}

点击次数：{this.state.countOfClicks}

单击以随机选择：true或false
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);
当组件的状态发生变化时，应该简单地重新加载，我认为主要是为了道具，而不是状态。从中可以看出，您可以决定新状态是否保证组件更新，例如，您可能有不需要更新当前状态的逻辑，但您无法将其与以前的状态进行比较props@Icepickle,在我的例子中，我想比较状态，因为我的组件没有得到
道具
，而是一个父组件重新呈现了它。比较状态并决定在实际更改道具的地方更新它。这很奇怪，因为我在
构造函数中设置了“value:”“”。在
onClick
事件之后，我得到
这个.state.value
是
shouldComponentUpdate
中的
newValue
。但是我认为它应该是
this.state.value=''，nextState.value='newValue'
。看看这里的控制台输出：。初始值为
0
，因此当您单击按钮
时，此.state.countOfClicks
为
0
和
nextState.countOfClicks
为
1
。您还可以看到，
内部的shouldComponentUpdate
this.state.countOfClicks
始终落后于屏幕上实际呈现的内容。这有意义吗？是的，我测试了你的例子。它起作用了。但在我的实际项目中，
这个.state
等于
nextState
。真奇怪。继续找。也许我做错了什么。谢谢，是的，谢谢。我在调用
setState
之前更改状态<代码>让状态=this.state；state.value='newValue'；此.setState（状态）
；代替上面的方法，用以下方式更新您的状态：
this.setState（{value:'newValue'}）就是这样。下面是一个简单的演示：