React 状态管理：深度复制数组对象的策略与实践

本文旨在解决 react 中修改数组状态时，由于浅拷贝导致原始状态意外变更的问题。我们将深入探讨浅拷贝与深拷贝的区别，并提供两种有效的深度复制策略：`structuredclone()` 方法和基于 `map()` 的映射复制，确保在修改复制变量时不会影响到 react 状态的原始数据，从而维护状态的不可变性。

在 React 应用开发中，管理组件状态是核心任务之一。当状态包含复杂的引用类型数据，如数组或对象时，对其进行修改需要特别注意。一个常见的陷阱是，当尝试复制一个包含对象的数组状态并修改其副本时，原始状态也会意外地被修改。这通常是由于使用了浅拷贝操作符（如扩展运算符 ...）导致的，它只复制了数组本身，但数组内部的对象仍然是原始对象的引用。

考虑以下 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 中的对象
        myVariable[1].text = 'myVariable item 2'; 

        // 此时，arrayState[1].text 也会被修改，这不是我们期望的行为
        console.log("myVariable after modification:", myVariable);
        console.log("arrayState after modification:", arrayState);
    };

    return (
        <div>
            <button onClick={myFunction}>修改数组</button>
            {/* 渲染 arrayState 或 myVariable */}
        </div>
    );
}

在上述代码中，let myVariable = [...arrayState]; 创建了一个 arrayState 的浅拷贝。这意味着 myVariable 是一个新数组，但它内部的元素（即那些对象 { id: 'ID_x', text: 'item x' }）仍然是与 arrayState 中相同的引用。因此，当你修改 myVariable[1].text 时，实际上是修改了 arrayState[1] 所引用的同一个对象，从而导致原始状态的意外变更。

为了避免这种问题，我们需要进行深度复制，即不仅复制数组本身，还要复制数组内部的所有嵌套对象，使其与原始对象完全独立。

1. 使用 structuredClone() 进行深度复制

structuredClone() 是一个现代的 JavaScript API，它提供了一种简单且高效的方法来创建对象的深度克隆。它能够处理各种复杂的数据类型，包括嵌套对象、数组、Map、Set、Date、RegExp 等，甚至包括循环引用（尽管在 React 状态中应尽量避免）。

示例代码：

const myFunction = () => {
    // 使用 structuredClone 进行深度复制
    let myVariable = structuredClone(arrayState);

    myVariable[1].text = 'myVariable item 2'; 

    // 此时，只有 myVariable 被修改，arrayState 保持不变
    console.log("myVariable after modification:", myVariable);
    console.log("arrayState after modification:", arrayState); // arrayState[1].text 仍然是 'item 2'
};

优点：

• 简单易用： 一行代码即可实现深度复制，无需手动遍历。
• 功能强大： 支持多种数据类型，包括嵌套结构和复杂对象。
• 性能优化： 浏览器原生实现，通常比手动递归克隆更高效。

注意事项：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情

• 浏览器兼容性： structuredClone() 是一个相对较新的 API（ECMAScript 2022），在一些旧版浏览器中可能不支持。在使用前请检查目标环境的兼容性。对于不支持的环境，可能需要引入 polyfill 或使用其他深度复制库（如 Lodash 的 cloneDeep）。
• 不支持函数、DOM 节点等： structuredClone() 无法克隆函数、DOM 节点、Error 对象等特定类型。如果你的状态中包含这些类型，需要采用其他策略。

2. 针对特定数据结构的映射复制

如果你的数据结构相对简单，例如只是一个包含简单对象的数组（没有多层嵌套），你可以使用 map() 方法结合扩展运算符 ... 来实现深度复制。这种方法本质上是对数组中的每个对象进行浅拷贝，从而达到对整个数组的深度复制效果。

示例代码：

const myFunction = () => {
    // 使用 map 结合扩展运算符对每个对象进行浅拷贝
    let myVariable = arrayState.map(o => ({...o}));

    myVariable[1].text = 'myVariable item 2'; 

    // 此时，只有 myVariable 被修改，arrayState 保持不变
    console.log("myVariable after modification:", myVariable);
    console.log("arrayState after modification:", arrayState); // arrayState[1].text 仍然是 'item 2'
};

优点：

• 广泛兼容： map() 和扩展运算符是 JavaScript 的标准特性，在所有现代浏览器中都得到支持。
• 可控性强： 你可以精确控制每个对象的复制方式。

注意事项：

• 仅适用于浅层嵌套对象： 这种方法只对数组中的第一层对象进行深度复制。如果对象内部还有嵌套的对象，那些嵌套的对象仍然是引用，修改它们仍然会影响原始状态。例如：

  const complexArray = [{ id: 1, data: { value: 'a' } }];
  const clonedArray = complexArray.map(o => ({...o}));
  clonedArray[0].data.value = 'b'; // 此时 originalArray[0].data.value 也会变成 'b'

  登录后复制

  因此，此方法适用于本教程中的示例数据结构，但对于更复杂的嵌套结构，应优先考虑 structuredClone() 或其他深度复制库。

总结与最佳实践

在 React 中处理复杂状态时，维护状态的不可变性至关重要。这意味着每次状态更新都应该创建一个新的状态对象或数组，而不是直接修改旧的状态。选择正确的深度复制方法取决于你的数据结构的复杂度和目标浏览器的兼容性要求。

• 对于简单对象数组或没有深度嵌套的对象数组： arrayState.map(o => ({...o})) 是一个简洁且兼容性良好的选择。
• 对于包含多层嵌套、Date、RegExp、Map、Set 等复杂数据类型： 优先使用 structuredClone()，因为它能更全面地处理深度复制，且性能通常更优。但请务必注意其浏览器兼容性。
• 对于需要支持旧版浏览器或处理更复杂、包含函数/DOM节点等不可克隆对象的场景： 考虑使用成熟的第三方库，如 Lodash 的 cloneDeep 方法，它们提供了更健壮和兼容性更好的深度复制解决方案。

通过正确地应用深度复制策略，你可以确保 React 状态的稳定性和可预测性，避免因意外的状态修改而引入难以调试的 Bug。

以上就是React 状态管理：深度复制数组对象的策略与实践的详细内容，更多请关注php中文网其它相关文章！