【React源码 - Diff算法】

weixin_44273311

已于 2024-03-11 17:02:27 修改

阅读量1.1k

点赞数 17

文章标签： react.js 算法 javascript

于 2024-01-15 15:49:59 首次发布

本文链接：https://blog.csdn.net/weixin_44273311/article/details/135558059

版权

介绍

在React学习中，Diff算法(协调算法)，想必我们并不陌生，简单来说就是一个对比新老节点寻找差异，然后找出最小的一个变化集，最后对这个最小变化集进行最小的DOM操作，本文将从源码来分析在React(17.0.2)中是如何来通过这个算法来进行对比并让Renderer知道如果操作DOM的。

在reconcileChildFibers中，主要是通过newChild的类型以及type来判断执行那个函数来更新fiber，其中主要类型分为非空对象、字符串/数字、数组、可迭代类型。
在这里插入图片描述
其中我们主要对非空对象的React Element(reconcileSingleElement函数)以及数组(reconcileChildrenArray函数，可迭代reconcileChildrenIterator和该函数核心逻辑大致一样)的处理来分析DIff算法：

if (isObject) {
      switch (newChild.$$typeof) {
        case REACT_ELEMENT_TYPE:
          return placeSingleChild(
            reconcileSingleElement(
              returnFiber,
              currentFirstChild,
              newChild,
              lanes,
            ),
          );
        case REACT_PORTAL_TYPE:
          return placeSingleChild(
            reconcileSinglePortal(
              returnFiber,
              currentFirstChild,
              newChild,
              lanes,
            ),
          );
        case REACT_LAZY_TYPE:
          if (enableLazyElements) {
            const payload = newChild._payload;
            const init = newChild._init;
            // TODO: This function is supposed to be non-recursive.
            return reconcileChildFibers(
              returnFiber,
              currentFirstChild,
              init(payload),
              lanes,
            );
          }
      }
    }

if (isArray(newChild)) {
	 return reconcileChildrenArray(
      returnFiber,
      currentFirstChild,
      newChild,
      lanes,
    );
  }

DIff算法可以分为两种：

单节点对比(reconcileSingleElement)
多节点对比(reconcileChildrenArray)

单节点对比

我们从reconcileSingleElement函数来分析，当虚拟DOM为一个非空对象时，React是如何进行单节点对比的：

function reconcileSingleElement(
  returnFiber: Fiber,
  currentFirstChild: Fiber | null,
  element: ReactElement
): Fiber {
  const key = element.key;
  let child = currentFirstChild;
  
  // 首先判断是否存在对应DOM节点
  while (child !== null) {
    // 上一次更新存在DOM节点，接下来判断是否可复用

    // 首先比较key是否相同
    if (child.key === key) {

      // key相同，接下来比较type是否相同

      switch (child.tag) {
        // ...省略case
        
        default: {
          if (child.elementType === element.type) {
          	// 将该fiber及其兄弟fiber标记为删除
             deleteRemainingChildren(returnFiber, child.sibling);
             // type相同则表示可以复用
             const existing = useFiber(child, element.props);
             // 更新复用节点的ref
             existing.ref = coerceRef(returnFiber, child, element);
             existing.return = returnFiber;
            // 返回复用的fiber
            return existing;
          }
          
          // type不同则跳出switch
          break;
        }
      }
      // 代码执行到这里代表：key相同但是type不同
      // 将该fiber及其兄弟fiber标记为删除
      deleteRemainingChildren(returnFiber, child);
      break;
    } else {
      // key不同，将该fiber标记为删除
      deleteChild(returnFiber, child);
    }
    child = child.sibling;
  }

  // 创建新Fiber，并返回 ...省略
}

从代码中能看出，先判断当前fiber是否有对应的dom节点，如果是新增节点（child === null）, 直接新建 fiber, 没有多余的逻辑。如果是对比更新，如果key不一样则给当前fiber打上delete的标记，继续遍历兄弟节点，key一样type不一样则给当前fiber和其兄弟节点都打上delete标记，key和type都相同(即: ReactElement.key === Fiber.key 且 Fiber.elementType === ReactElement.type), 则复用useFiber，并更新ref，否则新建。

