React Fiber樹的構建和替換過程講解

更新時間：2022年12月15日 15:30:16 作者：前端小二哥

React Fiber樹的創(chuàng)建和替換過程運用了雙緩存技術，直接將舊的 fiber 樹替換成新的 fiber 樹，這樣做的好處是省去了直接在頁面上渲染時的計算時間，避免計算量大導致的白屏、卡頓，現(xiàn)在你一定還不太理解，下面進行詳細講解,需要的朋友可以參考下

前言

React Fiber樹的創(chuàng)建和替換過程運用了雙緩存技術，即先在內存中創(chuàng)建 fiber 樹，待 fiber 樹創(chuàng)建完成以后，直接將舊的 fiber 樹替換成新的 fiber 樹，這樣做的好處是省去了直接在頁面上渲染時的計算時間，避免計算量大導致的白屏、卡頓，現(xiàn)在你一定還不太理解，下面進行詳細講解！

mount 過程

以一下demo為例進行講解：

function App() {
  const [num, add] = useState(0);
  return (
    <p onClick={() => add(num + 1)}>{num}</p>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'));

首次渲染時：

執(zhí)行 ReactDOM.render(<App/>, document.getElementById('root')); 創(chuàng)建一個應用的根節(jié)點 fiberRootNode 和 App 組件的根節(jié)點 rootFiber，fiberRootNode節(jié)點會通過 current 指針指向 rootFiber ；此時構建的 fiber 樹叫 current fiber 樹，沒有子節(jié)點；

在這里插入圖片描述

render 階段：

此階段會在內存中構建一顆 workInProgress fiber 樹，構建時會與 current fiber 樹進行 diff ,復用 current fiber 樹的 fiber 節(jié)點，被復用的 fiber 節(jié)點通過 alternate 指針連接；此時的 fiber 樹如下圖所示：

在這里插入圖片描述

commit 階段：

由于內容在內存中已經構建完成，下一步就是將內存中的fiber樹渲染成真實 DOM ，此后 React 底層將 fiberRootNode 的 current 指針指向了新構建的 fiber 樹，此時 workInprogress fiber 樹變成了current fiber 樹；
此時的 fiber 樹結構如下圖：

在這里插入圖片描述

update 過程

此時點擊，p 元素，此時狀態(tài)改變，會觸發(fā)更新，再次進入 render 階段，在內存中創(chuàng)建一棵 workInProgress fiber 樹，并且和 current fiber 樹進行 diff 復用 current fiber 樹節(jié)點，最后進入 commit 階段，將構建的fiber樹渲染到頁面上，此后 fiberRootNode 的 current 指針指向 workInProgress fiber 樹，更新后的 fiber 樹如下所示：

在這里插入圖片描述