Question

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

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

是否总是将当前状态对象与新属性合并为一个新对象，对一个功能上等同于以下操作的行进行排队？

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

我问的原因是，我想知道{em>在 shouldComponentUpdate（）中是否this.state !== nextState 始终是否为真由setState触发。

感谢。

Answer 1

我想你想知道这个问题的答案。

this.state！== nextState总是保证在里面是真的 shouldComponentUpdate（）？

根据反应文档shouldComponentUpdate将在三个实例上调用

状态已更改
道具改变了
状态和道具改变了

因此，如果只有道具正在改变，那么您当前的状态将等于最后一个未修改状态。

在收到new props或state时，在呈现之前调用shouldComponentUpdate（）。默认为true。初始渲染或使用forceUpdate（）时不会调用此方法。

您提出的第一个问题取决于您所在州的数据管理方式。

React允许您使用您想要的任何数据管理方式，包括变异。

文档也说明了

stateChange浅层合并到新状态，例如，调整购物车项目数量

但是看一下setState beginUpdateQueue方法的内部部分让我怀疑状态何时发生变异。

如果您必须保证数据不会发生突变，我认为对代码的这一部分使用immutability-helper是明智的。

Answer 2

您的问题的简单答案将是“是”，但是对于一个更新周期。让我解释一下。

您可能已经知道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中this.state !== nextState解释的其他含义。

我想知道shouldComponentUpdate()是否始终得到保证在shouldComponentUpdate()内成真。

您对此问题的回答将是“否”，其他答案中也有解释。由于状态改变，道具改变或两者兼而有之，将调用this.state !== nextState。因此，如果组件仅因道具更改而更新，则.panel-heading将不会为真。

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

2 个答案: