如果旧值和新值相同，是否执行react setState？

Question

初始状态：

this.state = {
  someVar: true
};

如果我的代码设置状态值与旧代码相同怎么办：

this.setState({
  someVar: true
});

第二个片段是否执行？如果它执行并运行多次，它是否会降低性能？

Answer 1

第二个片段是否执行？如果它执行并运行多次，它是否会降低性能？

是的，是的。但是，有两种方法可以防止这种情况发生。

---

Extending with PureComponent

通常在编写React组件时，您会写：

class MyComponent extends React.Component {

如果你想让React对新旧道具和状态进行浅层比较，你可以写：

class MyComponent extends React.PureComponent {

这是更简单的方法。更多信息来自官方文档here。

---

Manually checking on shouldComponentUpdate()

您始终可以自己执行此逻辑，并告诉React何时忽略使用shouldComponentUpdate()生命周期方法重新渲染。

shouldComponentUpdate(nextProps, nextState) {
  if(this.state.someVar === nextState.someVar) return false;
  return true;
}

在上面的示例中，如果someVar在渲染之间相同，则组件将不会重新渲染。但是，对另一个状态或prop变量的任何其他更新都将触发重新呈现。

更多信息来自官方文档here。

Answer 2

是的，如果你在shouldComponentUpdate中没有关于状态的任何比较，它会这样做。

如果组件扩展PureComponent，则默认情况下可以执行此操作。你可以阅读更多here。

Answer 3

设置状态只会设置新值，不能与之前的状态进行比较。然后调用shouldComponentUpdate来决定是否应该进行渲染。

请注意，它默认返回true。

Answer 4

实际上，您可以调用多个setStates，并且React可以将多个setState（）调用批处理为单个更新以提高性能。但请记住，这将是异步（setState updates doc）。

至于设置相同的状态，所有其他答案都是正确的。即使新值相等，SetState也会执行。