注意: 复用过程是调用useFiber(child, element.props)创建新的fiber对象, 这个新fiber对象.stateNode = currentFirstChild.stateNode, 即stateNode属性得到了复用, 故 DOM 节点得到了复用.因为stateNode保存的就是DOM节点信息.所以常说的复用节点可以简单粗暴的理解为复用stateNode属性

当key相同且type不同时，代表我们已经根据key找到本次更新组件，但是组件发生了更新，不能复用。既key的唯一可能性已经不能复用，则剩下的fiber都没有继续查找的必要，所以都需要标记删除。
当key不同时只代表遍历到的该fiber不能被复用，后面还有兄弟fiber还没有遍历到。所以仅仅标记该fiber删除。

代码流程可以简述为：
在这里插入图片描述

多节点对比

这里我们通过reconcileChildrenArray来分析React中对于多节点是如何进行对比复用的。

// reconcileChildFibers函数中
if (isArray(newChild)) {
      return reconcileChildrenArray(
        returnFiber,
        currentFirstChild,
        newChild,
        lanes,
      );
    }

通过isArray判断是否是数组，如果是则进行多节点Diff对比，会进行两次遍历，

function reconcileChildrenArray(
  returnFiber: Fiber,
  currentFirstChild: Fiber | null,
  newChildren: Array<*>,
  lanes: Lanes,
): Fiber | null {
  let resultingFirstChild: Fiber | null = null;
  let previousNewFiber: Fiber | null = null;

  let oldFiber = currentFirstChild;
  let lastPlacedIndex = 0;
  let newIdx = 0;
  let nextOldFiber = null;
  // 1. 第一次循环: 遍历最长公共序列(key相同), 公共序列的节点都视为可复用
  for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
    // 后文分析
  }

  if (newIdx === newChildren.length) {
    // 如果newChildren序列被遍历完, 那么oldFiber序列中剩余节点都视为删除(打上Deletion标记)
    deleteRemainingChildren(returnFiber, oldFiber);
    return resultingFirstChild;
  }

  if (oldFiber === null) {
    // 如果oldFiber序列被遍历完, 那么newChildren序列中剩余节点都视为新增(打上Placement标记)
    for (; newIdx < newChildren.length; newIdx++) {
      // 后文分析
    }
    return resultingFirstChild;
  }

  // ==================分割线==================
  const existingChildren = mapRemainingChildren(returnFiber, oldFiber);

  // 2. 第二次循环: 遍历剩余非公共序列, 优先复用oldFiber序列中的节点
  for (; newIdx < newChildren.length; newIdx++) {}

  if (shouldTrackSideEffects) {
    // newChildren已经遍历完, 那么oldFiber序列中剩余节点都视为删除(打上Deletion标记)
    existingChildren.forEach((child) => deleteChild(returnFiber, child));
  }

  return resultingFirstChild;
}

所谓的新老节点对比，在这里就是currentFirstChild和newChildren两个序列的对比：

currentFirstChild: 是一个fiber节点, 通过fiber.sibling可以将兄弟节点全部遍历出来. 所以可以将currentFirstChild理解为链表头部, 它代表一个序列, 源码中被记为oldFiber.
newChildren: 是一个数组, 其中包含了若干个ReactElement对象. 所以newChildren也代表一个序列.

所以reconcileChildrenArray实际就是 2 个序列之间的比较(链表oldFiber和数组newChildren), 最后返回合理的fiber序列.
上述代码中, 以注释分割线为界限, 整个核心逻辑分为 2 步骤:

