fiberRootNode是整個應(yīng)用的根節(jié)點(diǎn)，HostRootFiber是所在組件樹的根節(jié)點(diǎn)。

在上面我們之所以要區(qū)分fiberRootNode和HostRootFiber是因為在整個React應(yīng)用程序中開發(fā)者可以多次多次調(diào)用render方法渲染不同的組件樹，它們會有不同的HostRootFiber，但是整個應(yīng)用的根節(jié)點(diǎn)只有一個，那就是fiberRootNode。

執(zhí)行 ReactDOM.createRoot 會創(chuàng)建如圖所示結(jié)構(gòu)：

由于是首屏渲染階段，頁面中還沒有掛載任何DOM節(jié)點(diǎn)，所以fiberRootNode.current指向的HostRootFiber沒有任何子Fiber節(jié)點(diǎn)（即current Fiber樹為空）。

當(dāng)前僅有一個HostRootFiber，對應(yīng)"首屏渲染時只有根節(jié)點(diǎn)的空白畫面"。

接下來進(jìn)入render階段，根據(jù)組件返回的JSX在內(nèi)存中依次構(gòu)建創(chuàng)建Fiber節(jié)點(diǎn)并連接在一起構(gòu)建Fiber樹，被稱為workInProgress Fiber樹。

在構(gòu)建workInProgress Fiber樹時會嘗試復(fù)用current Fiber樹中已有的Fiber節(jié)點(diǎn)內(nèi)的屬性，（在首屏渲染時，只有HostRootFiber），也可以理解為首屏渲染時，它以自己的身份生成了一個workInProgress 樹只不過還是HostRootFiber（HostRootFiber.alternate。

基于DFS（深度優(yōu)先搜索）依次生成的workInProgress節(jié)點(diǎn)，并連接起來構(gòu)成wip 樹的過程如圖所示：

上圖中已構(gòu)建完的workInProgress Fiber樹會在commit階段被渲染到頁面。

等到頁面渲染完成時，workInProgress Fiber樹會替換之前的current Fiber樹，進(jìn)而fiberRootNode的current指針會指向新的current Fiber樹。

完成雙緩存樹的切換工作，曾經(jīng)的Wip Fiber樹變?yōu)閏urrent Fiber樹。

過程如圖所示：

和mount時一樣，workInProgress Fiber的創(chuàng)建可以復(fù)用current Fiber樹對應(yīng)節(jié)點(diǎn)的數(shù)據(jù)，這個決定是否服用的過程就是Diff算法， 后面章節(jié)會詳細(xì)講解。

接下來，我們來看看用原理，在源碼中它是如何實現(xiàn)的。

Reconciler工作的階段在 React 內(nèi)部被稱為 render 階段，ClassComponent 的render函數(shù)、Function Component函數(shù)本身也都在 render 階段被調(diào)用。

根據(jù)Scheduler調(diào)度的結(jié)果不同，render階段可能開始于performSyncWorkOnRoot或performConcurrentWorkOnRoot方法的調(diào)用。

也就是說React在執(zhí)行render階段的初期會依賴于Scheduler（調(diào)度器）的結(jié)果來判斷執(zhí)行哪個方法，比如Scheduler（調(diào)度器）會根據(jù)任務(wù)的優(yōu)先級選擇執(zhí)行performSyncWorkOnRoot或performConcurrentWorkOnRoot方法。這取決于任務(wù)的類型和優(yōu)先級。同步任務(wù)通常具有較高優(yōu)先級，需要立即執(zhí)行，而并發(fā)任務(wù)會在空閑時間段執(zhí)行以避免阻塞主線程。

這里補(bǔ)充一下，調(diào)度器可能的執(zhí)行結(jié)果，以用來判斷執(zhí)行什么入口函數(shù)：

如果不知道調(diào)度器的執(zhí)行結(jié)構(gòu)都有哪幾類，可以跳過這段代碼向下看：

現(xiàn)在還不需要學(xué)習(xí)這兩個方法，只需要知道在這兩個方法中會調(diào)用performUnitOfWork方法就好。

// performSyncWorkOnRoot會調(diào)用該方法function workLoopSync() {  while (workInProgress !== null) {    performUnitOfWork(workInProgress);  }}// performConcurrentWorkOnRoot會調(diào)用該方法function workLoopConcurrent() {  while (workInProgress !== null && !shouldYield()) {    performUnitOfWork(workInProgress);  }}

可以看到，它們唯一的區(qū)別就是是否會調(diào)用shouldYield。如果當(dāng)前瀏覽器幀沒有剩余時間，shouldYield會終止循環(huán)，直到瀏覽器有空閑時間再繼續(xù)遍歷。

也就說當(dāng)更新正在進(jìn)行時，如果有"更高優(yōu)先級的更新"產(chǎn)生，則會終端當(dāng)前更新，優(yōu)先處理高優(yōu)先級更新。

高優(yōu)先級的更新比如："鼠標(biāo)懸停"，"文本框輸入"等用戶更易感知的操作。

workInProgress代表當(dāng)前正在工作的一個fiberNode，它是一個全局的指針，指向當(dāng)前正在工作的fiberNode，一般是workInProgress。

performUnitOfWork方法會創(chuàng)建下一個Fiber節(jié)點(diǎn)，并賦值給workInProgress，并將workInProgress與已經(jīng)創(chuàng)建好的Fiber節(jié)點(diǎn)連接起來構(gòu)成Fiber樹。

