本文旨在解决React应用中修改数组状态时，因浅拷贝导致的原始状态意外变更问题。我们将深入探讨JavaScript中对象和数组的拷贝机制，并提供两种有效的深度克隆策略：现代的`structuredClone` API和针对特定数据结构的`map`方法，以确保状态的不可变性，避免副作用。
在React开发中，管理组件状态是核心任务之一。当状态中包含数组或对象等复杂数据结构时，如果不正确地进行复制和修改，很容易导致意想不到的副作用，即在修改“副本”时，原始状态也被一同修改。这通常是由于JavaScript的浅拷贝机制造成的。
理解浅拷贝的陷阱
当我们从React状态中获取一个数组并尝试创建一个“副本”时，例如使用扩展运算符（spread operator）...，我们实际上执行的是一个浅拷贝。这意味着虽然新的数组引用被创建了，但数组内部的元素（如果是对象或数组）仍然是原始元素的引用。
考虑以下React状态示例：
import React, { useState } from 'react';
function MyComponent() {
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中的对象属性，会同时修改arrayState中的对应对象
myVariable[1].text = 'myVariable item 2';
console.log('myVariable:', myVariable);
console.log('arrayState:', arrayState); // 此时arrayState[1].text 也被修改了
// 如果这里调用setArrayState(myVariable)，React会检测到状态更新，
// 但问题在于，即使不调用setArrayState，arrayState内部的对象也已经被修改了。
};
return (
<div>
<button onClick={myFunction}>修改数组</button>
{/* ... 渲染arrayState */}
</div>
);
}在上述代码中，let myVariable = [...arrayState]; 创建了一个新数组 myVariable。然而，myVariable 和 arrayState 中的对象元素（如 { id: 'ID_2', text: 'item 2' }）仍然指向内存中的同一个对象。因此，当你修改 myVariable[1].text 时，实际上修改的是这个共享对象，这直接影响了 arrayState 中对应的对象。这违背了React状态管理的不可变性原则，可能导致组件渲染行为异常或难以追踪的bug。
为了避免这种问题，我们需要进行“深度克隆”，即不仅复制数组本身，还要递归地复制数组内部的所有嵌套对象和数组。
深度克隆策略一：使用 structuredClone 进行深度克隆
structuredClone API 是一个现代的、内置的全局函数，用于创建给定值的深度克隆。它能够处理各种复杂的数据类型，包括嵌套对象、数组、Map、Set、Date、RegExp、Blob、File等，甚至循环引用。这是进行深度克隆最推荐和最简洁的方法。
const myFunction = () => {
// 使用 structuredClone 进行深度克隆
let myVariable = structuredClone(arrayState);
myVariable[1].text = 'myVariable item 2'; // 此时只会修改 myVariable
console.log('myVariable:', myVariable);
console.log('arrayState:', arrayState); // arrayState 保持不变
};优点：
- 简洁强大： 一行代码实现深度克隆，无需手动处理嵌套层级。
- 广泛支持： 支持多种内置数据类型，包括那些普通JSON序列化无法处理的类型（如Date、RegExp等）。
- 处理循环引用： 能够正确处理对象之间的循环引用，避免无限递归。
注意事项：
- 浏览器兼容性： structuredClone 是一个相对较新的API（ES2022）。在较旧的浏览器环境中使用时，可能需要Polyfill。不过，现代浏览器和Node.js环境中通常都已支持。
- 限制： 它不能克隆函数、DOM节点、Error对象等。
深度克隆策略二：针对特定结构的 map 方法
如果你的数组只包含一层嵌套的普通JavaScript对象（即对象内部没有其他嵌套对象或数组，只有原始值属性），你可以使用 map 方法结合扩展运算符来创建一个深度克隆。
const myFunction = () => {
// 针对数组中包含一层普通对象的深度克隆
let myVariable = arrayState.map(item => ({...item}));
myVariable[1].text = 'myVariable item 2'; // 此时只会修改 myVariable
console.log('myVariable:', myVariable);
console.log('arrayState:', arrayState); // arrayState 保持不变
};在这个方法中，arrayState.map(item => ({...item})) 会遍历 arrayState 中的每一个 item。对于每个 item，({...item}) 会创建一个全新的对象，并将 item 的所有可枚举属性复制到这个新对象中。由于 item 的属性都是原始值（如 id 和 text），这些原始值会被直接复制，而不是引用。因此，最终 myVariable 中的对象与 arrayState 中的对象是完全独立的。
优点：
- 简洁明了： 对于简单结构，代码可读性好。
- 兼容性好： 基于ES6语法，在所有支持ES6的环境中都可用。
注意事项：
- 仅限浅层对象： 如果数组中的对象内部还有更深层次的嵌套对象或数组，此方法仍会执行浅拷贝。例如，如果 item 是 { id: 'ID_1', details: { color: 'red' } }，那么 ({...item}) 会创建一个新的对象，但 details 属性仍然是原始 details 对象的引用。在这种情况下，修改 myVariable[0].details.color 依然会影响 arrayState。
- 性能： 对于非常大的数组，map 操作会遍历所有元素，但通常性能良好。
总结与最佳实践
在React中处理状态时，遵循不可变性原则至关重要。这意味着你永远不应该直接修改现有状态对象或数组。而是应该创建它们的新副本，并在新副本上进行修改，然后使用 setArrayState 或 setState 更新状态。
- 对于大多数深度克隆需求，尤其是在现代JavaScript环境中，强烈推荐使用 structuredClone。 它提供了最健壮和最简洁的解决方案，能够处理各种复杂的数据结构。
- 如果你的数据结构非常简单（例如，数组只包含一层原始值属性的对象），map 结合扩展运算符是一个有效的替代方案，并且具有更好的兼容性。 但请务必清楚其局限性，避免在多层嵌套对象上误用。
- 避免手动编写复杂的递归深度克隆函数，除非有特定的性能或兼容性需求，且 structuredClone 不适用。
通过采用这些深度克隆策略，你可以确保React状态的不可变性，从而避免意外的副作用，使你的组件行为更可预测，应用更健壮。
