带你彻底读懂React VDOM DIFF

带你彻底读懂React VDOM DIFF,什么叫彻底,就是原理+源码+手写。

VDOM

在React官网中,对VDOM的描述如下:

image.png

狭义一点来说,VDOM在数据形式上就是个js对象,一个描述了DOM节点的js对象。但是我们最终需要的是能够呈现在页面上的DOM,因此最终我们还需要根据VDOM来同步DOM。问题来了,同步DOM?DOM可是用户直观看到的东西,如果大动作更新DOM,那用户的看到的页面可能会延迟更新甚至出现闪烁状态,会造成用户体验极差。那怎么优化呢?

我们可不可以通过计算从而以最低成本来更新DOM页面,可以!其实这个计算的过程就是所谓的VDOM DIFF,也是协调的核心。

VDOM DIFF

React和Vue中都用到了VDOM,但是因为结构不同,因此都有自己的DIFF实现方式,但其实背后大同小异。今天我们先单独来说说React VDOM DIFF。

fiber

了解React VDOM DIFF,首先要清楚React中的VDOM的实现形式是fiber,一个链表,这是和Vue VDOM数据结构上最大的不同,也是造成React和Vue的VDOM DIFF算法不同的一个重要原因。

下图是fiber的结构图: image.png

因为fiber就是VDOM的实现形式,因此从数据形式上来说,fiber就是个对象,源码中的fiber属性较多,下面是我简化之后定义的创建fiber的函数:

export function createFiber(vnode, returnFiber) {
  const fiber = {
    // 数据类型,原生标签的type是字符串,函数组件的type则是函数 
    type: vnode.type,
    // 定义数据唯一性的字符串key
    key: vnode.key,
    props: vnode.props,
    // 原生标签 DOM
    // class组件 实例
    stateNode: null,

    // 第一个子fiber
    child: null,
    // 下一个兄弟fiber
    sibling: null,
    return: returnFiber,

    // 标记fiber任务类型,节点插入、更新、删除
    flags: Placement,

    index: null,

    // old fiber
    alternate: null,
  };

  // 判断tag,判断fiber任务节点类型
  const { type } = vnode;
  if (isStr(type)) {
    // 原生标签
    fiber.tag = HostComponent;
  } else if (isFn(type)) {
    // 函数组件、类组件
    fiber.tag = type.prototype.isReactComponent
      ? ClassComponent
      : FunctionComponent;
  } else if (isUndefined(type)) {
    fiber.tag = HostText;
    fiber.props = { children: vnode };
  } else {
    fiber.tag = Fragment;
  }

  return fiber;
}

复制代码

节点类型

React中存在多种组件类型,如函数组件、类组件、原生标签、文本节点等等,不同组件的主要的差异性在于组件本身的处理,如函数组件要执行函数本身,类组件是执行实例的render函数(初次渲染还要先创建实例),但是这些组件都有个共同的特点,就是协调的时候先协调自己,然后再协调子组件。

协调节点本身

这个很简单,就是判断节点是否可以复用,在React中,节点复用必须同时满足三大条件:1. 同一层级 2. 组件类型相同 3. key相同。

首先说同一层级下,如下图所示,上面的G节点和下面的G节点就不能复用,因为层级不同。当然如果你非要复用,那么找G节点就需要遍历整棵树,而实际项目中,跨层级变更节点的场景实在太少,因此跨层级复用节点实在不划算。

image-20191022194524132

再说类型,实际项目中很少出现组件类型都变了,但是组件还是同一个的场景,如果还要再继续往下遍历,成本太高,覆盖场景太多,这个买卖不划算,因此不做考虑~

最后来说key,key是一个字符串,相当于组件在当前层级下的唯一id,因为同一层级下,组件类型也经常相同,那这个时候再区分节点,就需要一个唯一的key了。好了,顺便我们解决一道面试题了,key是用于判断是否可以复用新老VDOM节点的,那这个值必须得唯一且稳定的,如果你的key变来变去的,比如用Date.now()定义,那怎么复用节点呢。

协调子节点

React中的协调子节点包括节点的初次渲染以及更新,但是其实背后执行的函数式同一个,都是ChildReconciler,只是传参不同:

export const reconcileChildFibers = ChildReconciler(true);
export const mountChildFibers = ChildReconciler(false);
复制代码

ChildReconciler是一个wrapper function,核心函数是这个wrapper function返回的reconcileChildFibers,reconcileChildFibers做的事情就是判断新节点newChild的类型,再决定如何协调。

