React State 真的是不可变的吗？答案

【问题标题】：Is the React State really immutable?React State 真的是不可变的吗？
【发布时间】：2019-08-20 09:50:32
【问题描述】：

我正在开发一个 React 应用程序并偶然发现了 React 状态的这种行为，我不确定它是否正确！？

我这样启动我的状态：

componentDidMount() {
someRequest()
   .then(...) //do stuff to get the Payload of the Response
   .then(response => {
      this.setState({
         obj1: response,
         obj2: response.someArr
      })
    })
}

我有一个 formHandler 可以改变 obj2 的状态

formHandler = event => {
   ...
   this.setState({obj2: newArrState})
}

我一直假设 React 状态是不可变的，因此 obj2 在 setState() 调用之后持有对新对象/数组的新引用。

但是，如果我查看this.state.obj1，我也会看到更改传播到this.state.obj1.someArr，因此this.state.obj1.someArr === this.state.obj2

这是正确的行为吗？

【问题讨论】：

不变性不是一个特性。据我了解，这是您必须遵循的模式。
什么是新的ArrState？你如何观察这一点？这才是最重要的。
这会有所帮助：stackoverflow.com/questions/35867038/…
@etus newArrState 是 this.state.obj2 的修改版本（数组包含或多或少复杂的对象，因此没有 es6 传播魔法）尽管如此，在我的理解中 setState 创建了一个副本，因此obj1.someArr 的引用不应该受到影响。我错了吗？
编辑：澄清let newArrState = this.state.obj2;newArrState.push(newObj);this.setState({obj2: newArrState});

标签： reactjs state immutability

【解决方案1】：

是的，这是正确的行为。 React 状态应该保持不变，因为任何更改的值都将被下一次 setState 调用覆盖。

来自 React 文档：

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变的。

https://reactjs.org/docs/react-component.html#state

【讨论】：

【解决方案2】：

React 不会对您的状态强制执行不变性。其实你可以（但你absolutely should not）直接修改。
开发人员可以使用无法修改的数据结构（例如imuutable.js）或其他方式对您的数据强制执行不变性，这取决于您。

【讨论】：

是的，我一直认为他们会在您每次调用 setState() 时创建一个深层副本来强制执行它。