React 元件背後的資料結構

mstmahmuda11121

在協調期間，呼叫元件樹的每個元件，並根據傳回元素的物件表示建立纖程節點並將其合併到樹結構中。每個 React 元素都會接收一個對應的 Fiber 節點，與元素不同，該節點不會在每次渲染時重新建立。 正是這些光纖節點封裝了「工作單元」。對於 ClickCounter，這將包括呼叫函數並指派 useState 掛鉤，儘管必須在 span DOM 中進行更改。 這是光纖架構的真正技巧：由於我們可以將渲染工作分解為獨立的工作單元，因此我們可以輕鬆追蹤、排程、暫停或取消它們。 當 React 元素在初始渲染期間傳輸到 Fiber 節點時，其資料會被複製，然後 React 會重複使用 Fiber 節點，並且僅進行必要的更新以使其與對應元素保持同步。此外，如果在渲染期間不再傳回對應的 React 元素，Fiber 節點可以在清單中重新排序（這是 key prop 的意思）或刪除。


[Fiber 節點的所有活動的概述可以在ChildReconciler函數中找到。 我們的 ClickCounter 應用程 沙烏地阿拉伯 電話號碼 式的 Fiber 樹可以表示如下： Image-1-React Fiber_幕後花絮 所有纖程節點都表示為一個鍊錶，其中包含對對應子節點、兄弟節點或返回節點的參考。 正在進行的工作樹 初始渲染後，React 會建立一個反映應用程式目前狀態的 Fiber 樹。這棵樹稱為當前樹。一旦此狀態發生變化，就會建立一棵 workInProgress 樹，它表示 DOM 中尚未表示的新狀態。 渲染週期中要完成的工作僅在 workInProgress 樹上完成。 React 迭代目前樹並為 workInProgress 樹中的每個節點建立一個克隆。 React 反過來透過渲染 React 元件來接收這個新節點的資料。只有當所有元件都已渲染並且對 workInProgress 樹進行了相應更新時，它才會被渲染到 DOM 中，並且該樹將成為新的當前樹。




React 的另一個核心原則是一致性。因此，渲染 DOM 被視為不允許部分更新的原子操作。 workInProgress 樹充當初步草案，在所有變更實際處理完畢之前，它對應用程式的使用者保持隱藏狀態。這也反映了上述的拉取方法，因為新資料不會由 React 直接轉換為 DOM 更新，而是 React 決定在準備好最終渲染新狀態之前必須滿足哪些條件。 工作循環 現在，我們點擊按鈕，呼叫 setClickCount，我們傳遞的函數將在 React 開始調度工作單元之前新增到更新佇列中。 React 使用 requestIdleCallback API 並詢問 JavaScript 主執行緒「如果您還有時間，請告訴我，然後完成以下任務」。主執行緒傳回 React 可用的時間。 React 檢查是否仍有工作單元需要處理，並透過 shouldYield() 檢查主執行緒是否仍有足夠的可用時間，如果滿足這兩個條件，則處理下一個工作單元。