协调过程参见下面源码片段中的4条规则,其中单个子节点非常好理解,因为没有位置移动方面考虑,直接比较类型即可,文本也很好懂,直接替换即可。难点在于2.2与2.3,如果newChild是数组,那么我们需要考虑节点的位置变化,这个很麻烦,接下来我们重点说newChild为数组的情况。2.3是newChild为迭代函数的情况,和2.2算法是一样的,我们接下来只说2.2。

function ChildReconciler(shouldTrackSideEffects) {
  //前面源码片段很长,此处省略一万字...
 
  // 执行协调子节点的函数
  function reconcileChildFibers(
    returnFiber: Fiber, // 父fiber
    currentFirstChild: Fiber | null, // 老的子fiber,初次渲染为null
    newChild: any, // 新子节点
    lanes: Lanes,
  ): Fiber | null {
   
    const isUnkeyedTopLevelFragment =
      typeof newChild === 'object' &&
      newChild !== null &&
      newChild.type === REACT_FRAGMENT_TYPE &&
      newChild.key === null;
    if (isUnkeyedTopLevelFragment) {
      // 1. 如果是没有的key的Fragment,则本层忽略,直接下一层
      // 因为Fragment最多只有一个key属性,如果连这个都没有,那没法判断是否复用,用户本意就是当个假父级,因此不需要进入diff
      newChild = newChild.props.children;
    }

    // 2. 如果newChild是对象
    if (typeof newChild === 'object' && newChild !== null) {
      // 2.1 单个节点:子节点或者是传送门或者是lazy组件,1比1对比即可
      switch (newChild.$$typeof) {
        case REACT_ELEMENT_TYPE:
          // 单个子节点,1比1对比即可
          return placeSingleChild(
            reconcileSingleElement(
              returnFiber,
              currentFirstChild,
              newChild,
              lanes,
            ),
          );
        case REACT_PORTAL_TYPE:
          // 传送门,1比1对比即可
          return placeSingleChild(
            reconcileSinglePortal(
              returnFiber,
              currentFirstChild,
              newChild,
              lanes,
            ),
          );
        case REACT_LAZY_TYPE:
          // lazy组件,1比1对比即可
          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)) {
        // 2.2. 如果是数组,麻烦大了,因为要考虑节点位置的变化,具体我后面详细说
        return reconcileChildrenArray(
          returnFiber,
          currentFirstChild,
          newChild,
          lanes,
        );
      }
    
      // 2.3. 迭代器函数,算法同reconcileChildrenArray
      if (getIteratorFn(newChild)) {
        return reconcileChildrenIterator(
          returnFiber,
          currentFirstChild,
          newChild,
          lanes,
        );
      }
       
      // 2.4 不是以上类型,抛出异常
      throwOnInvalidObjectType(returnFiber, newChild);
    }

    if (
      (typeof newChild === 'string' && newChild !== '') ||
      typeof newChild === 'number'
    ) {
      // 3. 文本节点,直接替换
      return placeSingleChild(
        reconcileSingleTextNode(
          returnFiber,
          currentFirstChild,
          '' + newChild,
          lanes,
        ),
      );
    }

    // Remaining cases are all treated as empty.
    // 4. 新节点不满足以上条件,则把剩下的老节点全部删除
    return deleteRemainingChildren(returnFiber, currentFirstChild);
  }

  return reconcileChildFibers;
}
复制代码

当新子节点是数组

当新子节点为数组的时候,我们调用的是reconcileChildrenArray这个函数.

注意:组件的初次渲染与更新,调用的都是下面这个函数!还记得ChildReconciler这个函数吧,这个函数接受true代表组件更新,接收false代表组件初次渲染,在下面的函数内部,这个true或者false是通过shouldTrackSideEffects标记的~

