前言

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

• render 階段：

此階段會(huì)在內(nèi)存中構(gòu)建一顆 workInProgress fiber 樹，構(gòu)建時(shí)會(huì)與 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)改變，會(huì)觸發(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 樹如下所示：

參考：React 技術(shù)揭秘

到此這篇關(guān)于React Fiber樹的構(gòu)建和替換過程的文章就介紹到這了,更多相關(guān)React Fiber樹內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！