VDOM（虛擬dom）

react和vue都是基于vdom的前端框架。

web界面由DOM樹(shù)來(lái)構(gòu)建，當(dāng)其中一部分發(fā)生變化時(shí)，其實(shí)就是對(duì)應(yīng)的某個(gè)節(jié)點(diǎn)發(fā)生了變化。

若一次操作中有十次更新DOM的動(dòng)作，虛擬DOM不會(huì)立即操作DOM，而是將這十次更新的diff內(nèi)容保存到本地的一個(gè)js對(duì)象中，最終將這個(gè)js對(duì)象一次性attach到DOM樹(shù)上，再進(jìn)行后續(xù)的操作。

用js對(duì)象模擬DOM節(jié)點(diǎn)的好處是：

• 頁(yè)面的更新可以先全部反映在js對(duì)象（虛擬DOM）上，精準(zhǔn)的對(duì)比關(guān)心的屬性，避免大量無(wú)謂的計(jì)算。等更新完成后，再將最終的js對(duì)象映射成真是的DOM，交由瀏覽器去繪制。
• 為應(yīng)用帶來(lái)的跨平臺(tái)的能力，不再僅僅局限于瀏覽器端。比如：React-Native、canvas等。

//虛擬dom對(duì)象
{
    type: 'div',
    props: {
        id: 'aaa',
        className: ['bbb', 'ccc'],
        onClick: function() {}
    },
    children: []
}

react中，jsx由babel轉(zhuǎn)義再經(jīng)過(guò)render后生成我們想要的VDOM（虛擬DOM）。

Fiber架構(gòu)

react15的時(shí)候，和 vue 的渲染流程還是很像的，都是遞歸渲染 vdom，增刪改 dom 就行。

但是因?yàn)闋顟B(tài)管理的差異導(dǎo)致了架構(gòu)的差異。react的setState會(huì)渲染整個(gè)vdom，而一個(gè)應(yīng)用的所有 vdom 可能是很龐大的，計(jì)算量就可能很大。

瀏覽器里 js 計(jì)算時(shí)間太長(zhǎng)是會(huì)阻塞渲染的，會(huì)占用每一幀的動(dòng)畫、重繪重排的時(shí)間，這樣動(dòng)畫就會(huì)卡頓。

那能不能把計(jì)算量拆分一下，每一幀計(jì)算一部分，不要阻塞動(dòng)畫的渲染呢？

順著這個(gè)思路，react 就改造為了 fiber 架構(gòu)，目標(biāo)是打斷計(jì)算，分多次進(jìn)行。

渲染的時(shí)候不要直接更新到 dom 了，只找到變化的部分，打個(gè)增刪改的標(biāo)記，創(chuàng)建好 dom，等全部計(jì)算完了一次性更新到 dom 就好了。

初始化渲染

根據(jù) React Element 生成對(duì)應(yīng)的 Fiber 樹(shù)

1.根據(jù) React Element 生成對(duì)應(yīng)的 Fiber 樹(shù)

首次執(zhí)行ReactDOM.render 會(huì)創(chuàng)建fiberRoot 和 rootFiber。

1. fiberRoot：整個(gè)應(yīng)用的根節(jié)點(diǎn)（只能有一個(gè)）
2. rootFiber：組件樹(shù)的根節(jié)點(diǎn)（可以有多個(gè)）

2.根據(jù)組件返回的JSX在內(nèi)存中依次創(chuàng)建Fiber節(jié)點(diǎn)，并連接在一起構(gòu)建形成Fiber樹(shù)，被稱為workInProgress Fiber樹(shù)。最后以 workInProgress 作為最新的渲染樹(shù)，fiberRoot 的 current 指針指向 workInProgress 使其變?yōu)?current Fiber 樹(shù)。到此完成初始化流程。

1. workInProgress：正在內(nèi)存中構(gòu)建的 Fiber 樹(shù)稱為 workInProgress Fiber樹(shù)。在一次更新中，所有的更新都是發(fā)生在 workInProgress 樹(shù)上。在一次更新之后，workInProgress 樹(shù)上的狀態(tài)是最新的狀態(tài)，那么它將變成 current 樹(shù)用于渲染視圖。
2. current：正在視圖層渲染的樹(shù)叫做 current 樹(shù)。