接下来下面的代码我写出了非常详细的注释,来看一下吧~

    function reconcileChildrenArray(
    returnFiber: Fiber, // 父fiber
    currentFirstChild: Fiber | null, // 老的第一个子fiber
    newChildren: Array<*>, // 新子节点数组
    lanes: Lanes,
  ): Fiber | null {

    // 本函数要做的事情就是diff新老vdom,在尽可能多的复用老vdom的情况下生成新的vdom,即fiber结构,并返回新的第一个子fiber,
    // 这个新的子fiber就是resultingFirstChild
    let resultingFirstChild: Fiber | null = null;
    // 记录上一个newFiber
    // 因为fiber.sibling是指向下一个fiber,但是在构建过程中下一个fiber得到下一轮才能构建完成,因此要完成fiber与sibling的关系,
    // 就要把上一轮的fiber记录下来,通过previousNewFiber.sibling来完成fiber与sibling的关联~
    let previousNewFiber: Fiber | null = null;

    // 老的第一个子fiber
    let oldFiber = currentFirstChild;
    // 记录上次插入节点的位置,以此判断节点是否需要移动
    let lastPlacedIndex = 0;
    // newChildren是数组,newIdx就是遍历数组用的下标
    let newIdx = 0;
    // 记录下一个oldFiber的值
    let nextOldFiber = null;

     //! step 1: 新老VDOM都是从左边开始遍历,按位比较,如果节点可以复用,那么都往后移一位,否则中止本轮循环
    // 注意下面这个for,只有oldFiber不是null才可以进入,因此初次渲染是跳过这个for的
    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
       // oldFiber的下标大于新的,本轮循环中止
      if (oldFiber.index > newIdx) {
        nextOldFiber = oldFiber;
        oldFiber = null;
      } else {
        // 记录下一个oldFiber
        nextOldFiber = oldFiber.sibling;
      }
       // updateSlot会比较oldFiber与newChildren[newIdx]的key,相等的话初步复用,不相等返回null
      const newFiber = updateSlot(
        returnFiber,
        oldFiber,
        newChildren[newIdx],
        lanes,
      );
      if (newFiber === null) {
        // 不能复用
        if (oldFiber === null) {
          // 如果oldFiber是null,本轮oldFiber没法用,用下一个试试
          oldFiber = nextOldFiber;
        }
        // 还记得刚进来本for的规则么,按照位置比较,不能复用则中止本for
        break;
      }
      if (shouldTrackSideEffects) {
        // 更新阶段,但是没有
        if (oldFiber && newFiber.alternate === null) {
          // oo. 匹配得到的newFiber没有alternate,还是没法复用
          deleteChild(returnFiber, oldFiber);
        }
      }
      // 把newFiber插入到链表中,更新位置,同时根据上次的插入位置,判断newFiber是否需要移动位置
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      if (previousNewFiber === null) {
        // previousNewFiber记录上个fiber,如果previousNewFiber为空,证明是头结点,则赋值给resultingFirstChild即可。
        resultingFirstChild = newFiber;
      } else {
        // 上个fiber的sibling是本次的fiber
        previousNewFiber.sibling = newFiber;
      }
      // 更新previousNewFiber,毕竟本次的fiber是下轮循环的上个fiber了
      previousNewFiber = newFiber;
      // 更新oldFiber
      oldFiber = nextOldFiber;
    }

    //! step2: 如果newIdx === newChildren.length,证明经过上轮for,新节点已经遍历完了,那么如果还有剩下的老节点,删除即可
    if (newIdx === newChildren.length) {
      // We've reached the end of the new children. We can delete the rest.
      deleteRemainingChildren(returnFiber, oldFiber);
      if (getIsHydrating()) {
        const numberOfForks = newIdx;
        pushTreeFork(returnFiber, numberOfForks);
      }
      return resultingFirstChild;
    }

    //! step3: 如果老节点没了,新节点还有,那么新节点逐个新增即可。初次渲染走的就是这里
    // 如果满足本条件,那么后面step4和step5都不用经历了,毕竟没有老节点了,没什么好比较的了
    if (oldFiber === null) {
      // If we don't have any more existing children we can choose a fast path
      // since the rest will all be insertions.
      for (; newIdx < newChildren.length; newIdx++) {
        const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
        if (newFiber === null) {
          continue;
        }
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        if (previousNewFiber === null) {
          // TODO: Move out of the loop. This only happens for the first run.
          resultingFirstChild = newFiber;
        } else {
          previousNewFiber.sibling = newFiber;
        }
        previousNewFiber = newFiber;
      }
      if (getIsHydrating()) {
        const numberOfForks = newIdx;
        pushTreeFork(returnFiber, numberOfForks);
      }
      return resultingFirstChild;
    }

    //! step4: 走到现在,新老节点都还有,最麻烦的地方来了,也是React Diff的核心
    // 经过上面的步骤,走到这里的新老vdom都是乱序的,因此接下来遍历新的vdom的时候,需要考虑的事情是如何去老fiber链表里找某个key对应的节点
    // 因为老的fiber链表是单链表,所以如果通过循环的方式去遍历是比较慢的,总不能每次找节点都遍历一次链表吧
    // 可以把老fiber链表生成一个字典,方便接下来的快速查找以及删除字典中节点的操作(关于删除,等下举例子)
    // 生成字典的话,我们可以选择Object或者Map,但是考虑到效率,此处React选择的是Map,背后深究的话可以比较下Object与Map,Map的背后是哈希表,在多节点增删改查的场景下,效率会更高
    // Add all children to a key map for quick lookups.
    const existingChildren = mapRemainingChildren(returnFiber, oldFiber);

    // Keep scanning and use the map to restore deleted items as moves.
    /** 
     * 如果下面这段解释你能看明白,那接下来的代码就很清楚了
    举例:接下来新老vdom的情况:
    old: a b c
    new: b c
    old已经是map了,因此接下来可以遍历new,比如找到b和c,那么这个时候我们就知道a要被删除,问题是怎么记录下来要删除的节点呢?
    其实这个时候我们可以这样,通过遍历new,去old中找new有的节点,比如找到b复用之后,再把b从old的map中删除,c也是同样操作。
    这样的话,遍历完new之后,old的map里只剩下了a,这个时候我们再把这个map剩余的节点全部删除就行了。
    */
  
    // 
    // 代码实现:
    for (; newIdx < newChildren.length; newIdx++) {
      // 去map里找能复用的节点
      const newFiber = updateFromMap(
        existingChildren,
        returnFiber,
        newIdx,
        newChildren[newIdx],
        lanes,
      );
      if (newFiber !== null) {
       // 找到了,删掉map中的节点
        if (shouldTrackSideEffects) {
          if (newFiber.alternate !== null) {
            existingChildren.delete(
              newFiber.key === null ? newIdx : newFiber.key,
            );
          }
        }
        // 后面是构建fiber的过程,与前面的一样,不再多余解释了
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        if (previousNewFiber === null) {
          resultingFirstChild = newFiber;
        } else {
          previousNewFiber.sibling = newFiber;
        }
        previousNewFiber = newFiber;
      }
    }

    //! step5: 经历过step4之后,发现老节点中还有没被复用的,全部删除即可
    if (shouldTrackSideEffects) {
      existingChildren.forEach(child => deleteChild(returnFiber, child));
    }

    if (getIsHydrating()) {
      const numberOfForks = newIdx;
      pushTreeFork(returnFiber, numberOfForks);
    }
    return resultingFirstChild;
  }
