React 中嵌套对象的不可变更新策略-js教程-PHP中文网

react 中嵌套对象的不可变更新策略

本文深入探讨了在 React 应用中如何正确地更新嵌套对象，避免直接修改状态导致的问题。通过详细解析 `useState` 和扩展运算符（spread operator）的结合使用，展示了如何实现不可变更新，确保在修改深层数据结构时，既能保留现有属性，又能触发组件的正确重新渲染。

引言：React 中嵌套对象的更新挑战

在 React 开发中，管理组件状态是核心任务之一。当状态是一个复杂的嵌套对象时，对其进行更新往往会遇到挑战。开发者常常会尝试直接修改对象内部的属性，或者在使用扩展运算符时未能完全理解其作用，导致数据被意外覆盖，而非按预期添加或更新。

例如，考虑以下一个嵌套对象结构：

const obj = {
    category1: [
      { title: { name1: 'value1' } },
      { title: { name2: 'value2' } }
    ],
    category2: [
      { title: { name3: 'value3' } },
      { title: { name4: 'value4' } }
    ]
};

登录后复制

如果目标是向 category1 数组中索引为 1 的对象添加一个新的属性 newTitle，并期望得到如下结构：

const obj = {
   category1: [
     { title: { name1: 'value1' } },
     { title: { name2: 'value2' }, newTitle: { name5: 'value5' } } // 期望结果
   ],
   category2: [
     { title: { name3: 'value3' } },
     { title: { name4: 'value4' } }
   ]
};

登录后复制

但由于不正确的更新方式，例如直接赋值或不完全的扩展，结果可能会是 title 属性被 newTitle 替换：

const obj = {
    category1: [
      { title: { name1: 'value1' } },
      { newTitle: { name5: 'value5' } } // 实际得到的错误结果
    ],
    category2: [
      { title: { name3: 'value3' } },
      { title: { name4: 'value4' } }
    ]
};

登录后复制

这种问题通常源于对 React 状态管理中“不可变性”原则的误解，以及对 JavaScript 对象和数组浅拷贝行为的不熟悉。

理解 React 状态管理与不可变性

React 的核心理念之一是“状态不可变性”（Immutability）。这意味着当组件的状态（state）发生变化时，不应该直接修改原始状态对象，而是应该创建一个新的状态对象，并用它来替换旧的状态。这样做有几个关键优势：

触发重新渲染：React 通过比较新旧状态对象的引用来判断是否需要重新渲染组件。如果直接修改旧状态，引用不会改变，React 可能无法检测到状态变化，从而导致 UI 不更新。
避免副作用：不可变更新有助于避免意外的副作用，使状态变化更可预测和可追踪。
时间旅行调试：许多调试工具（如 Redux DevTools）依赖于不可变状态来提供“时间旅行”功能，方便回溯和重放状态变化。
性能优化：在某些情况下，不可变性可以简化 shouldComponentUpdate 或 React.memo 等优化手段的实现。

useState 与 useRef 的选择

在 React 中，管理组件状态通常使用 useState 钩子。useState 会返回一个状态值和一个更新该状态的函数，并且当状态通过更新函数改变时，组件会重新渲染。

useRef 钩子则用于在组件的整个生命周期中存储一个可变的引用，但它的更新不会触发组件的重新渲染。useRef 通常用于：

引用 DOM 元素。
存储不触发重新渲染的变量（例如计时器 ID）。
存储任何需要在多次渲染之间保持不变但又不需要触发渲染的值。

对于会影响 UI 的数据，强烈建议使用 useState。如果将一个复杂对象存储在 useRef 中，并期望通过修改 obj.current 来更新 UI，那么组件将不会重新渲染，除非有其他状态变化触发了渲染。因此，对于上述嵌套对象更新的场景，useState 是更合适的选择。

正确的不可变更新策略

实现嵌套对象的不可变更新，核心原则是在修改任何层级时，都要创建该层级的新对象或数组副本，而不是直接修改原引用。这通常通过 JavaScript 的扩展运算符（...）和数组的 map 方法来实现。

可灵AI

可灵AI：新一代AI创意生产力平台

10856

查看详情

示例代码：使用 useState 进行深度更新

以下是一个完整的 React 组件示例，演示如何正确地更新上述嵌套对象：

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom/client';

const MyComponent = () => {
  // 使用 useState 管理嵌套对象，确保状态更新能触发组件重新渲染
  const [obj, setObj] = useState({
    category1: [
      { title: { name1: 'value1' } },
      { title: { name2: 'value2' } }
    ],
    category2: [
      { title: { name3: 'value3' } },
      { title: { name4: 'value4' } }
    ]
  });

  const ctg = 'category1'; // 要更新的类别
  const index = 1;         // 要更新的数组索引
  const titleVar = 'newTitle'; // 新属性的名称
  const nameVar = 'name5';     // 新属性内部对象的键
  const valueVar = 'value5';   // 新属性内部对象的值

  // 使用 useRef 存储更新函数，避免在每次渲染时重新创建
  // 注意：这里 useRef 存储的是一个函数，而不是 obj 状态本身
  const updateObject = useRef(() => {
    // 1. 复制最外层对象
    const updatedObj = {
      ...obj, // 浅拷贝 obj 的所有属性
      // 2. 针对需要修改的 category 属性，创建新的数组副本
      [ctg]: obj[ctg].map((item, i) => {
        if (i === index) {
          // 3. 针对数组中需要修改的项，创建新的对象副本
          return {
            ...item, // 浅拷贝 item 的所有属性
            // 4. 添加或更新新属性。
            //    如果 newTitle 内部也可能存在现有属性，需要再次展开
            [titleVar]: { ...item[titleVar], [nameVar]: valueVar }
          };
        }
        return item; // 不需要修改的项直接返回原引用
      })
    };

    // 5. 使用 setObj 更新状态，触发组件重新渲染
    setObj(updatedObj);
  });

  return (
    <div>
      <h2>当前对象状态:</h2>
      <pre>{JSON.stringify(obj, null, 2)}</pre>
      <button onClick={updateObject.current}>更新对象</button>
    </div>
  );
};

