export function reconcileChildren(
  current: Fiber | null, // 當(dāng)前 fiber 節(jié)點
  workInProgress: Fiber, // 父 fiber
  nextChildren: any, // 新生成的 ReactElement 內(nèi)容
  renderLanes: Lanes, // 渲染的優(yōu)先級
) {
  if (current === null) {
    // 如果當(dāng)前 fiber 節(jié)點為空，則直接將新的 ReactElement 內(nèi)容生成新的 fiber
    workInProgress.child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderLanes,
    );
  } else {
    // 當(dāng)前 fiber 節(jié)點不為空，則與新生成的 ReactElement 內(nèi)容進(jìn)行 diff
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren,
      renderLanes,
    );
  }
}

function reconcileChildFibers(
  returnFiber: Fiber, // 父 Fiber
  currentFirstChild: Fiber | null, // 父 fiber 下要對比的第一個子 fiber
  newChild: any, // 更新后的 React.Element 內(nèi)容
  lanes: Lanes, // 更新的優(yōu)先級
): Fiber | null {
  // 對新創(chuàng)建的 ReactElement 最外層是 fragment 類型單獨處理，比較其 children
  const isUnkeyedTopLevelFragment =
    typeof newChild === 'object' &&
    newChild !== null &&
    newChild.type === REACT_FRAGMENT_TYPE &&
    newChild.key === null;
  if (isUnkeyedTopLevelFragment) {
    newChild = newChild.props.children;
  }
  // 對更新后的 React.Element 是單節(jié)點的處理
  if (typeof newChild === 'object' && newChild !== null) {
    switch (newChild.$$typeof) {
      // 常規(guī) react 元素
      case REACT_ELEMENT_TYPE:
        return placeSingleChild(
          reconcileSingleElement(
            returnFiber,
            currentFirstChild,
            newChild,
            lanes,
          ),
        );
      // react.portal 類型
      case REACT_PORTAL_TYPE:
        return placeSingleChild(
          reconcileSinglePortal(
            returnFiber,
            currentFirstChild,
            newChild,
            lanes,
          ),
        );
      // react.lazy 類型
      case REACT_LAZY_TYPE:
        if (enableLazyElements) {
          const payload = newChild._payload;
          const init = newChild._init;
          return reconcileChildFibers(
            returnFiber,
            currentFirstChild,
            init(payload),
            lanes,
          );
        }
    }
    // 更新后的 React.Element 是多節(jié)點的處理
    if (isArray(newChild)) {
      return reconcileChildrenArray(
        returnFiber,
        currentFirstChild,
        newChild,
        lanes,
      );
    }
    // 迭代器函數(shù)的單獨處理
    if (getIteratorFn(newChild)) {
      return reconcileChildrenIterator(
        returnFiber,
        currentFirstChild,
        newChild,
        lanes,
      );
    }
    throwOnInvalidObjectType(returnFiber, newChild);
  }
  // 純文本節(jié)點的類型處理
  if (typeof newChild === 'string' || typeof newChild === 'number') {
    return placeSingleChild(
      reconcileSingleTextNode(
        returnFiber,
        currentFirstChild,
        '' + newChild,
        lanes,
      ),
    );
  }
  if (__DEV__) {
    if (typeof newChild === 'function') {
      warnOnFunctionType(returnFiber);
    }
  }
  // 不符合以上情況都視為 empty，直接從父節(jié)點刪除所有舊的子 Fiber
  return deleteRemainingChildren(returnFiber, currentFirstChild);
}

