如何避免React状态中嵌套对象的意外修改：深度克隆策略

本文旨在解决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 保持不变
};

优点：

免费语音克隆

这是一个提供免费语音克隆服务的平台，用户只需上传或录制一段 5 秒以上的清晰语音样本，平台即可生成与用户声音高度一致的 AI 语音克隆。

95

查看详情

• 简洁强大： 一行代码实现深度克隆，无需手动处理嵌套层级。
• 广泛支持： 支持多种内置数据类型，包括那些普通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状态的不可变性，从而避免意外的副作用，使你的组件行为更可预测，应用更健壮。

以上就是如何避免React状态中嵌套对象的意外修改：深度克隆策略的详细内容，更多请关注php中文网其它相关文章！