第一次循环: 遍历最长公共序列(key 相同,在updateElement会判断type，都一样才复用，不一样就insert新建), 公共序列的节点都视为可复用
如果newChildren序列被遍历完, 那么oldFiber序列中剩余节点都视为删除(打上Deletion标记)
如果oldFiber序列被遍历完, 那么newChildren序列中剩余节点都视为新增(打上Placement标记)
第二次循环: 遍历剩余非公共序列, 优先复用 oldFiber 序列中的节点，以[key, oldFiber]的形式Map结构存储，方便快速查找复用节点
在对比更新阶段(非初次创建fiber, 此时shouldTrackSideEffects被设置为 true). 第二次循环遍历完成之后, oldFiber序列中没有匹配上的节点都视为删除(打上Deletion标记)

假设有如下图所示 2 个初始化序列:

在这里插入图片描述
接下来第一次循环, 会遍历公共序列A,B, 生成的 fiber 节点fiber(A), fiber(B)可以复用.

最后第二次循环, 会遍历剩余序列E,C,X,Y:

生成的 fiber 节点fiber(E), fiber©可以复用. 其中fiber©节点发生了位移(打上Placement标记).
fiber(X), fiber(Y)是新增(打上Placement标记).
同时oldFiber序列中的fiber(D)节点确定被删除(打上Deletion标记).

整个主干逻辑就介绍完了, 接下来贴上完整源码

第一次循环：

// 1. 第一次循环: 遍历最长公共序列(key相同), 公共序列的节点都视为可复用
for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
  if (oldFiber.index > newIdx) {
    nextOldFiber = oldFiber;
    oldFiber = null;
  } else {
    nextOldFiber = oldFiber.sibling;
  }
  // new槽位和old槽位进行比较, 如果key不同, 返回null
  // key相同, 比较type是否一致. type一致则执行useFiber(update逻辑), type不一致则运行createXXX(insert逻辑)
  const newFiber = updateSlot(
    returnFiber,
    oldFiber,
    newChildren[newIdx],
    lanes,
  );

  if (newFiber === null) {
    // 如果返回null, 表明key不同. 无法满足公共序列条件, 退出循环
    if (oldFiber === null) {
      oldFiber = nextOldFiber;
    }
    break;
  }
  if (shouldTrackSideEffects) {
    // 若是新增节点, 则给老节点打上Deletion标记
    if (oldFiber && newFiber.alternate === null) {
      deleteChild(returnFiber, oldFiber);
    }
  }

  // lastPlacedIndex 记录被移动的节点索引
  // 如果当前节点可复用, 则要判断位置是否移动.
  lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);

  // 更新resultingFirstChild结果序列
  if (previousNewFiber === null) {
    resultingFirstChild = newFiber;
  } else {
    previousNewFiber.sibling = newFiber;
  }
  previousNewFiber = newFiber;
  oldFiber = nextOldFiber;
}

第二次循环：

// 1. 将第一次循环后, oldFiber剩余序列加入到一个map中. 目的是为了第二次循环能顺利的找到可复用节点
const existingChildren = mapRemainingChildren(returnFiber, oldFiber);

// 2. 第二次循环: 遍历剩余非公共序列, 优先复用oldFiber序列中的节点
for (; newIdx < newChildren.length; newIdx++) {
  // [key, oldFiber]形式存储在Map结构中，方便快速查找
  const newFiber = updateFromMap(
    existingChildren,
    returnFiber,
    newIdx,
    newChildren[newIdx],
    lanes,
  );
  if (newFiber !== null) {
    if (shouldTrackSideEffects) {
      if (newFiber.alternate !== null) {
        // 如果newFiber是通过复用创建的, 则清理map中对应的老节点
        existingChildren.delete(newFiber.key === null ? newIdx : newFiber.key);
      }
    }
    lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
    // 更新resultingFirstChild结果序列
    if (previousNewFiber === null) {
      resultingFirstChild = newFiber;
    } else {
      previousNewFiber.sibling = newFiber;
    }
    previousNewFiber = newFiber;
  }
}
// 3. 善后工作, 第二次循环完成之后, existingChildren中剩余的fiber节点就是将要被删除的节点, 打上Deletion标记
if (shouldTrackSideEffects) {
  existingChildren.forEach((child) => deleteChild(returnFiber, child));
}

