/**
   * 
   * @param {*} returnFiber 根fiber div#root對應(yīng)的fiber
   * @param {*} currentFirstChild 老的FunctionComponent對應(yīng)的fiber
   * @param {*} element 新的虛擬DOM對象
   * @returns 返回新的第一個子fiber
   */
  function reconcileSingleElement(returnFiber, currentFirstChild, element) {
    //新的虛擬DOM的key,也就是唯一標(biāo)準(zhǔn)
    const key = element.key;        // null
    let child = currentFirstChild; //老的FunctionComponent對應(yīng)的fiber
    while (child !== null) {
      //判斷此老fiber對應(yīng)的key和新的虛擬DOM對象的key是否一樣 null===null
      if (child.key === key) {
        //判斷老fiber對應(yīng)的類型和新虛擬DOM元素對應(yīng)的類型是否相同
        if (child.type === element.type) {// p div
          deleteRemainingChildren(returnFiber, child.sibling);
          //如果key一樣，類型也一樣，則認(rèn)為此節(jié)點(diǎn)可以復(fù)用
          const existing = useFiber(child, element.props);
          existing.ref = element.ref;
          existing.return = returnFiber;
          return existing;
        } else {
          //如果找到一key一樣老fiber,但是類型不一樣，不能此老fiber,把剩下的全部刪除
          deleteRemainingChildren(returnFiber, child);
        }
      } else {
        deleteChild(returnFiber, child);
      }
      child = child.sibling;
    }
    //因?yàn)槲覀儸F(xiàn)實(shí)的初次掛載，老節(jié)點(diǎn)currentFirstChild肯定是沒有的，所以可以直接根據(jù)虛擬DOM創(chuàng)建新的Fiber節(jié)點(diǎn)
    const created = createFiberFromElement(element);
    created.ref = element.ref;
    created.return = returnFiber;
    return created;
  }

<div>
  <div key='A'>A</div> 
  <div key='B'>B</div>
</div>
<!-- 變化到 -->
<div>
  <div key='A'>C</div>
</div>

<div>
  <div key='A'>A</div> 
  <div key='B'>B</div>
</div>
<!-- 變化到 -->
<div>
  <div key='C'>C</div>
</div>

<div>
  <div key='A'>A</div> 
  <div key='B'>B</div>
</div>
<!-- 變化到 -->
<div>
  <p key='A'>C</p>
</div>

  function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren) {
    let resultingFirstChild = null; //返回的第一個新兒子
    let previousNewFiber = null; //上一個的一個新的兒fiber
    let newIdx = 0;//用來遍歷新的虛擬DOM的索引
    let oldFiber = currentFirstChild;//第一個老fiber
    let nextOldFiber = null;//下一個第fiber
    let lastPlacedIndex = 0;//上一個不需要移動的老節(jié)點(diǎn)的索引
    // 開始第一輪循環(huán) 如果老fiber有值，新的虛擬DOM也有值
    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
      //先暫下一個老fiber
      nextOldFiber = oldFiber.sibling;
      //試圖更新或者試圖復(fù)用老的fiber
      const newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx]);
      if (newFiber === null) {
        break;
      }
      //如果有老fiber,但是新的fiber并沒有成功復(fù)用老fiber和老的真實(shí)DOM，那就刪除老fiber,在提交階段會刪除真實(shí)DOM
      if (oldFiber && newFiber.alternate === null) {
        deleteChild(returnFiber, oldFiber);
      }
      //指定新fiber的位置
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      if (previousNewFiber === null) {
        resultingFirstChild = newFiber;//li(A).sibling=p(B).sibling=>li(C)
      } else {
        previousNewFiber.sibling = newFiber;
      }
      previousNewFiber = newFiber;
      oldFiber = nextOldFiber
    }
    //新的虛擬DOM已經(jīng)循環(huán)完畢
    if (newIdx === newChildren.length) {
      //刪除剩下的老fiber
      deleteRemainingChildren(returnFiber, oldFiber);
      return resultingFirstChild;
    }
    if (oldFiber === null) {
      //如果老的 fiber已經(jīng)沒有了， 新的虛擬DOM還有，進(jìn)入插入新節(jié)點(diǎn)的邏輯
      for (; newIdx < newChildren.length; newIdx++) {
        const newFiber = createChild(returnFiber, newChildren[newIdx]);
        if (newFiber === null) continue;
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        //如果previousNewFiber為null，說明這是第一個fiber
        if (previousNewFiber === null) {
          resultingFirstChild = newFiber; //這個newFiber就是大兒子
        } else {
          //否則說明不是大兒子，就把這個newFiber添加上一個子節(jié)點(diǎn)后面
          previousNewFiber.sibling = newFiber;
        }
        //讓newFiber成為最后一個或者說上一個子fiber
        previousNewFiber = newFiber;
      }
    }
    // 開始處理移動的情況
    const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
    //開始遍歷剩下的虛擬DOM子節(jié)點(diǎn)
    for (; newIdx < newChildren.length; newIdx++) {
      const newFiber = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx]);
      if (newFiber !== null) {
      //如果要跟蹤副作用，并且有老fiber
       if (newFiber.alternate !== null) {
         existingChildren.delete(newFiber.key === null ? newIdx : newFiber.key);
       }
        //指定新的fiber存放位置 ，并且給lastPlacedIndex賦值
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        if (previousNewFiber === null) {
          resultingFirstChild = newFiber; //這個newFiber就是大兒子
        } else {
          //否則說明不是大兒子，就把這個newFiber添加上一個子節(jié)點(diǎn)后面
          previousNewFiber.sibling = newFiber;
        }
        //讓newFiber成為最后一個或者說上一個子fiber
        previousNewFiber = newFiber;
      }
    }
    //等全部處理完后，刪除map中所有剩下的老fiber
    existingChildren.forEach(child => deleteChild(returnFiber, child));
    return resultingFirstChild;
  }

