深入diff 算法

深入diff 算法

diff 作为 Virtual DOM 的加速器，其算法上的改进优化是React页面渲染的基础和性能保障，本节从源码入手，深入剖析diff算法。

React 中醉值得称道的莫过于Virtual DOM与diff的完美结合，尤其是其高效的diff算法，可以帮助我们在页面蔌渲染的时候，计算出Virtual DOM真正变化的部分，并只针对该部分进行的原生DOM操作，而不是渲染整个页面，从而保证了每次操作后，页面的高效渲染。

一. 传统的 diff 算法

计算一个树形结构转换成另一个树形结构的最少操作，是一个复杂且值得研究的问题，传统 diff 算法通过循环递归的方法对节点进行操作，算法复杂度 为O(n³)，其中n为树中节点的总数，这效率太低了，如果 React 只是单纯的引入 diff 算法，而没有任何的优化的话，其效率远远无法满足前端渲染所需要的性能。那么React 是如何实现一个高效、稳定的 diff 算法。

二. diff 源码解读

React 将 Virtual DOM 树转换为 actual DOM 树的最小操作的过程称为调和， diff 算法便是调和的结果，React 通过制定大胆的策略，将 O(n³)的时间复杂度转换成 O(n)。

1. diff 策略

下面是 React diff 算法的 3 个策略：

• 策略一：Web UI 中 DOM 节点跨层级的移动操作特别少。可以忽略不计。
• 策略二：拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
• 策略三：对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。

基于以上三个策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化。

2. tree diff

对于策略一，React 对树的算法进行了简介明了的优化，即对树进行分层比较，两颗树只会对同一层级的节点进行比较。

既然 DOM 节点跨层级的移动，可以少到忽略不计，针对这种现象，React 通过 updateDepth 对 Virtual DOM 树进行层级控制，只对相同层级的DOM节点进行比较，即同一父节点下的所有子节点，当发现该节点已经不存在时，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个DOM树的比较。

// updateChildren 源码
updateChildren: function (nextNestedChildrenElements, transaction, context) {
   
    updateDepth ++;
    var errorThrown = true;
    try {
   
        this._updateChildren(nextNestedChildrenElements, transaction, context);
        errorThrown = false;
    } finally {
   
        updateDepth --;
        if (!updateDepth) {
   
            if (errorThrown) {
   
                clearQueue();
            } else {
   
                processQueue();
            }
        }
    }
}

那么就会有这样的问题：

如果出现了 DOM 节点跨层级的移动操作，diff 会有怎样的表现喃？

我们举个例子看一下：

如下图2-1，A节点（包括其子节点）整个需要跨层级移动到D节点下，React会如何操作喃？

图2-1 DOM层级变换

由于 React 只会简单的考虑同层级节点的位置变换，对于不同层级的节点，只有创建和删除操作。当根节点R发现子节点中A消失了，就会直接销毁A；当D节点发现多了一个子节点A，就会创建新的A子节点（包括其子节点）。执行的操作为：

create A —> create B —> create C —> delete A

所以。当出现节点跨级移动时，并不会像想象中的那样执行移动操作，而是以 A 为根节点的整个树被整个重新创建，这是影响 React 性能的操作，所以 官方建议不要进行 DOM 节点跨层级的操作。

在开发组件中，保持稳定的 DOM 结构有助于性能的提升。例如，可以通过CSS隐藏或显示节点，而不是真正的移除或添加 DOM 节点。

3. component diff

React 是基于组件构建应用的，对于组件间的比较所采取的策略也是非常简洁、高效的。

• 如果是同一类型的组件，按照原策略继续比较 Virtual DOM 树即可
• 如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点
• 对于同一类型下的组件，有可能其 Virtual DOM 没有任何变化，如果能确切知道这一点，那么就可以节省大量的 diff 算法时间。因此， React 允许用户通过 shouldComponentUpdate()来判断该组件是否需要大量 diff 算法分析。

图3-1 component diff

如上图3-1，当 D 组件变成 G 时，即使这两个组件结构相似，但一旦 React 判断D和G是两个不同类型的组件时，就不会再比较这两个组件的结构，直接进行删除组件D， 重新创建组件G及其子组件。虽然这两个组件是不同类型单结构类似，diff 算法会影响性能，正如 React 官方博客所言：

不同类型的组件很少存在相似 DOM 树的情况，因此，这种极端因素很难在实际开发过程中造成重大影响。

4. element diff

当节点处于同一层级时，diff 提供三种节点操作：

• INSERT_MARKUP（插入）：如果新的组件类型不在旧集合里，即全新的节点，需要对新节点执行插入操作。
• MOVE_EXISTING （移动）：旧集合中有新组件类型，且 element 是可更新的类型，generatorComponentChildren 已调用 receiveComponent，这种情况下 prevChild=nextChild，就需要做移动操作，可以复用以前的 DOM 节点。
• REMOVE_NODE （删除）：旧组件类型，在新集合里也有，但对应的 elememt 不同则不能直接复用和更新，需要执行删除操作，或者旧组件不在新集合里的，也需要执行删除操作。

// INSERT_MARKUP
function makeInsertMarkup(markup, afterNode, toIndex) {
   
    return {
   
        type: ReactMultiChildUpdateTypes.INSERT_MARKUP,
        content: markup,
        fromIndex: null,
        fromNode