局限性

1. 跨层级移动节点效率低由于 Diff 按层级对比，若节点从一个父节点移动到另一个父节点（跨层级），React 会销毁旧节点并重建，而非移动（即使 key 相同）。解决方案：避免频繁跨层级移动节点，或通过 CSS 定位模拟移动。

2. 列表 key 不稳定导致性能问题若使用 index 作为 key，当列表增删元素时，key 会随索引变化，导致 React 误判节点为 “新节点” 而重建，浪费性能（尤其列表项包含输入框等状态组件时，会丢失状态）。解决方案：使用数据的唯一 ID 作为 key（如后端返回的 id）。

最佳实践

1. 保持节点类型稳定：避免频繁在不同类型节点间切换（如 div 和 span 交替渲染），尽量通过 props 控制样式而非类型。
2. 为列表项设置唯一稳定的 key：优先使用数据 ID，避免 index 或随机值。
3. 减少跨层级操作：尽量通过状态控制节点显示 / 隐藏（display: none），而非移除再插入。
4. 拆分复杂组件：将大组件拆分为小组件，减少 Diff 时的对比范围。

总结

React Diff 算法通过 “类型对比”“key 标识”“层级遍历” 三大策略，在保证大多数场景高效的前提下，将时间复杂度优化到 O (n)。其核心是通过启发式规则减少不必要的对比，优先复用可复用节点，仅对差异部分执行 DOM 操作。

理解 Diff 算法的工作原理，能帮助开发者写出更符合 React 优化逻辑的代码（如合理设置 key、避免不必要的节点类型变化），从而提升应用性能。