React 的 diff 算法

React 的 diff 算法的演进。

在 React 16 之前，React 使用的是称为 Reconciliation 的 diff 算法。Reconciliation 算法通过递归地比较新旧虚拟 DOM 树的每个节点，找出节点的差异，并将这些差异应用到实际的 DOM 上。整个过程是递归的，从根节点开始，逐层比较，直到整个虚拟 DOM 树完成比较和更新。

Reconciliation 算法的主要思想是基于两个假设：

• 对于相同类型的组件，它们的 DOM 结构也相同。
• 对于同一层级的兄弟节点，它们可以通过唯一的 key 属性进行区分。

根据这些假设，Reconciliation 算法可以更高效地更新 DOM。它会尽量复用已存在的 DOM 节点，而不是完全重新创建节点。只有当节点类型不同或 key 不匹配时，才会创建新的节点。

然而，在某些情况下，Reconciliation 算法的性能可能会受到影响。例如，当组件层级很深或组件树很大时，递归比较的开销会变得显著。另外，如果组件之间的关系变得复杂，例如列表中的动态项目，Reconciliation 算法可能无法高效地确定节点的插入、移动和删除。

为了解决这些问题，React 16 引入了 Fiber 架构，其中的 diff 算法发生了改变。Fiber 架构实现了增量渲染、优先级调度和可中断恢复的能力。它将渲染过程分解为多个可中断的任务单元，使得 React 能够根据优先级动态调整任务的执行顺序，提高交互性能和响应性。

Fiber 架构的 diff 算法在某种程度上与 Reconciliation 算法相似，仍然是通过递归地比较新旧虚拟 DOM 树的节点来找出差异。然而，Fiber 架构引入了对任务优先级的考虑，并通过任务分片和调度器来优化任务的执行顺序。这使得 React 可以根据用户交互或其他优先级较高的任务，优先处理重要的工作，提供更好的用户体验。

总的来说，React 的 diff 算法在 React 16 之前使用的是 Reconciliation 算法，它通过递归比较新旧虚拟 DOM 树的节点来确定差异，并更新实际的 DOM。在 React 16 引入的 Fiber 架构中，diff 算法通过增量渲染、优先级调度和可中断恢复等特性进行了改进，以提高渲染性能和用户体验。