本教程旨在解决 react 中一个常见陷阱：当浅拷贝包含嵌套对象的数组状态时，意外修改原始状态的问题。文章将解释为何展开运算符（spread syntax）在此场景下无法实现深拷贝，并提供两种有效的深拷贝解决方案：现代的 `structuredclone` api 和针对特定数据结构的 `map` 结合对象展开运算符的方法，确保您能独立修改复制的数据，从而维护 react 状态的不可变性。
在 React 应用开发中，管理状态的不可变性至关重要。当状态中包含数组或对象等引用类型数据时，如果不正确地复制它们，可能会导致意外的副作用，即修改了“副本”却同时改变了原始状态。本文将深入探讨这一问题，并提供可靠的解决方案。
理解浅拷贝与深拷贝的陷阱
在 javaScript 中，当我们尝试复制一个包含嵌套对象或数组的状态时，如果仅仅使用展开运算符（spread syntax）或 Object.assign() 等方法，实际上执行的是浅拷贝。这意味着虽然创建了一个新的数组或对象，但其内部的嵌套元素仍然引用着原始状态中的相同内存地址。
考虑以下 React 状态示例：
const [ArrayState, setArrayState] = useState( [ { id: 'ID_1', text: 'item 1', }, { id: 'ID_2', text: 'item 2', }, { id: 'ID_3', text: 'item 3', }, { id: 'ID_4', text: 'item 4', }, ] ); const myFunction = () => { let myVariable = [...arrayState]; // 浅拷贝 // 尝试修改 myVariable 中的一个嵌套对象 myVariable[1].text = 'myVariable item 2'; // 此时，arrayState[1].text 也会被意外修改，这并非我们所期望的 console.log(arrayState[1].text); // 输出 'myVariable item 2' };
在这个例子中，myVariable = […arrayState] 确实创建了一个新数组 myVariable。然而，myVariable 数组中的元素（即那些 { id: ‘…’, text: ‘…’ } 对象）仍然是与 arrayState 数组中元素相同的引用。因此，当 myVariable[1].text = ‘myVariable item 2’ 执行时，它直接修改了 myVariable 和 arrayState 共享的第二个对象，导致原始 arrayState 被意外修改。
为了避免这种问题，我们需要进行深拷贝，即不仅复制顶层数组，还要递归地复制所有嵌套的引用类型数据，确保副本与原数据在内存上完全独立。
解决方案一：使用 structuredClone 进行深拷贝
structuredClone() 是一个现代的 Web API，专门用于创建 javascript 值的深层结构化克隆。它能够处理各种复杂的数据类型，包括嵌套对象、数组、Map、Set、date、regexp、Blob、File、ImageData 等，甚至循环引用。这是进行深拷贝最推荐和最强大的方法。
const myFunction = () => { let myVariable = structuredClone(arrayState); // 使用 structuredClone 进行深拷贝 myVariable[1].text = 'myVariable item 2'; // 现在，只有 myVariable 被修改 console.log(arrayState[1].text); // 输出 'item 2'，原始状态未受影响 };
优点：
- 全面性： 支持多种内置对象和复杂数据类型。
- 简洁性： API 简单易用，一行代码即可实现深拷贝。
- 健壮性： 能够处理循环引用，避免栈溢出错误。
- 标准化： 作为 Web API，具有良好的浏览器兼容性（现代浏览器均支持）。
注意事项：
解决方案二：针对特定结构的深拷贝（map 结合对象展开）
如果您的数据结构相对简单，例如只是一个包含纯粹的、非嵌套对象的数组（如本教程的示例），您可以使用 map 方法结合对象展开运算符来手动实现深拷贝。这种方法对于特定场景非常有效且易于理解。
const myFunction = () => { // 使用 map 遍历数组，并为每个对象创建一个新的浅拷贝 let myVariable = arrayState.map(o => ({...o})); myVariable[1].text = 'myVariable item 2'; // 现在，只有 myVariable 被修改 console.log(arrayState[1].text); // 输出 'item 2'，原始状态未受影响 };
在这个方法中：
- arrayState.map(…) 创建了一个全新的数组。
- 对于数组中的每一个原始对象 o，({…o}) 创建了一个新的对象，并将 o 的所有可枚举属性复制到这个新对象中。
优点：
- 清晰直观： 对于简单的数组对象结构，代码意图明确。
- 性能： 对于扁平的数组对象结构，性能通常良好。
注意事项：
- 局限性： 这种方法仅对“一层”嵌套的纯 JavaScript 对象有效。如果您的对象内部还有嵌套对象，它将再次面临浅拷贝问题。例如：[{ id: 1, data: { value: ‘test’ } }] 这种结构，({…o}) 只能复制 data 对象的引用，而不能深拷贝 data 对象本身。
- 不适用于复杂类型： 无法深拷贝 Date、RegExp、Map、Set 等复杂对象类型。
总结
在 React 中处理状态时，维护数据的不可变性是核心原则。当您需要复制包含嵌套对象或数组的状态并独立修改副本时，务必进行深拷贝。
- 对于大多数场景，尤其是当数据结构复杂或不确定时，structuredClone() 是最推荐和最强大的深拷贝方案。
- 对于仅包含一层纯 JavaScript 对象的数组，array.map(o => ({…o})) 是一种简洁有效的深拷贝方式，但请注意其局限性。
通过正确地应用深拷贝技术，您可以避免意外的状态修改，确保您的 React 应用行为可预测，并为性能优化（如 React.memo 或 useMemo）提供坚实的基础。