子组件重复挂载的根源是引用变化或key变更；应缓存函数/对象、用唯一id作key、确保数据就绪后再渲染。
Props 传参本身不会导致子组件重新挂载，真正触发卸载+挂载（即“重复创建”）的，是子组件的 引用变化 或 key 值变化。Vue 和 React 都把 key 当作组件身份标识：key 不同，就视为“另一个组件”，旧实例被销毁，新实例被创建——这就是闪烁、状态丢失、useEffect 清理函数反复执行的根源。
子组件引用被意外重建（React 场景）
在父组件函数体内直接定义子组件、内联函数或对象，每次父组件重渲染都会生成全新引用：
- ❌ 错误写法：在 return 中写
<child></child>，且 Child 是父组件内部 const 定义的函数组件 - ❌ 错误写法：
onClick={() => doSomething(id)}作为 prop 传入，每次渲染都新建函数 - ❌ 错误写法：
:config="{ theme: 'dark' }"，每次渲染都新建对象，触发 Vue 子组件更新（虽不挂载，但可能引发多余 diff）
✅ 正确做法：用 useCallback 缓存函数，用 useMemo 缓存对象，将子组件定义移至顶层或用 React.memo 包裹子组件并确保 props 浅比较稳定。
Key 值使用不当（Vue & React 通用）
key 不是渲染序号，而是数据项的**稳定唯一标识**。用 index 当 key 是最常见诱因：
- ❌
v-for="(item, i) in list" :key="i"—— 列表增删时，index 错位，key 复用错乱，组件被错误复用或销毁 - ❌
key={index}在 React 列表中同理，插入/删除首项后，后续所有元素 key 改变，全部重挂载
✅ 正确做法：优先使用每项数据本身的唯一 ID，如 :key="item.id" 或 key={item.id}；无 ID 时，可借助 crypto.randomUUID() 生成（仅限临时场景，避免服务端渲染不一致）。
父组件异步数据未就绪就渲染子组件（Vue 常见）
父组件 data 初始化为空，异步请求后才赋值，但子组件已按空值完成首次挂载。若子组件依赖该 props 初始化内部状态（如 useState(props.data)），后续 props 更新不会自动同步。
- ❌ 子组件直接用 props 值初始化 state，且未监听 props 变化
- ❌ 父组件未做 loading 控制，子组件在 props 为 null/undefined 时强行渲染
✅ 正确做法：Vue 中可用 watch 监听 props 变化并同步内部状态；React 中用 useEffect + 依赖数组响应 props 更新；更稳妥的是父组件加 v-if="dataReady" 或 {data && <child data="{data}"></child>}，确保子组件只在数据有效时挂载一次。
关键不在 props 本身，而在你如何组织引用和标识。稳定引用 + 稳定 key + 数据就绪再挂载，三者到位，闪烁和重复挂载自然消失。
