深入FiberRoot

hoohack 發(fā)布于2019-08-23 16:45 / 2426人閱讀

摘要：節(jié)點(diǎn)的鏈表交互的線程上次交互的線程的對(duì)象進(jìn)行中的交互的線程的對(duì)象

1. 介紹

整個(gè)應(yīng)用的起點(diǎn)

包含應(yīng)用掛載的目標(biāo)起點(diǎn)

記錄整個(gè)應(yīng)用更新過程的各種信息

2.相關(guān)函數(shù)及內(nèi)容

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

在createContainer中我們返回了createFiberRoot函數(shù)的執(zhí)行結(jié)果，
然就在ReactFiberRoot中我們調(diào)用了createFiberRoot，，它返回一個(gè)root對(duì)象：

root = ({
      current: uninitializedFiber,
        // 代表當(dāng)前對(duì)應(yīng)的fiber，這里是未初始化的fiber
      containerInfo: containerInfo,
        // 代表容器的節(jié)點(diǎn)
      pendingChildren: null,
        //只有在持久化更新的平臺(tái)會(huì)用到，在react-Dom中不會(huì)被用到
      earliestPendingTime: NoWork,
         //最老的正在進(jìn)行中的任務(wù)，這里初始化都為Nowork為0，最低優(yōu)先級(jí)
      latestPendingTime: NoWork,
          //最新的正在進(jìn)行中的任務(wù)
      earliestSuspendedTime: NoWork,
          //最老的被掛起的任務(wù)
      latestSuspendedTime: NoWork,
          //最新的被掛起的任務(wù)
      latestPingedTime: NoWork,
            
      pingCache: null,

      didError: false,
       //標(biāo)記整個(gè)應(yīng)用在渲染的過程中是否有錯(cuò)誤
      pendingCommitExpirationTime: NoWork,
      //正在提交的任務(wù)的ExpirationTime，也就是優(yōu)先級(jí)
      finishedWork: null,
      //在render階段已經(jīng)完成了的任務(wù)，在commit階段只會(huì)執(zhí)行finishedWork的任務(wù)
      timeoutHandle: noTimeout,
      //用來清理還沒有被觸發(fā)的計(jì)時(shí)器
      context: null,
      //頂層的context對(duì)象，只用在調(diào)用“renderSubTreeIntoContainer”的時(shí)候在有用
      pendingContext: null,
      hydrate,
      //應(yīng)用是否要和原來的dom節(jié)點(diǎn)進(jìn)行合并
      nextExpirationTimeToWorkOn: NoWork,
      //記錄下一次將要進(jìn)行的對(duì)應(yīng)的優(yōu)先級(jí)的任務(wù)
      expirationTime: NoWork,
      //當(dāng)前的優(yōu)先級(jí)的任務(wù)
      firstBatch: null,
      
      nextScheduledRoot: null,
        //鏈表的結(jié)構(gòu)，兩次react-Domrender渲染的。。節(jié)點(diǎn)的鏈表
      interactionThreadID: unstable_getThreadID(),
      // 交互的線程id
      memoizedInteractions: new Set(),
      //上次交互的線程id的Set對(duì)象
      pendingInteractionMap: new Map(),
      //進(jìn)行中的交互的線程的Map對(duì)象
    }: FiberRoot);