浅拷贝适用于扁平结构或仅更新顶层字段的场景；它高效简洁，适合纯对象、一维数组整体替换及表单顶层字段更新，但遇嵌套结构需改用 Immer 或深拷贝。

在 React 中，浅拷贝是更新不可变数据最常用、也最轻量的方式——但它的适用边界非常明确：只适用于扁平结构或仅需更新顶层字段的场景。用错地方，就会破坏不可变性，导致 UI 不更新、状态意外污染等典型问题。

什么时候该用浅拷贝？

浅拷贝的核心价值是高效、简洁、可预测。它适合以下情况：

• 状态是纯对象，且所有属性值都是基本类型（字符串、数字、布尔值、null、undefined）
• 状态包含一维数组（如 string[]、number[]），且你只替换整个数组，不修改其中某个元素
• 你正在更新表单顶层字段，比如 name、email、isActive
• 性能敏感场景（如高频输入、列表滚动），不需要递归遍历嵌套结构

怎么写才安全？常见写法与陷阱

正确写法的关键是：确保返回一个新引用，且不复用原对象的嵌套引用。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• 对象更新推荐用展开运算符：setForm(prev => ({ ...prev, email: 'new@example.com' }))
• 数组整体替换用扩展或 slice：setItems([...items, newItem]) 或 setItems(items.slice())
• 避免直接修改再赋值：items.push(newItem); setItems(items) ❌（引用未变，React 跳过渲染）
• 警惕“伪拷贝”：{ ...prev } 只拷第一层，若 prev.config 是对象，newObj.config === prev.config 仍为 true

浅拷贝不适用时，别硬扛

一旦状态出现嵌套对象、嵌套数组、或你需要修改深层字段（如 user.profile.avatar.url），浅拷贝就失效了。此时强行用多层展开会代码臃肿、易出错：

• 例如更新 todos[0].done = true，必须先拷外层数组，再拷目标对象：setTodos(todos.map((t, i) => i === 0 ? { ...t, done: true } : t))
• 这种写法可读性差，层级一深就难维护，也不适合动态路径更新
• 更稳妥的做法是切换到 immer 或显式深拷贝策略（如 structuredClone），而不是把浅拷贝用到极限

一句话总结

浅拷贝是 React 状态更新的“快车道”，但它只通向平坦地形；遇到山坡、隧道（嵌套结构），就得换工具，而不是踩油门硬冲。