function reconcileSingleElement(
  returnFiber: Fiber, // 父 fiber
  currentFirstChild: Fiber | null, // 父 fiber 下第一個開始對比的舊的子  fiber
  element: ReactElement, // 當(dāng)前的 ReactElement內(nèi)容
  lanes: Lanes, // 更新的優(yōu)先級
): Fiber {
  const key = element.key;
  let child = currentFirstChild;
  // 處理舊的 fiber 由多個節(jié)點變成新的 fiber 一個節(jié)點的情況
  // 循環(huán)遍歷父 fiber 下的舊的子 fiber，直至遍歷完或者找到 key 和 type 都與新節(jié)點相同的情況
  while (child !== null) {
    if (child.key === key) {
      const elementType = element.type;
      if (elementType === REACT_FRAGMENT_TYPE) {
        if (child.tag === Fragment) {
          // 如果新的 ReactElement 和舊 Fiber 都是 fragment 類型且 key 相等
          // 對舊 fiber 后面的所有兄弟節(jié)點添加 Deletion 副作用標(biāo)記，用于 dom 更新時刪除
          deleteRemainingChildren(returnFiber, child.sibling);
          // 通過 useFiber, 基于舊的 fiber 和新的 props.children，克隆生成一個新的 fiber，新 fiber 的 index 為 0，sibling 為 null
          // 這便是所謂的 fiber 復(fù)用
          const existing = useFiber(child, element.props.children);
          existing.return = returnFiber;
          if (__DEV__) {
            existing._debugSource = element._source;
            existing._debugOwner = element._owner;
          }
          return existing;
        }
      } else {
        if (
          // 如果新的 ReactElement 和舊 Fiber 的 key 和 type 都相等
          child.elementType === elementType ||
          (__DEV__
            ? isCompatibleFamilyForHotReloading(child, element)
            : false) ||
          (enableLazyElements &&
            typeof elementType === 'object' &&
            elementType !== null &&
            elementType.$$typeof === REACT_LAZY_TYPE &&
            resolveLazy(elementType) === child.type)
        ) {
          // 對舊 fiber 后面的所有兄弟節(jié)點添加 Deletion 副作用標(biāo)記，用于 dom 更新時刪除
          deleteRemainingChildren(returnFiber, child.sibling);
          // 通過 useFiber 復(fù)用新節(jié)點并返回
          const existing = useFiber(child, element.props);
          existing.ref = coerceRef(returnFiber, child, element);
          existing.return = returnFiber;
          if (__DEV__) {
            existing._debugSource = element._source;
            existing._debugOwner = element._owner;
          }
          return existing;
        }
      }
      // 若 key 相同但是 type 不同說明不匹配，移除舊 fiber 及其后面的兄弟 fiber
      deleteRemainingChildren(returnFiber, child);
      break;
    } else {
      // 若 key 不同，對當(dāng)前的舊 fiber 添加 Deletion 副作用標(biāo)記，繼續(xù)對其兄弟節(jié)點遍歷
      deleteChild(returnFiber, child);
    }
    child = child.sibling;
  }
  // 都遍歷完之后說明沒有匹配到 key 和 type 都相同的 fiber
  if (element.type === REACT_FRAGMENT_TYPE) {
    // 如果新節(jié)點是 fragment 類型，createFiberFromFragment 創(chuàng)建新的 fragment 類型 fiber并返回
    const created = createFiberFromFragment(
      element.props.children,
      returnFiber.mode,
      lanes,
      element.key,
    );
    created.return = returnFiber;
    return created;
  } else {
    // createFiberFromElement 創(chuàng)建 fiber 并返回
    const created = createFiberFromElement(element, returnFiber.mode, lanes);
    created.ref = coerceRef(returnFiber, currentFirstChild, element);
    created.return = returnFiber;
    return created;
  }
}

function placeSingleChild(newFiber: Fiber): Fiber {
  if (shouldTrackSideEffects && newFiber.alternate === null) {
    newFiber.flags |= Placement;
  }
  return newFiber;
}

function reconcileSingleTextNode(
  returnFiber: Fiber,  currentFirstChild: Fiber | null,  textContent: string,  lanes: Lanes,
): Fiber {
  if (currentFirstChild !== null && currentFirstChild.tag === HostText) {
    // deleteRemainingChildren 對舊 fiber 后面的所有兄弟節(jié)點添加 Deletion 副作用標(biāo)記，用于 dom 更新時刪除
    // useFiber 傳入 textContext 復(fù)用當(dāng)前 fiber
    deleteRemainingChildren(returnFiber, currentFirstChild.sibling);
    const existing = useFiber(currentFirstChild, textContent);
    existing.return = returnFiber;
    return existing;
  }
  // 若未匹配到，createFiberFromText 創(chuàng)建新的 fiber
  deleteRemainingChildren(returnFiber, currentFirstChild);
  const created = createFiberFromText(textContent, returnFiber.mode, lanes);
  created.return = returnFiber;
  return created;
}

