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

Question

在 React 中，是否setState总是将新对象分配给this.state? 换句话说，当你打电话时：

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

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

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

我问的原因是，我想知道是否this.state !== nextState是始终保证是真正的内部shouldComponentUpdate（）如果更新被触发setState。

谢谢。

Answer 1

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

您可能已经知道 ReactsetState并不总是立即更新组件。有时响应批处理或将更新推迟到以后。例如，假设您的事件处理程序中有如下内容。

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

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

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

我想知道里面是否this.state !== nextState总是保证是真的shouldComponentUpdate()。

你这个问题的答案是“否”正如其他答案中所解释的那样，。shouldComponentUpdate()将因状态更改、道具更改或两者而被调用。因此，this.state !== nextState如果组件仅因为道具更改而更新，则不会为真。