正在進行的工作樹
幕後花絮（一） 首先，複製 HostRoot 節點。指向目前樹中子節點的指標也被複製。 ClickCounter 節點將傳回下一個「工作單元」且計時器將更新： Image-3-React Fiber_幕後花絮（一） ClickCounter 有一個也被複製的 UpdateQueue。 React 執行更新，更改 ClickCounter 節點的狀態，並使用效果標記對其進行標記，指示需要進行 DOM 更改。為了進一步遍歷樹，React 使用更新後的 State 呼叫 ClickCounter 函數並接收子元素陣列。 現在將它們與目前樹的節點進行比較（因為我們已經設定了明確的 key prop，因此用於比較）來決定是否可以採用子節點。在我們的例子中，孩子們沒有改變並且被克隆： Image-4-React Fiber_幕後花絮（一） 父節點的狀態變化會導致span節點的子節點也會發生變化，這裡也會加入一個效果標籤。在工作循環的下一個迭代中，React 確定沒有足夠的時間來進行下一個工作單元，再次呼叫 requestIdleCallback 並回調剩餘工作，並將控制權傳回給主執行緒。 現在可以處理主事件循環中的其他任務。例如，如果進行了動畫或佈局更改，現在就可以對其進行編輯。 React 不再阻塞主線程，即使在 沙烏地阿拉伯 電話號碼 觸發的渲染週期之後應用程式仍保持回應。 當主執行緒完成這項工作後，Reacts Callback 就會被調用，渲染就可以完成了。為此，子節點呼叫其父節點的complete，並將效果標籤中記錄的變更新增至其父節點的變更中。 最終的效果清單現在已附加到 HostRoot，它被標記為pendingCommit，並為下一步對 DOM 進行的變更提供基礎。 如前所述，這些都是作為原子提交進行的，因此不會出現 UI 不一致的情況。一旦 DOM 對應於 workInProgress 樹，它就成為目前樹。為此，只需彎曲當前指標並重複使用現有物件。 值得注意的是，由於 Fiber 使得暫停渲染成為可能，React可以為不同的更新分配不同的優先權。
https://sstfmakebbs.files.wordpress.com/2024/04/j.png?w=487
為此，React 從版本 16 開始提供了生命週期方法它們可用於定義一個包裝器元件，用於捕獲運行時子元件中發生的異常，並且可以定義回退 UI。 例如，讓我們在 ClickCounter 元件中建立一個令人討厭的錯誤，這會導致在第三次點擊後引發異常： 元件之間現在有另一個節點。如果工作循環在執行效果清單時捕獲異常，則會在導致錯誤的 Fiber 節點上呼叫captureCommitPhaseError函數，並迭代其父節點，直到找到定義 ErrorBoundary 生命週期方法的元件。 Image-6-React Fiber_幕後花絮（一） 反應纖維－結論 我們看到 React Fiber 將 React 範式向前推進了一步，並為我們提供了有助於建立複雜 UI 的最佳化。 透過將渲染過程分解為更小的獨立單元，React 可以更有效地使用主 JavaScript 執行緒提供的資源，從而使我們開發人員能夠編寫效能更高、響應更快的應用程式。錯誤邊界也使我們的 React 應用程式更具彈性和用戶友好性。
頁:
[1]