React 中如何正确地更新嵌套状态对象而不直接修改原对象？

React 中如何正确地更新嵌套状态对象而不直接修改原对象？

在 React 中，状态（state）应被视为不可变（immutable）。当状态是一个嵌套对象时，直接修改其属性（如 obj.a.b = newValue）会破坏不可变性，可能导致组件不重新渲染或出现难以追踪的 bug。正确做法是使用展开运算符（...）或不可变更新工具（如 immer）来创建新的状态副本。

示例（使用展开运算符）：

// 假设状态结构为 { user: { profile: { name: 'Alice' } } }
setUser(prev => ({
  ...prev,
  profile: {
    ...prev.profile,
    name: 'Bob'
  }
}));

更复杂的嵌套推荐使用 immer：

import { produce } from 'immer';

setUser(produce(draft => {
  draft.profile.name = 'Bob';
}));

解析：React 使用 Object.is() 对前后状态进行浅比较，若引用相同则跳过重渲染。因此必须确保每次状态更新都返回一个新对象，尤其在深层嵌套场景下，手动展开易出错，使用 immer 可提升可读性和安全性。