更新時(shí)

render階段，創(chuàng)建 dom，打上增刪改的 tag，等全部計(jì)算完之后，commit 階段一次性更新到 dom。

render階段

beginWork和completeWork階段會(huì)循環(huán)最新的jsx生成的虛擬dom，通過(guò)對(duì)比虛擬dom和current Fiber樹(shù)生成workinProgress Fiber樹(shù)。

beginWork

創(chuàng)建本次循環(huán)主體的子Fiber節(jié)點(diǎn)

• mount（首屏渲染）時(shí)創(chuàng)建子Fiber節(jié)點(diǎn)，并返回改新建節(jié)點(diǎn)；
• update時(shí)若不滿足復(fù)用條件，則與mount時(shí)一樣創(chuàng)建新的子fiber節(jié)點(diǎn)，并diff出相應(yīng)的effTag掛在FIber節(jié)點(diǎn)上，并返回該新建節(jié)點(diǎn)；
• updata時(shí)若滿足復(fù)用條件，且判斷仍需處理其子節(jié)點(diǎn)的后代，則返回復(fù)用后的子Fiber節(jié)點(diǎn)
• updata時(shí)若滿足復(fù)用條件，且判斷不需繼續(xù)處理其子節(jié)點(diǎn)的后代，則直接返回null值；

completeWork

構(gòu)建或更新DOM節(jié)點(diǎn)

• 構(gòu)建過(guò)程中，會(huì)自下而上將子節(jié)點(diǎn)插入到當(dāng)前節(jié)點(diǎn)
• 更新過(guò)程中，會(huì)計(jì)算DOM 節(jié)點(diǎn)的屬性，一旦屬性需要更新，會(huì)為DOM節(jié)點(diǎn)對(duì)應(yīng)的workINProgress節(jié)點(diǎn)標(biāo)記Update的effectTag

自下而上收集effectList，最終收集到root上

Diff到底是誰(shuí)跟誰(shuí)比？

Diff 是 vdom 和 current Fiber 對(duì)比，生成 workInProgressFiber

effectTag與effectList

render階段不會(huì)真正操作dom，只會(huì)創(chuàng)建dom然后打個(gè)effectTag的增刪改標(biāo)記。commit階段就根據(jù)標(biāo)記來(lái)更新dom就可以了。

但是commit階段要在遍歷一次fiber來(lái)查找有effectTag的節(jié)點(diǎn)，更新dom嗎？

當(dāng)然沒(méi)問(wèn)題，但是顯然很低效。完全可以把有 effectTag 的節(jié)點(diǎn)收集到一個(gè)鏈表里，然后 commit 階段直接遍歷這個(gè)鏈表就行了。這個(gè)鏈表叫做 effectList。

react 會(huì)在 commit 階段遍歷 effectList，根據(jù) effectTag 來(lái)增刪改 dom。

這個(gè)隊(duì)列叫做 effectList。

commit階段

render階段找到變化的部分，創(chuàng)建dom，打上增刪改的tag，等全部計(jì)算完之后，commit階段一次性更新到dom。

before mutation階段（執(zhí)行DOM操作前）

遍歷effectList，依次執(zhí)行：

1.處理DOM節(jié)點(diǎn)渲染/刪除后的autoFocus、blur邏輯

2.調(diào)用getSnapshotBeforeUpdate生命周期鉤子

3.調(diào)度useEffect mutation階段（執(zhí)行DOM操作）

遍歷 effectList 來(lái)更新 dom

layout階段（執(zhí)行DOM操作后）

因?yàn)檫@個(gè)階段已經(jīng)可以拿到布局信息了，會(huì)同步調(diào)用 useLayoutEffect 的回調(diào)函數(shù)。而且這個(gè)階段可以拿到新的 dom 節(jié)點(diǎn)，還會(huì)更新下 ref。

到此這篇關(guān)于React深入了解原理的文章就介紹到這了,更多相關(guān)React原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論