本教程旨在解决 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，具有良好的浏览器兼容性（现代浏览器均支持）。
注意事项：
- structuredClone 不能克隆函数、DOM 节点、Error 对象等。
- 对于极深或极大的数据结构，深拷贝操作可能会有性能开销，但对于大多数常见场景，其性能是可接受的。
解决方案二：针对特定结构的深拷贝（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）提供坚实的基础。
