快捷導(dǎo)航

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

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

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

前言

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

mount 過(guò)程

以一下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)會(huì)通過(guò) current 指針指向 rootFiber ；此時(shí)構(gòu)建的 fiber 樹(shù)叫 current fiber 樹(shù)，沒(méi)有子節(jié)點(diǎn)；

在這里插入圖片描述

render 階段：

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

在這里插入圖片描述

commit 階段：

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

在這里插入圖片描述

update 過(guò)程

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

在這里插入圖片描述