如何取消 `this.setState`？

Posted 2023-02-15

【中文标题】如何取消 `this.setState`？

【英文标题】：How do I cancel a `this.setState`?

【发布时间】：2018-02-15 02:24:03

【问题描述】：

所以我知道在 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 */ 
  
);

【问题讨论】：

您如何确定您不需要其他更新？你的意思是如果状态没有改变？

为什么首先打电话给this.setState()？听起来您需要做的就是检查this.state，然后不致电this.setState()

shouldComponentUpdate 生命周期是您所需要的。 ***.com/questions/44521391/…

的可能重复项

另请注意，将状态设置为之前的状态不应导致render() 调用；首先创建 React 的一个要点是避免不必要的 GUI 更新，afaik。

【参考方案1】：

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

【参考方案2】：

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

对 setState 行为的微小更改：

用null 调用setState 不再触发更新。这使您可以在更新程序功能中决定是否要重新渲染。 直接在渲染中调用setState 总是会导致更新。以前不是这种情况。无论如何，您不应该从渲染中调用setState。 setState 回调（第二个参数）现在在 componentDidMount / componentDidUpdate 之后立即触发，而不是在所有组件都渲染之后触发。

source

---

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

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

---

不过，就@bennygenel 而言，您应该使用shouldComponentUpdate 来防止重新渲染。

---

更新：从 React 16.8 开始，如果您使用的是 React Hooks（这与类组件无关），则从 useState 返回之前的状态 确实，事实上，完全阻止了重新渲染。 See here for source

【参考方案3】：

“告诉 React 不要做任何事情”的成语是“返回之前的状态”。由 React 的内部管理决定是否对 DOM 没有实际的更改，并且用户不会看到任何内容。特别是，如果两个对象相同，默认的shouldComponentUpdate 将返回 false。

所以你唯一需要的是：

return previousState;

【参考方案4】：

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