React 的 Diff 算法是怎么工作的？为什么性能很高？

React 的 Diff 算法是怎么工作的？为什么性能很高？

✅ 一、什么是 diff 算法？

React 使用的是一种基于树的 diff 算法，通过比较新旧虚拟 DOM 树（Virtual DOM），计算出最小的 DOM 更新操作，来提升性能。它的核心目标是： 最小化实际 DOM 操作次数 + 避免不必要的重绘重排。

---

✅ 二、为什么它快？

🧩 1. 同级比较（只对比同一层级）

• 假设：DOM 节点跨层移动非常少。

• 所以只对比同一层级，不考虑跨层重排。

🔤 2. key 区分子节点（避免乱序）

• 如果不加 key，React 会用 ” 位置索引 ” 对比，可能导致整组元素被删重建。

• 如果有 key，可以精确判断哪些节点复用、插入、移动或删除。

<ul>
  {items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

📦 3. 组件级 diff（跳过重复渲染）

• 如果是同一组件类型（比如 <A /> → <A />），React 会复用旧组件实例，只更新 props。

• 如果组件类型变了（比如 <A /> → <B />），React 会销毁旧组件，挂载新组件。

---

✅ 三、实际中怎么触发 diff 优化？

实际开发中，我们通过以下方式配合 diff 提升效率：

• 给列表组件添加 key 属性，避免错误复用
• 使用 React.memo + useCallback 避免组件重复渲染
• 拆分组件粒度，减少不必要的渲染范围
• 使用 shouldComponentUpdate（类组件） 或 React.memo（函数组件）

---

🪄 举个例子（建议面试时加一句）

const items = ['a', 'b', 'c']
// 更新成 ['b', 'a', 'c']，没有 key 会重排两项，有 key React 只会移动元素

---

示例回答

React 的 diff 算法是一个高效的启发式算法，它在保证性能的前提下，通过同级比较、key 优化、组件复用等手段，极大减少了不必要的真实 DOM 操作，这也是 React 性能优秀的重要原因。