局部浅拷贝与按需深拷贝组合是“分层隔离+精准复制”策略：首层用浅拷贝保性能，嵌套结构仅在需变更隔离时深拷贝子路径，避免全量开销。
局部浅拷贝与按需深拷贝组合，本质是“分层隔离 + 精准复制”的数据策略，不是为了盲目拷贝，而是让渲染链路既稳定又高效。关键在于：第一层用浅拷贝保性能、控粒度；嵌套结构只在真正需要变更隔离时才深拷贝，避免无意义开销。
哪些字段适合局部浅拷贝
当 props 或 state 中存在大量一级属性，且其中多数为基本类型（string/number/boolean）或无需修改的引用（如函数、静态配置对象），直接用浅拷贝即可安全复用：
- 使用展开运算符 {...props} 或 Object.assign({}, props) 拆解一级结构，保留原始引用稳定性
- 对数组做 [...arr] 或 arr.slice()，仅隔离数组容器本身，不处理内部对象
- 适用于按钮文案、开关状态、ID、时间戳等独立值，修改它们不会波及深层结构
哪些场景必须触发按需深拷贝
只有当某次操作明确要修改嵌套层级的内容，且该修改不能反馈到原始数据源时，才启动深拷贝——不是全量拷贝整个对象，而是只深拷贝被操作的子路径：
- 表单编辑中用户修改了 user.profile.address.city，可只对 user.profile.address 这一子对象做深拷贝，而非整个 user
- React 中通过 useMemo 计算衍生配置时，若仅更新 config.rules，可用 structuredClone 或 immer.produce 针对该字段克隆
- 避免用 JSON.parse(JSON.stringify(obj)) 全量深拷贝，它会丢弃函数、undefined、Date、Symbol 等，应优先选 structuredClone（现代浏览器支持）或 immer
如何在 React 渲染链路中落地
组合策略的核心是配合 React 的更新机制，不让拷贝行为破坏引用一致性：
- 不要在 render 中深拷贝 props 传给子组件：这会让 React.memo 失效，每次生成新引用，子组件必重渲染
- 把深拷贝移到事件处理器或状态派生逻辑里：例如 onInputChange 触发后，先深拷贝待编辑字段，再 setState
- 用 useMemo 缓存已拷贝结果：对同一输入反复计算时，避免重复深拷贝开销
- 若需对比前后差异，用 react-fast-compare 做深比较，而不是靠深拷贝制造新引用去“骗过”浅比较
一个典型实践示例
假设有一个配置面板，展示并允许编辑嵌套的监控规则：
原始数据结构：{ id: 'r1', name: 'CPU告警', threshold: 85, conditions: [{ metric: 'cpu_usage', op: '>', value: 80 }] }
- 用浅拷贝提取一级字段：const editConfig = { ...config };
- 仅对 conditions 深拷贝：editConfig.conditions = structuredClone(config.conditions);
- 后续修改 editConfig.conditions[0].value 不影响原 config.conditions
- 提交时将 editConfig 整体作为新状态，触发受控更新
