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

Question

初始状态：

this.state = {
  someVar: true
};

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

this.setState({
  someVar: true
});

第二个代码段是否执行？如果它执行并运行多次，它会花费性能吗？

Answer 1

  

第二个代码段是否执行？如果它执行并运行多次，它会花费性能吗？

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

使用PureComponent

进行扩展

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

class MyComponent extends React.Component {

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

class MyComponent extends React.PureComponent {

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

手动检查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也会执行。