VDOM（虛擬dom）

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

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

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

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

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

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

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

Fiber架構(gòu)

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

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

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

那能不能把計(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 生成對應(yīng)的 Fiber 樹

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

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

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

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

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

更新時(shí)

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

render階段

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

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)建過程中，會自下而上將子節(jié)點(diǎn)插入到當(dāng)前節(jié)點(diǎn)
• 更新過程中，會計(jì)算DOM 節(jié)點(diǎn)的屬性，一旦屬性需要更新，會為DOM節(jié)點(diǎn)對應(yīng)的workINProgress節(jié)點(diǎn)標(biāo)記Update的effectTag

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

Diff到底是誰跟誰比？

Diff 是 vdom 和 current Fiber 對比，生成 workInProgressFiber

effectTag與effectList

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

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

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

react 會在 commit 階段遍歷 effectList，根據(jù) effectTag 來增刪改 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 來更新 dom

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

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

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

最新評論