如何取消 `this.setState`？

Question

所以我知道在 React 中设置状态是异步的，我们这样设置状态：

this.setState(previousState => {
  return { /* some new state that uses `previousState` */ }
});

所以我的问题是：如何取消 this.setState？ 假设我使用 previousState 来确定我不需要渲染更新。我怎样才能取消 setState 并告诉 React 不要重新渲染任何东西。

this.setState(previousState => {
  if (/* previousState is fine */) {
    // tell react not to do anything
  } else {
    return { /* some new state */ }
  }
});

Answer 1

您不需要取消设置状态。您可以使用 shouldComponentUpdate(nextProps, nextState) 来决定组件是否应该更新。

Answer 2

比较 this.setState 之外的状态，根据它是否改变，触发 this.setState?

Answer 3

"tell React not to do anything"的成语是"return the previous state"。由 React 的内部管理来确定 DOM 没有实际更改，并且用户不会看到任何内容。特别是，如果两个对象相同，则默认 shouldComponentUpdate 将 return false。

所以你唯一需要的是：

return previousState;

Answer 4

很抱歉在这里回答我自己的问题，但是较新的 React 16 允许您取消 setState。

Minor changes to setState behavior:

Calling setState with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.

Calling setState directly in render always causes an update. This was not previously the case. Regardless, you should not be calling setState from render.

setState callback (second argument) now fires immediately after componentDidMount / componentDidUpdate instead of after all components have rendered.

source

returning null 和 returning previousState 之间的重要区别在于 returning null 的作用类似于 PureComponent 执行并阻止 render 方法被调用。

从 React 16 开始，调用 setState 总是会触发 render 方法，即使您 return previousState.

对于@bennygenel的观点，你应该使用shouldComponentUpdate来防止重新渲染。

更新： 从 React 16.8 开始，如果您使用 React Hooks (this is unrelated to class components), then returning previous state from useState does, in fact, prevent the re-render altogether. See here for source

如何取消 `this.setState`？

How do I cancel a `this.setState`?

setstate

reactjs