为什么要避免 this.setState(this.state)？答案

【问题标题】：Why to avoid this.setState(this.state)?为什么要避免 this.setState(this.state)？
【发布时间】：2018-11-13 08:44:31
【问题描述】：

在 React 中，我都尝试了：

它们都起作用并且都产生相同的结果。为什么建议（在文档中）设置为状态克隆（使用 Object.assign）而不是设置为状态本身？状态的对象身份在 React（没有 Redux）中是否重要？似乎只要调用 setState，无论状态对象身份如何，都会触发 render()。

【问题讨论】：

我认为如果你声明了一个 shouldComponentUpdate 方法，你不能在里面使用 === 相等检查，因为对象引用不会改变。因此，您的方法也会对性能产生潜在影响
是的，我注意到了，所以我实际上发布了一个答案。

标签： reactjs

【解决方案1】：

当我们说时，Javascript 对象和数组是通过引用而不是值传递的

stateClone = this.state

我们不是在复制 state 对象，我们只是在创建对同一个对象 (this.state) 的新引用。现在，如果我们对 stateClone 进行任何更改，例如

stateClone.someProp = someValue

我们实际上直接改变了原始状态，这是被禁止的，因为以这种方式进行的突变可能会在下一次 setState 调用中被覆盖。

这就是为什么Object.assign 或spread operator (...) 用于创建状态对象的副本并对该副本进行更改。

【讨论】：

我读了这篇文章，仍然不确定为什么直接改变对象是危险的（它基本上说明了你所说的），以及为什么“可能在下一次 setState 调用时被覆盖”是一个问题。跨度>
术语更正：stateClone = this.state 不会创建新的引用。相反，它将创建一个新的变量/属性 stateClone 并且都指向相同的引用/内存位置。

【解决方案2】：

setState 不关心您设置的对象是否与当前状态具有相同的引用。无论哪种方式都会调用 render()。

不变性仅对在使用 shouldComponentUpdate 生命周期方法进行优化的上下文中进行浅层检查（使用 === 比较前后）有用，默认情况下返回 true。

【讨论】：