深刻FiberRoot

1. 介紹

  • 整個應用的起點
  • 包含應用掛載的目標起點
  • 記錄整個應用更新過程的各類信息

2.相關函數及內容

export function createContainer(
  containerInfo: Container,
  isConcurrent: boolean,
  hydrate: boolean,
): OpaqueRoot {
  return createFiberRoot(containerInfo, isConcurrent, hydrate);
}

createContainer中咱們返回了createFiberRoot函數的執行結果,
然就在ReactFiberRoot中咱們調用了createFiberRoot,,它返回一個root對象:react

root = ({
      current: uninitializedFiber,
        // 表明當前對應的fiber,這裏是未初始化的fiber
      containerInfo: containerInfo,
        // 表明容器的節點
      pendingChildren: null,
        //只有在持久化更新的平臺會用到,在react-Dom中不會被用到
      earliestPendingTime: NoWork,
         //最老的正在進行中的任務,這裏初始化都爲Nowork爲0,最低優先級
      latestPendingTime: NoWork,
          //最新的正在進行中的任務
      earliestSuspendedTime: NoWork,
          //最老的被掛起的任務
      latestSuspendedTime: NoWork,
          //最新的被掛起的任務
      latestPingedTime: NoWork,
            
      pingCache: null,

      didError: false,
       //標記整個應用在渲染的過程當中是否有錯誤
      pendingCommitExpirationTime: NoWork,
      //正在提交的任務的ExpirationTime,也就是優先級
      finishedWork: null,
      //在render階段已經完成了的任務,在commit階段只會執行finishedWork的任務
      timeoutHandle: noTimeout,
      //用來清理尚未被觸發的計時器
      context: null,
      //頂層的context對象,只用在調用「renderSubTreeIntoContainer」的時候在有用
      pendingContext: null,
      hydrate,
      //應用是否要和原來的dom節點進行合併
      nextExpirationTimeToWorkOn: NoWork,
      //記錄下一次將要進行的對應的優先級的任務
      expirationTime: NoWork,
      //當前的優先級的任務
      firstBatch: null,
      
      nextScheduledRoot: null,
        //鏈表的結構,兩次react-Domrender渲染的。。節點的鏈表
      interactionThreadID: unstable_getThreadID(),
      // 交互的線程id
      memoizedInteractions: new Set(),
      //上次交互的線程id的Set對象
      pendingInteractionMap: new Map(),
      //進行中的交互的線程的Map對象
    }: FiberRoot);
相關文章
相關標籤/搜索