function commitRootImpl(root, recoverableErrors, transitions, renderPriorityLevel) {
  // ============
  // 渲染前准备
  // ============
  const finishedWork = root.finishedWork
  const lanes = root.finishedLanes

  // 清空 FiberRoot 对象上的属性
  root.finishedWork = null
  root.finishedLanes = NoLanes
  root.callbackNode = null

  if (root === workInProgressRoot) {
    workInProgressRoot = null
    workInProgress = null
    workInProgressRootRenderLanes = NoLanes
  }

  // ========
  // 渲染
  // ========
  // 检查是否有副作用在整个树
  const subtreeHasEffect =
    (finishedWork.subtreeFlags &
      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
    NoFlags
  const rootHasEffect =
    (finishedWork.flags &
      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
    NoFlags

  if (subtreeHasEffect || rootHasEffect) {
    const prevExecutionContext = executionContext
    executionContext |= CommitContext
    const prevInteractions = pushInteractions(root)

    // 调用生命周期前，重置为null
    ReactCurrentOwner.current = null

    // 第一个阶段
    commitBeforeMutationEffects(finishedWork)

    // 第二个阶段
    commitMutationEffects(finishedWork, root, renderPriorityLevel)

    // fiber 树的切换
    root.current = finishedWork

    // 第三个阶段
    commitLayoutEffects(finishedWork, root, lanes)

    // 如果有被动的副作用，调度一个回调处理它。
    if (
      (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
      (finishedWork.flags & PassiveMask) !== NoFlags
    ) {
      if (!rootDoesHavePassiveEffects) {
        rootDoesHavePassiveEffects = true
        scheduleCallback(NormalSchedulerPriority, () => {
          flushPassiveEffecs()
          return null
        })
      }
    }

    // 告知调度器在帧的末尾产生，所以浏览器能有机会绘制。
    requestPaint()

    // =========
    // 渲染后
    // =========
    const rootDidHavePassiveEffects = rootDoesHavePassiveEffects

    if (rootDoesHavePassiveEffects) {
      // 这次 commit 有被动副作用，保存对它们的引用。
      rootDoesHavePassiveEffects = false
      rootWithPendingPassiveEffects = root
      pendingPassiveEffectsLanes = lanes
    } else {
      releaseRootPooledCache(root, remainingLanes)
    }

    // 结束之前总是要调用该函数，确保当前 root 所有额外的工作的被调度。
    ensureRootIsScheduled(root, now())

    // 如果布局被调度了，刷新它
    flushSyncCallbackQueue()

    return null
  }
}