React 应用的启动过程

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: Container,
  forceHydrate: boolean,
  callback: ?Function
) {
  let root: RootType = (container._reactRootContainer: any)
  let fiberRoot
  if (!root) {
    // 初次调用, root还未初始化, 会进入此分支
    //1. 创建ReactDOMRoot对象, 初始化react应用环境
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate)
    fiberRoot = root._internalRoot
    if (typeof callback === 'function') {
      const originalCallback = callback
      callback = function () {
        // instance最终指向 children(入参: 如<App/>)生成的dom节点
        const instance = getPublicRootInstance(fiberRoot)
        originalCallback.call(instance)
      }
    }
    // 2. 更新容器
    unbatchedUpdates(() => {
      updateContainer(children, fiberRoot, parentComponent, callback)
    })
  } else {
    // root已经初始化, 二次调用render会进入
    // 1. 获取FiberRoot对象
    fiberRoot = root._internalRoot
    if (typeof callback === 'function') {
      const originalCallback = callback
      callback = function () {
        const instance = getPublicRootInstance(fiberRoot)
        originalCallback.call(instance)
      }
    }
    // 2. 调用更新
    updateContainer(children, fiberRoot, parentComponent, callback)
  }
  return getPublicRootInstance(fiberRoot)
}

function legacyCreateRootFromDOMContainer(container: Container, forceHydrate: boolean): RootType {
  const shouldHydrate = forceHydrate || shouldHydrateDueToLegacyHeuristic(container)
  return createLegacyRoot(
    container,
    shouldHydrate
      ? {
          hydrate: true,
        }
      : undefined
  )
}

export function createLegacyRoot(container: Container, options?: RootOptions): RootType {
  return new ReactDOMBlockingRoot(container, LegacyRoot, options) // 注意这里的LegacyRoot是固定的, 并不是外界传入的
}

export function createRoot(container: Container, options?: RootOptions): RootType {
  return new ReactDOMRoot(container, options)
}

export function createBlockingRoot(container: Container, options?: RootOptions): RootType {
  return new ReactDOMBlockingRoot(container, BlockingRoot, options) // 注意第2个参数BlockingRoot是固定写死的
}

function ReactDOMRoot(container: Container, options: void | RootOptions) {
  // 创建一个fiberRoot对象, 并将其挂载到this._internalRoot之上
  this._internalRoot = createRootImpl(container, ConcurrentRoot, options)
}
function ReactDOMBlockingRoot(container: Container, tag: RootTag, options: void | RootOptions) {
  // 创建一个fiberRoot对象, 并将其挂载到this._internalRoot之上
  this._internalRoot = createRootImpl(container, tag, options)
}

ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function (
  children: ReactNodeList
): void {
  const root = this._internalRoot
  // 执行更新
  updateContainer(children, root, null, null)
}

ReactDOMRoot.prototype.unmount = ReactDOMBlockingRoot.prototype.unmount = function (): void {
  const root = this._internalRoot
  const container = root.containerInfo
  // 执行更新
  updateContainer(null, root, null, () => {
    unmarkContainerAsRoot(container)
  })
}

// 注意: 3种模式下的tag是各不相同(分别是ConcurrentRoot,BlockingRoot,LegacyRoot).
this._internalRoot = createRootImpl(container, tag, options)

function createRootImpl(container: Container, tag: RootTag, options: void | RootOptions) {
  // ... 省略部分源码(有关hydrate服务端渲染等, 暂时用不上)
  // 1. 创建fiberRoot
  const root = createContainer(container, tag, hydrate, hydrationCallbacks) // 注意RootTag的传递
  // 2. 标记dom对象, 把dom和fiber对象关联起来
  markContainerAsRoot(root.current, container)
  // ...省略部分无关代码
  return root
}

export function createContainer(
  containerInfo: Container,
  tag: RootTag,
  hydrate: boolean,
  hydrationCallbacks: null | SuspenseHydrationCallbacks
): OpaqueRoot {
  // 创建fiberRoot对象
  return createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks) // 注意RootTag的传递
}

export function createFiberRoot(
  containerInfo: any,
  tag: RootTag,
  hydrate: boolean,
  hydrationCallbacks: null | SuspenseHydrationCallbacks
): FiberRoot {
  // 创建fiberRoot对象, 注意RootTag的传递
  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any)

  // 1. 这里创建了`react`应用的首个`fiber`对象, 称为`HostRootFiber`
  const uninitializedFiber = createHostRootFiber(tag)
  root.current = uninitializedFiber
  uninitializedFiber.stateNode = root
  // 2. 初始化HostRootFiber的updateQueue
  initializeUpdateQueue(uninitializedFiber)

  return root
}

export function createHostRootFiber(tag: RootTag): Fiber {
  let mode
  if (tag === ConcurrentRoot) {
    mode = ConcurrentMode | BlockingMode | StrictMode
  } else if (tag === BlockingRoot) {
    mode = BlockingMode | StrictMode
  } else {
    mode = NoMode
  }
  return createFiber(HostRoot, null, null, mode) // 注意这里设置的mode属性是由RootTag决定的
}

// 2. 更新容器
unbatchedUpdates(() => {
  updateContainer(children, fiberRoot, parentComponent, callback)
})

ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function (
  children: ReactNodeList
): void {
  const root = this._internalRoot
  // 执行更新
  updateContainer(children, root, null, null)
}

export function updateContainer(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component<any, any>,
  callback: ?Function
): Lane {
  const current = container.current
  // 1. 获取当前时间戳, 计算本次更新的优先级
  const eventTime = requestEventTime()
  const lane = requestUpdateLane(current)

  // 2. 设置fiber.updateQueue
  const update = createUpdate(eventTime, lane)
  update.payload = { element }
  callback = callback === undefined ? null : callback
  if (callback !== null) {
    update.callback = callback
  }
  enqueueUpdate(current, update)

  // 3. 进入reconcier运作流程中的`输入`环节
  scheduleUpdateOnFiber(current, lane, eventTime)
  return lane
}