复制代码

经过上面的源码阅读,我们来总结一下:

首先明确下数据结构: 新vdom是数组,即newChildren;老vdom是fiber单链表,即oldFiber。

  1. 新老VDOM都是从左边开始遍历的,按位置比较,即第i个老vdom和第i个新vdom比较,如果节点可以复用,那么先复用,然后新老vdom都往后移一位,否则就中止本轮循环。
  2. 如果经过step1,新节点已经遍历完了,那么如果还有剩下的老节点,删除即可。
  3. 如果经过step1,老节点没了,新节点还有,那么新节点逐个新增即可。初次渲染走的就是这里。
  4. 走到现在,新老节点都还有,但是是乱序的。因此可以把oldFiber单链表做成Map,即existingChildren,接下来遍历newChildren,找到能复用的fiber,就复用并且从existingChildren删除这个fiber。
  5. 经历过step4之后,发现老节点existingChildren中还有没被复用的,全部删除即可。

对比React 与Vue的 VDOM DIFF

这个问题太常见了,我就遇到了八百次了。回到这个问题的时候,其实重点就在于新子节点是数组的时候,因为单个节点的处理方式都一样,但是如果新子节点是数组,React和Vue的处理是有些许不同的。

首先,根本上在于数据结构的不同,因为Vue的多个新子节点时候,老子节点就是数组,而React中则是单链表。而数组是可以双向查找的,但是单链表却不可以,这就造成了第一个区别,就是Vue中都是从双向按照位置查找节点复用,但是React却只能从左边按照位置查找复用。

其次,React与Vue中为了节点的方便查找,都用到了Map这个结构,只是React是通过老子节点创建了一个Map,而Vue则是通过新子节点创建了Map。

最后,React中的遍历更循规蹈矩一些,而Vue中则通过最长递增子序列计算出了最小次数的节点移动路径。

以下是我画出的关于React与Vue的VDOM DIFF的思维导图:

image.png

image.png

思维导图地址查看:www.processon.com/view/link/6… www.processon.com/view/link/6…

总结

今天我们说完了React VDOM DIFF,也总结了下Vue VDOM DIFF,当然Vue的VDOM DIFF的因为要记寻找最小递增子序列,过程稍微复杂,我们下次再来介绍。如果你想看VDOM DIFF实现代码的话,React可以看这里github.com/bubucuo/min… ,Vue的可以看这里github.com/bubucuo/vdo…

Guess you like

Origin juejin.im/post/7053001279580143653