<ul key="container">
  <li key="A">A</li>
  <li key="B">B</li>
  <li key="C">C</li>
  <li key="D">D</li>
  <li key="E">E</li>
  <li key="F">F</li>
</ul>
<!-- 變化到 -->
<ul key="container">
  <li key="A">A2</li>
  <li key="C">C2</li>
  <li key="E">E2</li>
  <li key="B">B2</li>
  <li key="G">G</li>
  <li key="D">D2</li>
</ul>

for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
      //先暫下一個老fiber
      nextOldFiber = oldFiber.sibling;
      //試圖更新或者試圖復(fù)用老的fiber
      const newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx]);
      if (newFiber === null) {
        break;
      }
      if (shouldTrackSideEffects) {
        //如果有老fiber,但是新的fiber并沒有成功復(fù)用老fiber和老的真實(shí)DOM，那就刪除老fiber,在提交階段會刪除真實(shí)DOM
        if (oldFiber && newFiber.alternate === null) {
          deleteChild(returnFiber, oldFiber);
        }
      }
      //指定新fiber的位置
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      if (previousNewFiber === null) {
        resultingFirstChild = newFiber;//li(A).sibling=p(B).sibling=>li(C)
      } else {
        previousNewFiber.sibling = newFiber;
      }
      previousNewFiber = newFiber;
      oldFiber = nextOldFiber
    }

if (oldFiber === null) {
  //如果老的 fiber已經(jīng)沒有了， 新的虛擬DOM還有，進(jìn)入插入新節(jié)點(diǎn)的邏輯
  for (; newIdx < newChildren.length; newIdx++) {
    const newFiber = createChild(returnFiber, newChildren[newIdx]);
    if (newFiber === null) continue;
    lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
    //如果previousNewFiber為null，說明這是第一個fiber
    if (previousNewFiber === null) {
      resultingFirstChild = newFiber; //這個newFiber就是大兒子
    } else {
      //否則說明不是大兒子，就把這個newFiber添加上一個子節(jié)點(diǎn)后面
      previousNewFiber.sibling = newFiber;
    }
    //讓newFiber成為最后一個或者說上一個子fiber
    previousNewFiber = newFiber;
  }
}

// 開始處理移動的情況
const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
//開始遍歷剩下的虛擬DOM子節(jié)點(diǎn)
for (; newIdx < newChildren.length; newIdx++) {
  const newFiber = updateFromMap(
    existingChildren,
    returnFiber,
    newIdx,
    newChildren[newIdx],
  );
  if (newFiber !== null) {
  //如果要跟蹤副作用，并且有老fiber
  if (newFiber.alternate !== null) {
    existingChildren.delete(newFiber.key === null ? newIdx : newFiber.key);
  }
    //指定新的fiber存放位置 ，并且給lastPlacedIndex賦值
    lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
    if (previousNewFiber === null) {
      resultingFirstChild = newFiber; //這個newFiber就是大兒子
    } else {
      //否則說明不是大兒子，就把這個newFiber添加上一個子節(jié)點(diǎn)后面
      previousNewFiber.sibling = newFiber;
    }
    //讓newFiber成為最后一個或者說上一個子fiber
    previousNewFiber = newFiber;
  }
}
function mapRemainingChildren(returnFiber, currentFirstChild) {
  const existingChildren = new Map();
  let existingChild = currentFirstChild;
  while (existingChild != null) {
    //如果有key用key,如果沒有key使用索引
    if (existingChild.key !== null) {
      existingChildren.set(existingChild.key, existingChild);
    } else {
      existingChildren.set(existingChild.index, existingChild);
    }
    existingChild = existingChild.sibling;
  }
  return existingChildren;
}