這里為什么指向的是 workInProgress 呢？ 因為在每次渲染更新時，即將展示到界面上的是 workInProgress 樹，只有在首屏渲染的時候它才為空。

Fiber Reconciler是從Stack Reconciler重構(gòu)而來，通過遞歸遍歷的方式實現(xiàn)可中斷的遞歸。 因為可以把performUnitOfWork方法分為兩部分："遞"和"歸"。

"遞"階段會從HostRootFiber開始向下以 DFS 的方式遍歷，為遍歷到的每個fiberNode執(zhí)行beginWork方法。該方法會根據(jù)傳入的fiberNode創(chuàng)建下一級fiberNode。

當(dāng)遍歷到葉子元素（不包含子fiberNode）時，performUnitOfWork就會進(jìn)入"歸"的階段。

"歸"階段會調(diào)用completeWork方法處理fiberNode。當(dāng)某個fiberNode執(zhí)行完complete方法后，如果其存在兄弟fiberNode（fiberNode.sibling !== null），會進(jìn)入其兄弟fiber的"遞階段"。如果不存在兄弟fiberNode，會進(jìn)入父fiberNode的"歸"階段。

遞階段和歸階段會交錯執(zhí)行直至HostRootFiber的"歸"階段。到此，render階段的工作就結(jié)束了。

舉一個例子：

function App() {  return (    
      
1229
      jasonshu    
  )}const root = document.querySelector("#root");ReactDOM.createRoot(root).render();

當(dāng)執(zhí)行完深度優(yōu)先搜索之后形成的workInProgress樹。

圖中的數(shù)組是遍歷過程中的順序，可以看到，遍歷的過程中會從應(yīng)用的根節(jié)點(diǎn)RootFiberNode開始，依次執(zhí)行beginWork和completeWork，最后形成一顆Fiber樹，每個節(jié)點(diǎn)以child和return項鏈。

注意：當(dāng)遍歷到只有一個子文本節(jié)點(diǎn)的Fiber時，該Fiber節(jié)點(diǎn)的子節(jié)點(diǎn)不會執(zhí)行beginWork和completeWork，如圖中的"jasonshu"文本節(jié)點(diǎn)。這是react的一種優(yōu)化手段

剛剛提到：workInProgress代表當(dāng)前正在工作的一個fiberNode，它是一個全局的指針，指向當(dāng)前正在工作的fiberNode，一般是workInProgress。

// 該函數(shù)用于調(diào)度和執(zhí)行 FiberNode 樹的更新和渲染過程// 該函數(shù)的作用是處理 React 程序中更新請求，計算 FiberNode 樹中的每個節(jié)點(diǎn)的變化，并把這些變化同步到瀏覽器的DOM中function workLoop() {  while (workInProgress !== null) {    // 開始執(zhí)行每個工作單元的工作    performUmitOfWork(workInProgress);  }}

知道了beginWork和completeWork它們是怎樣的流程后，我們再來看它是如何實現(xiàn)的：

這段代碼主要計算FiberNode節(jié)點(diǎn)的變化，更新workInProgress，beginWork函數(shù)的最初運(yùn)行也是在下面這個函數(shù)中，同時它也完成遞和歸兩個階段的操作。

// 在這個函數(shù)中，React 會計算 FiberNode 節(jié)點(diǎn)的變化，并更新 workInProgressfunction performUmitOfWork(fiber: FiberNode) {  // 如果有子節(jié)點(diǎn)，就一直遍歷子節(jié)點(diǎn)  const next = beginWork(fiber);  // 遞執(zhí)行完之后，需要更新下工作單元的props  fiber.memoizedProps = fiber.pendingProps;  // 沒有子節(jié)點(diǎn)的 FiberNode 了，代表遞歸到最深層了。  if (next === null) {    completeUnitOfWork(fiber);  } else {  // 如果有子節(jié)點(diǎn)的 FiberNode，則更新子節(jié)點(diǎn)為新的 fiberNode 繼續(xù)執(zhí)行    workInProgress = next;  }}

在下面的函數(shù)中主要進(jìn)行歸的操作：

// 主要進(jìn)行歸的過程，向上遍歷父節(jié)點(diǎn)以及兄弟，更新它們節(jié)點(diǎn)的變化，并更新 workInProgressfunction completeUnitOfWork(fiber: FiberNode) {  let node: FiberNode | null = fiber;  do {    // 歸：沒有子節(jié)點(diǎn)之后開始向上遍歷父節(jié)點(diǎn)    completeWork(node);    const sibling = node.sibling;    if (sibling !== null) {      // 有兄弟節(jié)點(diǎn)時，將指針指到兄弟節(jié)點(diǎn)      workInProgress = sibling;      return;    }    // 兄弟節(jié)點(diǎn)不存在時，遞歸應(yīng)該繼續(xù)往上指到父親節(jié)點(diǎn)    node = node.return;    workInProgress = node;  } while (node !== null);}

到此，Reconciler的工作架構(gòu)架子我們就搭完了。

接下來我們來講在構(gòu)建過程中每個Fiber節(jié)點(diǎn)具體是如何創(chuàng)建的呢？在下一篇會詳細(xì)講解beginWork和completeWork是如何實現(xiàn)的？會正式進(jìn)入render階段的實現(xiàn)了。

關(guān)鍵詞：