核心是数据流入时立即切断引用链：接收props立即拷贝对象/数组，用structuredclone或扩展运算符；事件中避免临时深拷贝；自定义hook内部操作安全副本；微前端透传前生成只读副本；表单严格区分初始值、当前值与重置值。

核心思路是：不等出问题再补救，而是在数据流入组件或函数的第一时间就切断引用链。

接收外部数据时立即拷贝

父组件传来的 props，尤其是对象或数组，不要直接用，先做一次安全复制。React 中可结合 useEffect 或 useMemo：

• 用 structuredClone 处理含嵌套结构的配置对象（现代环境首选）
• 纯原始值一维结构，用扩展运算符 {...obj} 或 [...arr] 即可
• 避免在事件处理函数里临时深拷贝——容易漏、逻辑分散、性能不可控

对外暴露的方法内部封装副本操作

自定义 Hook 或工具函数返回的修改方法（如 updateConfig、addItem），其内部应操作本地副本，而非直接改入参：

绘蛙-创意文生图

一款面向电商场景的AI商品图生成工具，可根据文字描述辅助制作商品视觉内容，帮助商家快速探索不同商品展示方案。

下载

• 把原始数据存进 useState 或 useRef 的安全副本中
• 所有 setter 函数都基于该副本计算新值，再触发更新
• 这样调用方无需关心“要不要自己拷贝”，语义更清晰、边界更干净

微前端或跨模块透传场景设隔离层

主应用向子应用传 config、API 实例等共享对象时，不能裸传，需加一层“只读代理”或“单向快照”：

• 透传前用 structuredClone 生成独立副本，再注入子应用
• 若需响应式同步，改用事件机制（如发布/订阅）替代直接共享引用
• 对 Date、RegExp、函数等特殊值，明确约定是否透传——多数情况下它们不该出现在跨边界配置中

表单类场景按字段粒度控制可变性

初始值、当前值、重置值三者必须严格区分，避免混用：

• 初始值进组件时立刻深拷贝并冻结（Object.freeze 可选）
• 当前值用独立 state 管理，所有编辑操作只影响它
• 重置按钮直接还原初始副本，而不是试图“反向推导”原始结构