所以无论是单节点还是多节点、可迭代节点的比较, 最终的目的都是生成下级子节点. 并在reconcileChildren过程中, 给一些有副作用的节点(新增, 删除, 移动位置等)打上副作用标记, 等待 commit 阶段(Renderer)的处理.

总的来说，在调和函数(reconcileChildren)中主要是将输入的reactElement序列(JSX编译而来)和旧的oldFibers(当前页面显示的fiber树)两个序列进行对比，然后输出最小改变的fiber树，主要流程如下：

第一次循环：以reactElement从左到右依次遍历公共序列(根据key来判断),在公共子序列中key、type都一样就复用，不一样就新创建并删除相关节点
先判断两个序列是否有遍历完成的，进行flag标记。都没有的话，将后面的非公共序列通过map(以{key: fiber})的结构保存，方便第二次循环查找复用
第二次循环：以reactElement遍历，然后通过key在第二部的map数据结构中查找，如果找到就进一步判断能否复用，否则就新建
如果reactElement遍历完成之后，oldFibers未遍历完，则将oldFibers中所有元素都打上Deletion标记等待删除

为什么不推荐使用下标作为Key？

通过上面的介绍我们应该了解了在React中是如何实现Diff算法的，而且在其中Key是至关重要的存在。因为新队列newChildren中的每一个对象(即reactElement对象)都需要同旧队列oldFiber中有相同key值的对象(即oldFiber对象)进行是否可复用的比较. key就是新旧对象能够对应起来的唯一标识。但是有时候在实际开发中并不能很好的设置一个合适的key，或者为了简单省事就用下标index作为Key，但是这种方式是不推荐的，主要是因为以下原因：

如果省略key或者直接使用列表index作为key, 表现是一样的(key=null时, 会采用index代替key进行比较). 在新旧对象比较时, 只能按照index顺序进行比较, 复用的成功率大大降低, 大列表会出现性能问题.
- 例如一个排序的场景: oldFiber队列有 100 个, newChildren队列有 100 个(但是打乱了顺序). 由于没有设置key, 就会导致newChildren中的第 n 个必然要和oldFiber队列中的第 n 个进行比较, 这时它们的key完全一致(都是null), 由于顺序变了导致props不同, 所以新的fiber完全要走更新逻辑(理论上比新创建一个的性能还要耗).
同样是排序场景可以出现的 bug: 上面的场景只是性能差(又不是不能用), key使用不当还会造成bug
- 还是上述排序场景, 只是列表中的每一个item内部又是一个组件, 且其中某一个item使用了局部状态(比如class组件里面的state). 当第二次render时, fiber对象不会delete只会update导致新组件的state还沿用了上一次相同位置的旧组件的state, 造成了状态混乱.

总结就是不设置key或者设置为index会有性能问题还可能导致组件状态混乱。

时间复杂度

Diff 算法并非 React 独创，React 只是在传统 Diff 算法做了优化，将 diff 算法的时间复杂度一下子从传统递归O(n^3)降到两次循环O(n)，其中n是树中元素数量。为了降低算法复杂度，React中对Diff算法做了以下优化：

传统Diff算法是使用递归的方式进行节点的对比，时间复杂度是O(n^2)，在此同时还需要对DOM进行操作的话就是额外的O(n),所以总的消耗就是O(n3)三次方，在Reac中使用了两次循环(下面会介绍)将时间复杂度优化到了O(n)

1、同级对比
只对同级元素进行Diff。如果一个DOM节点在前后两次更新中跨越了层级，那么React不会尝试复用他，即对相同层级的虚拟DOM 节点进行比较，同一个父节点下的所有子节点。当发现节点已经不存在时，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。
在这里插入图片描述
如果DOM节点前后更新跨越了层级，React则不会复用，直接新建节点并删除原来节点：