javascript - React 的 setState() 是否保证每次都创建一个新的状态对象？

Question

在 React 中，setState 总是分配一个新对象给 this.state 吗？ 换句话说，当你打电话时:

this.setState({
  key1: val1,
  key2: val2
});

它是否总是将具有新属性的当前状态对象合并到一个新对象中，排队等同于以下功能的操作？

this.state = {
   ...this.state,
   key1: val1,
   key2: val2
};

我问的原因是我想知道 this.state !== nextState 是否 always 在 shouldComponentUpdate 中保证为真() 如果更新是由 setState 触发的。

谢谢。

Answer 1

您的问题的简单答案是"is"，但只针对一个更新周期。让我解释一下。

你可能已经知道 React setState 并不总是立即更新组件。有时 React 会批处理或延迟更新。例如，假设您的事件处理程序中有如下内容。

onClick() {
  this.setState({quantity: state.quantity + 1});
  this.setState({quantity: state.quantity + 1});
  this.setState({quantity: state.quantity + 1});
}

这些状态更新将在一个更新周期内排队并一起执行。在这种情况下，React 只会为第一个 setState 创建一个新的状态对象，并且该对象会为后续的 setState 更新而发生变化。你可以在源代码中清楚地看到这一点 here .

然而，这完全是关于 React 在引擎盖下是如何工作的，我们不需要担心。因为一个循环只会有一个shouldComponentUpdate()和componentDidUpdate()。当我们访问 state 时，它将始终是一个新对象。所以我们可以安全地假设 setState() 保证每次都创建一个新的状态对象。但是请确保您了解 setState 的其他含义，这在 the official documentation 中进行了解释。 .

I'd like to know whether this.state !== nextState is always guaranteed to be true inside shouldComponentUpdate().

您这个问题的答案将是“否”，这在其他答案中也有解释。 shouldComponentUpdate() 将因为状态变化、 Prop 变化或两者而被调用。所以 this.state !== nextState 如果组件只是因为 props 改变而更新，则不会为真。