通过展开运算符实现多层嵌套对象的非破坏性局部更新，需逐层展开、只改目标路径、保持其余结构不变，如更新user.profile.settings.theme需四层展开；函数封装（如updatein）可提升可读性与复用性；含数组时需结合map与展开；严禁覆盖整层或直接赋值等破坏性写法。
要通过展开运算符对多层嵌套对象做“非破坏性”局部更新，核心是**逐层复制、只改目标、保持其余结构完全不变**。这不是一次展开就能完成的操作，而是从外到内、层层嵌套使用 ... 构建新对象链。
明确更新路径，从最外层开始展开
假设状态结构为：
const state = {
user: {
profile: {
name: "Alice",
settings: { theme: "dark", notifications: true }
}
},
meta: { updatedAt: "2026-04-29" }
};
你想把 user.profile.settings.theme 改成 "light"，但不能动 name、notifications 或 meta。
做法是：先展开顶层（保留 user 和 meta），再展开 user（保留 profile 及其他可能字段），再展开 profile（保留 name 和 settings），最后展开 settings 并覆盖 theme：
{ ...state, user: { ...state.user, profile: { ...state.user.profile, settings: { ...state.user.profile.settings, theme: "light" } } } }
用函数封装提升可读性与复用性
手写多层展开容易出错且难维护。推荐封装成通用工具函数或就地使用箭头函数简化逻辑：
- 例如更新
state.user.profile.settings.theme： setState(prev => ({ ...prev, user: { ...prev.user, profile: { ...prev.user.profile, settings: { ...prev.user.profile.settings, theme: "light" } } } }))- 若频繁更新类似路径，可抽离为
updateIn(state, ['user', 'profile', 'settings'], s => ({ ...s, theme: "light" }))形式（内部仍靠展开实现）
注意数组嵌套中的“内层展开”配合
如果嵌套结构中含数组（如 user.posts[0].likes），需额外结合数组方法 + 展开：
- 更新第一个帖子的
likes数量：先用map遍历posts，对索引为 0 的项做对象展开更新，其余项原样返回 posts: state.user.posts.map((post, i) => i === 0 ? { ...post, likes: post.likes + 1 } : post)- 再将这个新
posts塞回上层展开链中，确保user和外层都不被破坏
避免常见破坏性写法
这些写法看似简洁，实则会丢失数据或违反不可变原则：
-
{ ...state, user: { profile: { settings: { theme: "light" } } } }—— 覆盖整个user，user.profile.name等全丢 -
{ ...state, "user.profile.settings.theme": "light" }—— 创建非法键名，不是嵌套更新，是加了一个字符串键 - 直接修改
state.user.profile.settings.theme = "light"—— 原对象被污染，React 不会响应
