本文深入探讨了在 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 方法来实现。
示例代码：使用 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 等工具可以进一步简化开发流程。