reactjs - 如何取消 `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

很抱歉在这里回答我自己的问题，但较新的 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

<小时/>

返回 null 和返回 previousState 之间的重要区别在于，返回 null 的作用类似于 PureComponent 的作用，并且完全阻止 render 方法被调用。

从 React 16 开始，即使返回 previousState，调用 setState 也始终会触发 render 方法。

<小时/>

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

<小时/>

更新:从 React 16.8 开始，如果您使用 React Hooks (这与类组件无关)，然后从 useState 返回先前的状态确实，事实上，完全阻止了重新渲染。 See here for source