快捷導(dǎo)航

React Fiber樹的構(gòu)建和替換過程講解

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

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

前言

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

mount 過程

以一下demo為例進(jìn)行講解：

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

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

首次渲染時(shí)：

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

在這里插入圖片描述

render 階段：

此階段會在內(nèi)存中構(gòu)建一顆 workInProgress fiber 樹，構(gòu)建時(shí)會與 current fiber 樹進(jìn)行 diff ,復(fù)用 current fiber 樹的 fiber 節(jié)點(diǎn)，被復(fù)用的 fiber 節(jié)點(diǎn)通過 alternate 指針連接；此時(shí)的 fiber 樹如下圖所示：

在這里插入圖片描述

commit 階段：

由于內(nèi)容在內(nèi)存中已經(jīng)構(gòu)建完成，下一步就是將內(nèi)存中的fiber樹渲染成真實(shí) DOM ，此后 React 底層將 fiberRootNode 的 current 指針指向了新構(gòu)建的 fiber 樹，此時(shí) workInprogress fiber 樹變成了current fiber 樹；
此時(shí)的 fiber 樹結(jié)構(gòu)如下圖：

在這里插入圖片描述

update 過程

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

在這里插入圖片描述