如果旧值和新值相同,是否执行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 {

这是更简单的方法.来自官方文档的更多信息,请点击此处.

手动检查 shouldComponentUpdate()

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

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

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

来自官方文档的更多信息,请点击此处.