Javascript React中的状态突变-需要解释吗

我试图了解React的状态、JavaScript中对象的深度复制以及函数式编程中的非突变，但由于遇到了一些示例，我现在感到非常困惑。最好只展示一次，而不是解释一千次，因此：

let arr = [
    {
        id: "a1",
        data: [
            {id: "a1b1", value: "value of a1b1"},
            {id: "a1b2", value: "value of a1b2"},
        ]
    },
    {
        id: "a2",
        data: [
            {id: "a2b1", value: "value of a2b1"},
            {id: "a2b2", value: "value of a2b2"},
        ]
    }
]

let arr2 = [...arr]
let new1 = arr2.find(item => item.id === "a2")
let new2 = new1.data.find(item => item.id === "a2b2")
new2.id = '4'

现在，由于

..

操作符没有深度复制

arr

，因此

arr

将在修改

new2.id

方面与

arr2

一样发生变异

但是在React中，即使我做了同样的事情，但是如果

arr

是一个状态，该状态也不会发生变异。。。有谁能向我解释一下为什么会发生这种情况，以及处理这种情况的适当方式是什么（我应该深度复制，我应该做其他事情吗？）

---

**这里更清楚的是，当我更新状态并遵循React规则时，我当然会设置状态

React不适用于深度引用比较。因此，当您通过执行

[…arr]

react来更改引用时，会将其视为一种更改，并更新依赖于它的所有内容

---

另外，正如您所提到的，react状态不会发生突变；我不同意。。它将发生变异。

我认为您必须提供相应的React示例，并解释如何确定状态未发生变异。但它确实会变异

console.log（arr[1].data）

并且它也会发生反应，您可以使用

import{cloneDeep}从“lodash”

@FelixKling有一个针对这个@alvaro的React开发工具，这正是我的观点。。。我看不出有这种行为。我的坏。。。我现在明白了，实际上它是变异的。。。陛下谢谢大家的帮助。你是对的。很抱歉，您是否打算告诉我，当我使用

const newList=[…list]

调用函数时，

list

是一个状态，仅此一项就将触发重新渲染/更改比较？@ragnodisto否，我不是这个意思。我的意思是，每当你调用'setState（newList）'时，当你改变了引用；反应会考虑它作为新的列表。