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。

对setState行为的微小更改：


使用setState致电null不再触发更新。如果要重新渲染，这允许您决定更新程序功能。

直接在渲染中调用setState始终会导致更新。以前不是这种情况。无论如何，你不应该从渲染中调用setState。

setState回调（第二个参数）现在在componentDidMount / componentDidUpdate之后立即触发，而不是在所有组件都已渲染之后触发。

source

返回null和返回previousState之间的重要区别是，返回null会执行PureComponent之类的操作，并阻止调用render方法一点都不。

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

要{@ 1}}，您应该使用bennygenel来阻止重新渲染。

Answer 2

成语＆＃34;告诉React不做任何事情＆＃34;是＆＃34;返回先前的状态＆＃34;。由React的内部管理人员决定DOM没有实际更改，用户看不到任何内容。特别是，如果两个对象相同，则默认shouldComponentUpdate将返回false。

所以你唯一需要的是：

return previousState;

Answer 3

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

Answer 4

比较this.setState以外的状态，并根据它是否发生变化，触发this.setState？

如何取消`this.setState`？

4 个答案: