React 的 diff 算法（也称为协调算法）是 React 用于在虚拟 DOM 和实际 DOM 之间进行高效同步的核心机制。这个算法的主要目标是尽量减少对实际 DOM 的操作，因为操作实际 DOM 是昂贵的。下面通过图解来说明 React diff 算法的工作原理。
基本原理
React 的 diff 算法基于两个假设：
- 不同类型的元素会产生不同的树：如果元素的类型不同，React 会销毁旧树并创建新树。
- 可以通过唯一的 key 来区分同级元素：在同级元素中，如果 key 不同，React 会认为这些元素是不同的。
步骤1：节点类型比较
React 会先比较两个节点的类型：
- 同类型节点：比较属性和子节点。
- 不同类型节点：完全替换旧节点及其子树。
步骤2：属性比较
对于同类型的节点，React 会比较其属性：
- 属性不同：更新属性。
- 属性相同：不做任何操作。
步骤3：子节点比较
React 会递归地比较子节点。子节点的比较基于 key。如果没有 key，则使用位置进行比较。
同层级子节点的比较
在比较同层级的子节点时，React 使用 key 来进行快速比较。具体步骤如下：
- 生成新旧节点的映射：为每个子节点生成一个从 key 到节点的映射。
- 遍历新子节点：根据 key 在旧节点映射中查找对应节点，并进行比较和更新。如果没有找到，则创建新节点。
- 删除旧节点：遍历旧节点，如果在新节点中没有对应的 key，则删除该节点。
图解
- 同类型节点：更新属性和子节点。
- 不同类型节点：销毁旧节点，创建新节点。
- 同层级子节点的比较：
- 添加新节点：在末尾添加节点。
- 删除旧节点：在头部删除节点。
- 重新排列节点：根据 key 重新排列节点。
总结
React 的 diff 算法通过以下几个步骤实现高效的 DOM 更新：
- 比较节点类型。
- 更新同类型节点的属性。
- 递归比较和更新子节点。
- 使用 key 进行高效的同层级子节点比较。
这个算法的关键在于通过最小化 DOM 操作，提高性能和用户体验。