深拷贝的核心作用是生成与原始状态完全独立的新副本，防止嵌套修改污染原始state，守住不可变性原则；浅拷贝仅复制第一层，嵌套对象/数组仍共享引用，导致意外修改和ui不更新。
在 React 状态管理中，深拷贝的核心作用不是“防修改”本身，而是确保你操作的是一个与原始状态完全独立的新副本——这样无论你怎么改它，都不会意外污染原始 state，从而守住不可变性原则。
为什么浅拷贝在嵌套数组/对象里会失效
React 的 useState 和 useReducer 只检查引用是否变化。浅拷贝（如 [...arr] 或 {...obj}）只复制第一层，内部嵌套的对象或数组仍共享内存地址。
- 比如
todos.map(item => ({...item}))：每个 todo 对象是新引用，但若 item 里有tags: ['a', 'b']，这个数组仍是原引用 - 一旦你写
newTodos[0].tags.push('c')，原始 state 的 tags 也会变 —— React 不知道，UI 也不更新，还可能引发隐藏 bug
真正需要深拷贝的典型场景
以下情况必须保证深层结构隔离：
- 状态是对象数组，且要修改某个对象内部的嵌套字段（如
user.profile.avatarUrl） - 表单数据含多级嵌套配置（如
form.config.rules[0].condition.value） - 从 API 拿到的数据直接存进 state，后续需局部编辑又保留原始快照
推荐的深拷贝方案（按优先级排序）
1. structuredClone（现代首选）
浏览器原生支持（Chrome 98+、Firefox 94+、Safari 15.4+），能正确处理 Map、Set、Date、RegExp、ArrayBuffer，也支持循环引用。
- 用法：
setTodos(structuredClone(prevTodos)) - 注意：暂不支持函数、Symbol、undefined；服务端 Node.js 需 v17.0+ 且启用
--experimental-structured-cloning
2. JSON.parse(JSON.stringify())（兼容兜底）
适合纯数据结构（无函数、无 Date/RegExp、无 undefined、无循环引用）。
- 用法：
setItems(JSON.parse(JSON.stringify(prevItems))) - 优点：零依赖、简洁；缺点：Date 变字符串、函数丢失、NaN 变 null、循环引用报错
3. Immer（开发体验最优）
不用手动深拷贝，用“可变写法”实现不可变更新，底层自动做结构化克隆。
- 用法：
setTodos(produce(draft => { draft[0].done = true; })) - 优势：语义清晰、支持任意嵌套、天然防误改、调试友好；劣势：增加约 3KB 包体积
不需要深拷贝的常见误解
很多情况其实只需浅拷贝或更轻量操作：
- 只替换整个数组（
filter、map返回新数组）、只更新顶层字段（{...prev, name: 'x'}）→ 浅拷贝足够 - 用
useMemo缓存计算结果、用useCallback缓存函数 → 和深拷贝无关 - 把 props 直接赋给 state（
useState(props.items)）→ 属于反模式，应避免初始值污染
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