function reconcileChildrenArray(
  returnFiber: Fiber,  currentFirstChild: Fiber | null,  newChildren: Array<*>,  lanes: Lanes,
): Fiber | null {
  // 開發(fā)環(huán)境下會校驗 key 是否存在且合法，否則會報 warning
  if (__DEV__) {
    let knownKeys = null;
    for (let i = 0; i < newChildren.length; i++) {
      const child = newChildren[i];
      knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber);
    }
  }
  let resultingFirstChild: Fiber | null = null; // 最終要返回的第一個子 fiber
  let previousNewFiber: Fiber | null = null;
  let oldFiber = currentFirstChild;
  let lastPlacedIndex = 0;
  let newIdx = 0;
  let nextOldFiber = null;
  // 因為在實際的應(yīng)用開發(fā)中，react 發(fā)現(xiàn)更新的情況遠(yuǎn)大于新增和刪除的情況，所以這里優(yōu)先處理更新
  // 根據(jù) oldFiber 的 index 和 newChildren 的下標(biāo)，找到要對比更新的 oldFiber
  for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
    if (oldFiber.index > newIdx) {
      nextOldFiber = oldFiber;
      oldFiber = null;
    } else {
      nextOldFiber = oldFiber.sibling;
    }
    // 通過 updateSlot 來 diff oldFiber 和新的 child，生成新的 Fiber
    // updateSlot 與上面兩種類型的 diff 類似，如果 oldFiber 可復(fù)用，則根據(jù) oldFiber 和 child 的 props 生成新的 fiber；否則返回 null
    const newFiber = updateSlot(
      returnFiber,
      oldFiber,
      newChildren[newIdx],
      lanes,
    );
    // newFiber 為 null 說明不可復(fù)用，退出第一輪的循環(huán)
    if (newFiber === null) {
      if (oldFiber === null) {
        oldFiber = nextOldFiber;
      }
      break;
    }
    if (shouldTrackSideEffects) {
      if (oldFiber && newFiber.alternate === null) {
        deleteChild(returnFiber, oldFiber);
      }
    }
    // 記錄復(fù)用的 oldFiber 的 index，同時給新 fiber 打上 Placement 副作用標(biāo)簽
    lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
    if (previousNewFiber === null) {
      // 如果上一個 newFiber 為 null，說明這是第一個生成的 newFiber，設(shè)置為 resultingFirstChild
      resultingFirstChild = newFiber;
    } else {
      // 否則構(gòu)建鏈?zhǔn)疥P(guān)系
      previousNewFiber.sibling = newFiber;
    }
    previousNewFiber = newFiber;
    oldFiber = nextOldFiber;
  }
  if (newIdx === newChildren.length) {
    // newChildren遍歷完了，說明剩下的 oldFiber 都是待刪除的 Fiber
    // 對剩下 oldFiber 標(biāo)記 Deletion
    deleteRemainingChildren(returnFiber, oldFiber);
    return resultingFirstChild;
  }
  if (oldFiber === null) {
    // olderFiber 遍歷完了
    // newChildren 剩下的節(jié)點都是需要新增的節(jié)點
    for (; newIdx < newChildren.length; newIdx++) {
      // 遍歷剩下的 child，通過 createChild 創(chuàng)建新的 fiber
      const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
      if (newFiber === null) {
        continue;
      }
      // 處理dom移動，// 記錄 index，同時給新 fiber 打上 Placement 副作用標(biāo)簽
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      // 將新創(chuàng)建 fiber 加入到 fiber 鏈表樹中
      if (previousNewFiber === null) {
        resultingFirstChild = newFiber;
      } else {
        previousNewFiber.sibling = newFiber;
      }
      previousNewFiber = newFiber;
    }
    return resultingFirstChild;
  }
  // oldFiber 和 newChildren 都未遍歷完
  // mapRemainingChildren 生成一個以 oldFiber 的 key 為 key， oldFiber 為 value 的 map
  const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
  // 對剩下的 newChildren 進(jìn)行遍歷
  for (; newIdx < newChildren.length; newIdx++) {
    // 找到 mapRemainingChildren 中 key 相等的 fiber, 創(chuàng)建新 fiber 復(fù)用
    const newFiber = updateFromMap(
      existingChildren,
      returnFiber,
      newIdx,
      newChildren[newIdx],
      lanes,
    );
    if (newFiber !== null) {
      if (shouldTrackSideEffects) {
        if (newFiber.alternate !== null) {
          // 刪除當(dāng)前找到的 fiber
          existingChildren.delete(
            newFiber.key === null ? newIdx : newFiber.key,
          );
        }
      }
      // 處理dom移動，記錄 index，同時給新 fiber 打上 Placement 副作用標(biāo)簽
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      // 將新創(chuàng)建 fiber 加入到 fiber 鏈表樹中
      if (previousNewFiber === null) {
        resultingFirstChild = newFiber;
      } else {
        previousNewFiber.sibling = newFiber;
      }
      previousNewFiber = newFiber;
    }
  }
  if (shouldTrackSideEffects) {
    // 剩余的舊 fiber 的打上 Deletion 副作用標(biāo)簽
    existingChildren.forEach(child => deleteChild(returnFiber, child));
  }
  return resultingFirstChild;
}