ReactDom.render

//packages/react-dom/src/client/ReactDOMLegacy.js
render(
    element: React$Element<any>,
    container: DOMContainer,
    callback: ?Function,
  ) {
    // 調(diào)用legacyRenderSubtreeIntoContainer
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      false,
      callback,
    );
  }

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
  ){
      let root = container._reactRootContainer
      let fiberRoot
      // 判斷root是否存在
      if(!root) {
        // 首次渲染不存在，則生成root，賦值fiberRoot
        root = container_reactRootContainer = legacyCreateRootFromDOMContainer(container,forceHydrate)
        fiberRoot = root._internalRoot
        /**fiberRoot :{tag: 0
        current: FiberNode {tag: 3, key: null, elementType: null, type: null, stateNode: FiberRootNode, …}
        containerInfo: div#root
        finishedExpirationTime: 0
        finishedWork: null} **/
        // 字面理解不要批量更新，首次渲染需要立即執(zhí)行內(nèi)部函數(shù)，即updateContainer
        unbatchedUpdates(() => {
          // 生成expirationTime, 調(diào)度  ps: 注釋1
          updateContainer(children, fiberRoot, parentComponent, callback);
        });  
      }else {
          fiberRoot = root._internalRoot
          updateContainer(children, fiberRoot, parentComponent, callback);
      }
      return getPublicRootInstance(fiberRoot)
  }

// 注釋1 生成expirationTime, 并 scheduleWork調(diào)度
function updateContainer(
  element: ReactNodeList,
  container: fiberRoot,
  parentComponent: ?React$Component<any, any>,
  callback: ?Function,
  ): ExpirationTime {
      const current = container.current; // 當前Root Fiber
      const currentTime = requestCurrentTimeForUpdate(); //當前時間
      // 生成expirationTime 注釋2
      const expirationTime = computeExpirationForFiber(
          currentTime,
          current,
          suspenseConfig,
      );
      // 創(chuàng)建更新
      const update = createUpdate(expirationTime, suspenseConfig)
      enqueueUpdate(current, update); // 加入隊列
      // 注釋 3
      scheduleWork(current, expirationTime) //調(diào)度root fiber
      return expirationTime
  }

// 注釋2 計算expirationTime
function computeExpirationForFiber(
    currentTime,
    fiber,
    suspenseConfig 
    ): ExpirationTime {
        const priorityLevel = getCurrentPriorityLevel();
        let expirationTime;
        if(suspenseConfig !== null) {
            //有掛起任務(wù)的情況
        }else{
            switch(priorityLevel) {
                case ImmediatePriority:
                    expirationTime = Sync // 同步
                    break;
                case NormalPriority:
                case LowPriority:
                    expirationTime = computeAsyncExpiration(currentTime) //異步
            }
        }
        return expirationTime;
    }

// 注釋 3 scheduleWork調(diào)度
function scheduleUpdateOnFiber(
    fiber,
    expirationTime 
    ) {
        if(expirationTime === Sync) {
            //注釋4
            performSyncWorkOnRoot(root)
        }else {
            
        }
    }

// 注釋 4
function performSyncWorkOnRoot(root) {
    if(workInProgress !== null) {
        do{
            try {
                // 注釋 5
                workLoopSync()
            }
        }while(true)
    }
    
    if(workInProgress !==null){
        
    }else{
        // 已經(jīng)沒有當前工作的單元任務(wù)，提交 注釋7
        commitRoot(root)
    }
}
    
// 注釋 5
    function workLoopSync() {
        // 向下遍歷，構(gòu)建fiber tree
        while (workInProgress !== null) {
            // 注釋 6
            workInProgress = performUnitOfWork(workInProgress);
        }
    }
    
// 注釋 6  構(gòu)建fiber tree, 并返回下一個fiber node
    function performUnitOfWork(unitOfWork) {
        const current = unitOfWork.alternate
        startWorkTimer(unitOfWork)
        let next
        // 向下構(gòu)建fiber tree，更加tag 進行updatexx,如果nextProps中有children ,驚喜reconcileChildren
        next = beginWork(current, unitOfWork, renderExpirationTime)
        
        if(next === null){
            // 向上構(gòu)建，設(shè)置firstEffect／nextEffect,并設(shè)置stateNode，真實dom
            next = completeUnitOfWork(unitOfWork)
        }
        return next
    }   
    
 // 注釋7 commitRoot(root)
    function commitRootImpl(root, renderPriorityLevel){
        const finishedWork = root.finishedWork
        /** finishedWork:
        { tag: 3
            key: null
            elementType: null
            type: null
            stateNode: FiberRootNode {tag: 0, current: FiberNode, containerInfo: div#root, pendingChildren: null, pingCache: null, …}
            return: null
            child: FiberNode {tag: 1, key: null, stateNode: Demo, elementType: ?, type: ?, …}
            sibling: null
            index: 0
            ref: null
            pendingProps: null
            memoizedProps: null
            updateQueue: {baseState: {…}, firstUpdate: null, lastUpdate: null, firstCapturedUpdate: null, lastCapturedUpdate: null, …}
            memoizedState: {element: {…}}
            mode: 8
            effectTag: 0
            nextEffect: null
            firstEffect: FiberNode {tag: 1, key: null, stateNode: Demo, elementType: ?, type: ?, …}
            lastEffect: FiberNode {tag: 1, key: null, stateNode: Demo, elementType: ?, type: ?, …}
            expirationTime: 0
            childExpirationTime: 0
            alternate: FiberNode {tag: 3, key: null, elementType: null, type: null, stateNode: FiberRootNode, …}
        }
        **/
        
        firstEffect = finishedWork.firstEffect;
        nextEffect = firstEffect
        // 根據(jù)fiberRoot上 nextEffect,進行更新
        do{
            commitBeforMutationEffects()
        }while(nextEffect !== null)
            
        do{ 
            // 根據(jù)nextEffect.effectTag 做響應(yīng)的dom操作 commitPlacement/commitWork/commitDeletion
            commitMutationEffects()
        }while(nextEffect !== null)
        do{
            // commitLifeCycles 執(zhí)行后續(xù)的生命周期
            commitLayoutEffects(root, expirationTime)
        }while(nextEffect !== null)    
            
        onCommitRoot(finishedWork.stateNode, expirationTime)
        flushSyncCallbackQueue()
        return null;
    }