React 元件背後的資料結構
在協調期間，呼叫元件樹的每個元件，並根據傳回元素的物件表示建立纖程節點並將其合併到樹結構中。每個 React 元素都會接收一個對應的 Fiber 節點，與元素不同，該節點不會在每次渲染時重新建立。 正是這些光纖節點封裝了「工作單元」。對於 ClickCounter，這將包括呼叫函數並指派 useState 掛鉤，儘管必須在 span DOM 中進行更改。 這是光纖架構的真正技巧：由於我們可以將渲染工作分解為獨立的工作單元，因此我們可以輕鬆追蹤、排程、暫停或取消它們。 當 React 元素在初始渲染期間傳輸到 Fiber 節點時，其資料會被複製，然後 React 會重複使用 Fiber 節點，並且僅進行必要的更新以使其與對應元素保持同步。此外，如果在渲染期間不再傳回對應的 React 元素，Fiber 節點可以在清單中重新排序（這是 key prop 的意思）或刪除。沙烏地阿拉伯 電話號碼 式的 Fiber 樹可以表示如下： Image-1-React Fiber_幕後花絮 所有纖程節點都表示為一個鍊錶，其中包含對對應子節點、兄弟節點或返回節點的參考。 正在進行的工作樹 初始渲染後，React 會建立一個反映應用程式目前狀態的 Fiber 樹。這棵樹稱為當前樹。一旦此狀態發生變化，就會建立一棵 workInProgress 樹，它表示 DOM 中尚未表示的新狀態。 渲染週期中要完成的工作僅在 workInProgress 樹上完成。 React 迭代目前樹並為 workInProgress 樹中的每個節點建立一個克隆。 React 反過來透過渲染 React 元件來接收這個新節點的資料。只有當所有元件都已渲染並且對 workInProgress 樹進行了相應更新時，它才會被渲染到 DOM 中，並且該樹將成為新的當前樹。
https://sstfmakebbs.files.wordpress.com/2024/04/j.png?w=487
React 的另一個核心原則是一致性。因此，渲染 DOM 被視為不允許部分更新的原子操作。 workInProgress 樹充當初步草案，在所有變更實際處理完畢之前，它對應用程式的使用者保持隱藏狀態。這也反映了上述的拉取方法，因為新資料不會由 React 直接轉換為 DOM 更新，而是 React 決定在準備好最終渲染新狀態之前必須滿足哪些條件。 工作循環 現在，我們點擊按鈕，呼叫 setClickCount，我們傳遞的函數將在 React 開始調度工作單元之前新增到更新佇列中。 React 使用 requestIdleCallback API 並詢問 JavaScript 主執行緒「如果您還有時間，請告訴我，然後完成以下任務」。主執行緒傳回 React 可用的時間。 React 檢查是否仍有工作單元需要處理，並透過 shouldYield() 檢查主執行緒是否仍有足夠的可用時間，如果滿足這兩個條件，則處理下一個工作單元。
頁:
[1]