// 渲染组件到 DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyComponent />);

登录后复制

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

登录后复制

代码解析

让我们逐层分析上述代码中实现不可变更新的关键步骤：

复制最外层对象 (...obj)： const updatedObj = { ...obj, ... }; 这是更新的起点。我们首先使用扩展运算符 ...obj 创建了 obj 的一个浅拷贝。这意味着 updatedObj 是一个全新的对象，但它的 category1 和 category2 属性仍然指向 obj 中对应的原始数组引用。
创建新的数组副本并更新指定项 (obj[ctg].map(...))： [ctg]: obj[ctg].map((item, i) => { ... }) 为了修改 category1 数组中的一个元素，我们不能直接修改 obj.category1。相反，我们使用 map 方法遍历 obj[ctg] 数组。map 方法总是返回一个新数组，这满足了不可变性的要求。
- 对于不需要修改的数组项 (i !== index)，我们直接返回 item 的原始引用。
- 对于需要修改的数组项 (i === index)，我们进入下一层级的拷贝。
创建新的对象副本并添加/更新属性 (...item)： return { ...item, [titleVar]: { ... } }; 在 map 回调中，当 i === index 时，我们需要修改数组中的特定对象。同样，我们使用 ...item 创建了该对象的一个浅拷贝。这样，item 中原有的 title 属性就被保留下来。
添加或更新新属性 ([titleVar]: { ...item[titleVar], [nameVar]: valueVar })： [titleVar]: { ...item[titleVar], [nameVar]: valueVar } 这是最关键的一步。我们向新创建的 item 副本中添加或更新 titleVar（即 newTitle）属性。
- 如果 newTitle 内部也可能存在需要保留的属性（尽管在这个例子中 newTitle 是一个全新的属性），我们依然可以使用 ...item[titleVar] 来确保其内部的现有属性也被复制。在这个特定场景下，item[titleVar] 是 undefined，所以 ...undefined 不会产生任何效果，但这种写法在处理更复杂情况时能提供更强的健壮性。
- [nameVar]: valueVar 则将 name5: 'value5' 添加到 newTitle 对象中。
更新状态 (setObj(updatedObj))：最后，将完全不可变更新后的 updatedObj 传递给 setObj。由于 updatedObj 是一个全新的对象引用，React 会检测到状态变化并触发组件重新渲染，从而在 UI 上显示最新的数据。

注意事项与最佳实践

useRef 的正确使用：如前所述，useRef 不应直接用于存储需要触发 UI 重新渲染的状态数据。在上述示例中，updateObject 是一个函数，将其存储在 useRef 中可以避免在每次渲染时重新创建该函数，这是一种性能优化手段，但它并不改变 obj 状态本身的管理方式。
深层嵌套的复杂性：对于非常深层或结构复杂的嵌套对象，手动使用 ... 和 map 进行多层拷贝可能会使代码变得冗长和难以维护。在这种情况下，可以考虑以下解决方案：
- useReducer 钩子：如果状态更新逻辑变得复杂，useReducer 可以帮助将状态更新逻辑集中管理，类似于 Redux。
- Immer 库：Immer 是一个流行的库，它允许你“直接”修改状态，但实际上它在底层会帮你处理不可变更新，大大简化了代码。例如：
```
import produce from 'immer';

const updatedObj = produce(obj, draft => {
  draft[ctg][index][titleVar] = { [nameVar]: valueVar };
});
setObj(updatedObj);
```
  登录后复制
  这种方式极大地提高了代码的可读性和简洁性。
性能考量：虽然创建新对象和数组会有一定的性能开销，但对于大多数应用来说，这种开销微乎其微，并且其带来的可预测性和可维护性收益远大于性能损失。只有在遇到极端性能瓶颈时才需要考虑更底层的优化。

总结

在 React 中更新嵌套对象时，遵循不可变性原则至关重要。这意味着你不能直接修改原始状态，而应在修改的每个层级创建新的对象或数组副本。通过熟练运用 useState 钩子、JavaScript 的扩展运算符 (...) 和数组的 map 方法，可以优雅且高效地实现深度不可变更新，确保组件的正确渲染和应用状态的可预测性。对于更复杂的场景，useReducer 或 Immer 等工具可以进一步简化开发流程。

以上就是React 中嵌套对象的不可变更新策略的详细内容，更多请关注php中文网其它相关文章！