react diff过程分析

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;
        }
      }
      // 代码执行到这里代表：key相同但是type不同
      // 将该fiber及其兄弟fiber标记为删除
      deleteRemainingChildren(returnFiber, child);
      break;
    } else {
      // key不同，将该fiber标记为删除
      deleteChild(returnFiber, child);
    }
    child = child.sibling;
  }

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

<!--当前页面-->
<ul>
  <li>1</li>
  <li>2</li>
  <p>3</p>
</ul>

<!--更新后的页面-->
<ul>
  <p>1</p>
</ul>

<!--当前页面-->
<ul>
  <li key="li-1">1</li>
  <li key="li-2">2</li>
  <p key="p-1">3</p>
</ul>

<!--更新后的页面-->
<ul>
  <p key="p-1">1</p>
</ul>

<li key="0">0</li>

<li key="1">1</li>

<li key="2">0</li>

<li key="1">1</li>

<div key="0">0</div>

<li key="1">1</li>

<li key="0">0</li>

<li key="1">1</li>

<li key="0">0</li>

<li key="1">1</li>

<li key="1">2</li>

<li key="0">0</li>

<li key="0">0</li>

<li key="1">1</li>

<li key="1">1</li>

<li key="0">0</li>

// 第一轮遍历开始之前
var lastPlacedIndex = 0; // 在第二轮遍历会用到

// 遍历newChildren（oldFiber === null：旧节点遍历光了，会跳出循环）
for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
    ...

    // 和对应的oldFiber作比较（能不能复用）
  var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], lanes);
    ...
  if (newFiber === null) {
      ...
    /**
     * key不同导致的不能复用，直接跳出循环;
     * key相同type不同导致的不可复用会将oldFiber标记为DELETION，并继续遍历
    * */
    break;
  }
    ...
  lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx); // 更新lastPlacedIndex
  oldFiber = nextOldFiber;  //更新oldFiber
}

const oldList = ["a", "b", "c", "d"];
const newList = ["a", "d", "c", "b"];

// 我们需要做的工作其实是将oldList的顺序变成和newList一样，这样就能是实现节点的复用

// 我们首先定义一个lastPlacedIndex，它代表了在oldList中第一个可被复用的节点的index
// 它会在第一次循环中被定义且赋初值为0，这里我们就假设第一轮遍历中没有找到可复用的节点，所以它的值依然为0

let lastPlacedIndex = 0;

// 循环newList

----第一次循环开始----
    节点a在oldList中的index是0,0是>=lastPlacedIndex的,所以更新lastPlacedIndex=index,节点不需要移动
    此时：
    lastPlacedIndex:0
    oldList:["a", "b", "c", "d"]
----第一次循环结束----

----第二次循环开始----
    节点d在oldList中的index是3,3是>=lastPlacedIndex的,所以更新lastPlacedIndex=index,节点不需要移动
    此时:
    lastPlacedIndex:3
    oldList:["a", "b", "c", "d"]
----第二次循环结束----

----第三次循环开始----
    节点c在oldList中的index是2,2是<lastPlacedIndex的,所以不更新lastPlacedIndex,节点移动到lastPlacedIndex的位置
    此时:
    lastPlacedIndex:3
    oldList:["a", "b","d","c"]
----第三次循环结束----

----第四次循环开始----
    节点b在oldList中的index是1,1是<lastPlacedIndex的,所以不更新lastPlacedIndex,节点移动到lastPlacedIndex的位置
    此时:
    lastPlacedIndex:3
    oldList:["a","d","c","b"]
----第四次循环结束----

// 所以循环结束后oldList的顺序就变成了["a","d","c","b"],我们的工作就做完了

const react = (inputs, outputs) => {
  let lastPlacedIndex = 0;
  inputs = inputs.filter((item) => outputs.includes(item)); // 去掉被删除了的节点
  let temp = inputs.slice(0);
  const locationMapList = []; // 用来记录新增的节点的位置

  outputs.forEach((item, index) => {
    const oldIndex = inputs.indexOf(item);
    const canPlaced = !(oldIndex === -1);

    /* 有对应的旧节点 */
    if (canPlaced) {
      /* 可复用的旧节点不需要移动位置 */
      if (oldIndex >= lastPlacedIndex) {
        lastPlacedIndex = oldIndex;
        /* 可复用的旧节点，但是需要将节点放置到列表的最右边去 */
      } else {
        // 可复用节点入数组正确的位置（lastPlacedIndex的右边）
        temp.splice(lastPlacedIndex + 1, 0, item);
        // 删除错误位置的可复用节点
        temp.splice(oldIndex, 1);
      }
      /* 没有可复用的旧节点 */
    } else {
      // 记录位置
      locationMapList.push({
        index,
        value: item,
      });
    }
  });

  /* 将新增的加进对应位置 */
  locationMapList.forEach((item) => {
    temp.splice(item.index, 0, item.value);
  });

  return temp;
};

/* 节点数量相同 */
console.log(react(["a", "b", "c", "d"], ["a", "d", "c", "b"])); // ["d", "c", "a", "b"];

/* 新增了节点 */
console.log(react(["a", "b", "c"], ["e", "a", "g", "c", "d", "b", "l"])); // ["e", "a", "g", "c", "d", "b", "l"]

/* 删除了节点 */
console.log(react(["a", "b", "c", "d", "e"], ["d", "a", "e"])); // ["d", "a", "e"];

/* 既有删除又有新增 */
console.log(react(["a", "b", "c", "d"], ["a", "d", "c", "g", "e", "l"])); // ["a", "d", "c", "g", "e", "l"];