核心思路是让深拷贝变得不必要——通过扁平化结构、不可变更新（如Immer）、状态分层（私有/共享/全局）和key优化重渲染，从源头减少嵌套变更需求。
核心思路不是“避免深拷贝”，而是让深拷贝变得不必要——通过数据结构设计、状态分层和不可变更新模式，从源头减少嵌套变更需求，从而规避性能损耗。
用扁平化结构替代深层嵌套
深拷贝的触发往往源于对嵌套对象（如 nestedConfig.settings.enabled）的直接修改。与其每次更新都深拷贝，不如在状态建模阶段就控制深度：
- 将高频变动的配置项拆为顶层字段：例如把
nestedConfig.count和nestedConfig.settings.enabled直接提升为configCount和configSettingsEnabled - 对真正需要嵌套的场景（如表单字段组），用数组+唯一 id 管理，而非对象嵌套：每个子项独立更新，无需影响父结构
- 使用 TypeScript interface 显式约束层级，配合 ESLint 规则禁止新增三级以上嵌套属性
用 Immutable + 结构共享代替手动深拷贝
当嵌套确实存在且需局部更新时，手动 JSON.parse(JSON.stringify()) 或递归 clone 是低效且易出错的。应转向不可变数据范式：
- 引入
immer：写法仍是“直接修改”，底层自动产出新引用，无须手写深拷贝逻辑 - 对简单更新（如更新数组某一项），用展开运算符 + 索引替换：
[...items.slice(0, i), newItem, ...items.slice(i + 1)] - 对对象更新，优先用浅合并：
{ ...prev, field: value }；仅当明确需隔离嵌套变更时，才对目标子路径做局部 immer draft
按状态敏感度分层，隔离深操作范围
不是所有状态都值得或需要深拷贝。依据访问范围与变更频率划分层级，让深操作只发生在最小必要区域：
-
组件私有状态（如表单临时输入）：用
useState+ 浅拷贝足够，避免引入额外库 -
模块共享状态（如列表筛选条件）：用
useReducer或zustand，配合produce处理嵌套更新 -
全局高敏状态（如用户权限配置）：交由 Redux +
reselect记忆化 selector，确保只有依赖变化时才重新计算，跳过无效深处理
用 key 控制重渲染边界，降低深比较压力
即使 props 中包含嵌套对象，只要 React 能通过 key 精准识别组件身份，就能跳过 diff 比较，避免因引用变化引发的误判重绘：
- 列表项必须设稳定唯一
key（不用index），让 React 复用 DOM 节点而非重建 - 对可能携带嵌套数据的子组件，用
React.memo包裹，并传入自定义比较函数，只比关键字段（如item.id），跳过整个嵌套对象的浅/深比 - 避免在父组件 render 中动态创建嵌套对象作为 props，改用 useMemo 缓存或提前构造
