react diff算法源码解析

  // 单节点比较
  function reconcileSingleElement(
    returnFiber: Fiber,
    currentFirstChild: Fiber | null,
    element: ReactElement,
    lanes: Lanes,
  ): Fiber {
    // 当前新的reactElement的key
    const key = element.key;
    // 当前的child fiber节点
    let child = currentFirstChild;
    while (child !== null) {
      // key相同的情况才diff
      if (child.key === key) {
        switch (child.tag) {
          // ...
          default: {
            // 当前fiber和reactElement的type相同时
            if (child.elementType === element.type) {
              // 删除同级的其他节点
              deleteRemainingChildren(returnFiber, child.sibling);
              // 复用当前child fiber
              const existing = useFiber(child, element.props);
              existing.ref = coerceRef(returnFiber, child, element);
              existing.return = returnFiber;
              // 返回可复用的child fiber
              return existing;
            }
            break;
          }
        }
        // 不匹配删除节点
        deleteRemainingChildren(returnFiber, child);
        break;
      } else {
        // key不同直接删除节点
        deleteChild(returnFiber, child);
      }
      child = child.sibling;
    }

    // 新的Fiber节点
    const created = createFiberFromElement(element, returnFiber.mode, lanes);
    created.ref = coerceRef(returnFiber, currentFirstChild, element);
    created.return = returnFiber;
    return created;
  }

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

if (getIteratorFn(newChild)) {
  return reconcileChildrenIterator(
    returnFiber,
    currentFirstChild,
    newChild,
    lanes,
  );
}

// 旧节点
<li key="0"/>
<li key="1"/>
<li key="2"/>
// 新节点
<li key="0"/>
<li key="1"/>
<li key="5"/>

// key="5"不同，跳出遍历
// 第一轮遍历的节点
<li key="0"/>
<li key="1"/>
// <li key="2"/>和<li key="5"/>留在第二轮遍历比较。

// 旧节点
<li key="0"/>
<li key="1"/>
<li key="2"/>
// 新节点
<li key="0"/>
<li key="2"/>
<li key="1"/>

// 第二轮遍历对比<li key="2"/>、<li key="1"/>这两个节点

  function reconcileChildrenArray(
    returnFiber: Fiber,
    currentFirstChild: Fiber | null,
    newChildren: Array<*>,
    lanes: Lanes,
  ): Fiber | null {
    // 函数返回的Fiber节点
    let resultingFirstChild: Fiber | null = null;
    let previousNewFiber: Fiber | null = null;

    // oldFiber为链表
    let oldFiber = currentFirstChild;
    // 用来判断节点是否移动
    let lastPlacedIndex = 0;
    let newIdx = 0;
    let nextOldFiber = null;
    // 第一轮遍历，只遍历key相同的节点
    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
      if (oldFiber.index > newIdx) {
        nextOldFiber = oldFiber;
        oldFiber = null;
      } else {
        // 每次循环旧的fiber节点都会指向兄弟元素也就是下次循环的fiber节点
        nextOldFiber = oldFiber.sibling;
      }
      // key相同返回fiber节点，key不同返回null
      // 如果type相同复用节点，不同返回新节点
      const newFiber = updateSlot(
        returnFiber,
        oldFiber,
        newChildren[newIdx],
        lanes,
      );
      // newFiber为null表示key不同，跳出循环
      if (newFiber === null) {
        if (oldFiber === null) {
          oldFiber = nextOldFiber;
        }
        break;
      }
      // newFiber.alternate为null就是新节点，说明type不同创建了新fiber节点
      if (oldFiber && newFiber.alternate === null) {
        // 需要把oldFiber标记删除
        deleteChild(returnFiber, oldFiber);
      }
      // 放置节点,更新lastPlacedIndex
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      // 组成新fiber节点链
      if (previousNewFiber === null) {
        resultingFirstChild = newFiber;
      } else {
        previousNewFiber.sibling = newFiber;
      }
      previousNewFiber = newFiber;
      oldFiber = nextOldFiber;
    }

    /*
    第一轮遍历完后新节点数量少于旧节点数量
    newChildren已经遍历完，删除掉剩下的fiber节点，可能情况如下 ⬇️
    以前
    <li key="0"/>
    <li key="1"/>
    <li key="2"/>
    新的
    <li key="0"/>
    <li key="1"/>
    就会把<li key="2"/>删除
     */
    if (newIdx === newChildren.length) {
      deleteRemainingChildren(returnFiber, oldFiber);
      return resultingFirstChild;
    }

    /*
    第一轮遍历完新节点数量大于旧节点数量
    oldFiber已经遍历完，可能情况如下 ⬇️
    以前
    <li key="0"/>
    <li key="1"/>
    新的
    <li key="0"/>
    <li key="1"/>
    <li key="2"/>
    就会添加新的<li key="2"/>，这一段是新节点的插入逻辑
     */
    if (oldFiber === null) {
      for (; newIdx < newChildren.length; newIdx++) {
        const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
        if (newFiber === null) {
          continue;
        }
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        // 组成新fiber节点链
        if (previousNewFiber === null) {
          resultingFirstChild = newFiber;
        } else {
          previousNewFiber.sibling = newFiber;
        }
        previousNewFiber = newFiber;
      }
      return resultingFirstChild;
    }
      
    // ---------------------------------------------------------------------

    // 用剩余的oldFiber创建一个key->fiber节点的Map，方便用key来获取对应的旧fiber节点
    const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
    
    // 第二轮遍历，继续遍历剩余的节点，这些节点可能是需要移动或者删除的
    for (; newIdx < newChildren.length; newIdx++) {
      // 从map中获取对应对应key的旧节点，返回更新后的新节点
      const newFiber = updateFromMap(
        existingChildren,
        returnFiber,
        newIdx,
        newChildren[newIdx],
        lanes,
      );
      if (newFiber !== null) {
        // 复用的新节点，从map里删除老的节点，对应的情况可能是位置的改变
        if (newFiber.alternate !== null) {
          // 复用的节点要移除map，因为map里剩余的节点都会被标记Deletion删除
          existingChildren.delete(
            newFiber.key === null ? newIdx : newFiber.key,
          );
        }
        // 放置节点同时节点判断是否移动
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        if (previousNewFiber === null) {
          resultingFirstChild = newFiber;
        } else {
          previousNewFiber.sibling = newFiber;
        }
        previousNewFiber = newFiber;
      }
    }

    // 删除剩下的无用节点
    existingChildren.forEach(child => deleteChild(returnFiber, child));

    return resultingFirstChild;
  }

function placeChild(
  newFiber: Fiber,
  lastPlacedIndex: number,
  newIndex: number,
): number {
  newFiber.index = newIndex;
  const current = newFiber.alternate;
  if (current !== null) {
    const oldIndex = current.index;
    if (oldIndex < lastPlacedIndex) {
 			// 节点移动
      newFiber.flags = Placement;
      return lastPlacedIndex;
    } else {
      // 节点位置无变化
      return oldIndex;
    }
  } else {
    // 插入的新节点
    newFiber.flags = Placement;
    return lastPlacedIndex;
  }
}

// 旧
abcd
// 新
acbd

// 旧
bcd
// 新
cbd

c => 在旧节点中存在，可复用，它的index在旧节点中为2，2 > lastPlacedIndex(0)，不需要移动,将lastPlacedIndex赋值为2。
b => 在旧节点中存在，可复用，它的index在旧节点中为1，1 < lastPlacedIndex(2)，需要移动，标记Placement。
d => 在旧节点中存在，可复用，它的index在旧节点中为3，3 > lastPlacedIndex(2)，不需要移动。