基于 Fiber 的 React Diff 算法源码分析

funtion App() {  return (    <div>      <span>贝壳</span>      <span>大前端</span>    </div>  )}

// 更新前<div>  <p key="id1">节点1</p>  <span key="id2">节点2</span></div>// 更新后<div>  <span key="id2">节点2</span>  <p key="id1">节点1</p></div>

function reconcileChildFibers(  returnFiber: Fiber,  currentFirstChild: Fiber | null,  newChild: any,): Fiber | null {  const isObject = typeof newChild === 'object' && newChild !== null;  if (isObject) {      // object类型，可能是 REACT_ELEMENT_TYPE 或 REACT_PORTAL_TYPE      switch (newChild.$typeof) {          case REACT_ELEMENT_TYPE:          // 调用 reconcileSingleElement 处理          // ...其他case      }  }  if (typeof newChild === 'string' || typeof newChild === 'number')   {      // 调用 reconcileSingleTextNode 处理  }  if (isArray(newChild)) {      // 调用 reconcileChildrenArray 处理  }  // 以上都没有命中，删除节点  return deleteRemainingChildren(returnFiber, currentFirstChild);}

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) {              // type相同则表示可以复用              // 返回复用的fiber              return existing;          }          // type不同则跳出switch          break;          }      }      // 不能复用的节点，被标记为删除      deleteRemainingChildren(returnFiber, child);      break;      } else {          // key不同，将该fiber标记为删除          deleteChild(returnFiber, child);      }      child = child.sibling;  }  // 创建新Fiber，并返回 ...省略} 

//更新前<div>  <span key="id1" className="before"></span>  <span key="id2"></span></div>// 节点属性变化 className 由before 变成了after<div>  <span key="id1" className="after"></span>  <span key="id2"></span></div>// 节点类型变化 第二个子元素由span 变成了div<div>  <span key="id1" className="before"></span>  <div key="id2"></div><div>

//情况2 节点新增 或减少 更新之前<div>   <span key="id1"></span>  <span key="id2"></span></div>
// 新增节点<div>  <span key="id1"></span>  <span kye="id2"></span>  <span key="id3"></span></div>
//删除节点<div>  <span key="id1"></span></div>

// 情况3 节点位置变化  更新之前<div>  <span key="id1"></span>  <span key="id2"></span></div>
// 更新之后 位置发生了变化<div>  <span key="id2"></span>  <span key="id1"></span></div>

// 更新之前<div key="id1" className="a">1</div> <div key="id2" className="b">2</div>
// 更新之后情况1 newChildren与oldFiber都遍历完<div key="id1" className="aa">1</div><div key="id2" className="bb">2</div> 
// 更新之后情况2 newChildren没遍历完，oldFiber遍历完<div key="id1" className="aa">1</div><div key="id2" className="bb">2</div><div key="id3" className="cc">3</div>
// 更新之后情况3 newChildren遍历完，oldFiber没遍历完<div key="id1" className="aa">1</div>

//更新之前<div key="id1">1</div><div key="id2">2</div><div key="id3">3</div>
//更新之后<div key="id1">1</div><div key="id3">3</div><div key="id2">2</div>

  const existingChildren = mapRemainingChildren(returnFiber,oldFiber)

function reconcileChildrenArray(    returnFiber: Fiber,  //父节点    currentFirstChild: Fiber | null,  //current Fiber 节点    newChildren: Array<*>,  //JSX对象    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相同的节点，key不同即跳出遍历for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {    if (oldFiber.index > newIdx) {        nextOldFiber = oldFiber;        oldFiber = null;    } else {        // 下次循环的旧Fiber节点：当前 oldFiber的兄弟节点        nextOldFiber = oldFiber.sibling;    }    // key相同返回fiber节点，key不同返回null    // 如果type相同复用节点，不同则确定该节点将会被删除，然后返回新节点，将oldFiber删除    const newFiber = updateSlot(  // 返回newFiber节点        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链接到Fiber树    if (previousNewFiber === null) {        resultingFirstChild = newFiber;    } else {        previousNewFiber.sibling = newFiber;    }    previousNewFiber = newFiber;    //nextOldFiber节点为下一个循环的oldFiber节点    oldFiber = nextOldFiber;}// 第一轮遍历结束

// 处理第一轮遍历结果// 若第一轮遍历完后新节点数量少于旧节点数量// newChildren已经遍历完，将删除掉剩下的fiber节点if(newIdx === newChildren.length) {    deleteRemainingChildren(returnFiber, oldFiber);    return resultingFirstChild;}
// 若第一轮遍历完新节点数量大于旧节点数量// oldFiber已经遍历完,无节点可以复用，则创建新的节点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链接到Fiber树        if (previousNewFiber === null) {            resultingFirstChild = newFiber;        } else {            previousNewFiber.sibling = newFiber;        }        previousNewFiber = newFiber;    }    return resultingFirstChild;}// 处理第一轮遍历结果完成

// 进行第二轮遍历// 还未处理的oldFiber存入以key为key，oldFiber为value的Map中，方便用key来获取对应的旧fiber节点const existingChildren = mapRemainingChildren(returnFiber, oldFiber);// 进入第二轮遍历，继续遍历剩余的newChildren节点，这些节点可能是需要移动或者删除的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);        // 将新fiber链接到Fiber树        if (previousNewFiber === null) {            resultingFirstChild = newFiber;        } else {            previousNewFiber.sibling = newFiber;        }        previousNewFiber = newFiber;    }
}// 结束第二轮遍历
// 删除剩下的无用节点，并标记Deletion删除existingChildren.forEach(child => deleteChild(returnFiber, child));return resultingFirstChild;