快捷導(dǎo)航

React深入了解原理

更新時(shí)間：2022年07月29日 15:39:58 作者：_語墨

React是用于構(gòu)建用戶界面的JavaScript庫，?[1]??起源于Facebook的內(nèi)部項(xiàng)目，該公司對(duì)市場(chǎng)上所有?JavaScript?MVC框架都不滿意，決定自行開發(fā)一套，用于架設(shè)Instagram的網(wǎng)站

VDOM（虛擬dom）

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

web界面由DOM樹來構(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樹上，再進(jìn)行后續(xù)的操作。

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

頁面的更新可以先全部反映在js對(duì)象（虛擬DOM）上，精準(zhǔn)的對(duì)比關(guān)心的屬性，避免大量無謂的計(jì)算。等更新完成后，再將最終的js對(duì)象映射成真是的DOM，交由瀏覽器去繪制。
為應(yīng)用帶來的跨平臺(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)過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í)間太長是會(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 樹

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

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

fiberRoot：整個(gè)應(yīng)用的根節(jié)點(diǎn)（只能有一個(gè)）
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 樹。到此完成初始化流程。

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

更新時(shí)

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

render階段

beginWork和completeWork階段會(huì)循環(huán)最新的jsx生成的虛擬dom，通過對(duì)比虛擬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)建過程中，會(huì)自下而上將子節(jié)點(diǎn)插入到當(dāng)前節(jié)點(diǎn)
更新過程中，會(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到底是誰跟誰比？

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

effectTag與effectList

render階段不會(huì)真正操作dom，只會(huì)創(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 會(huì)在 commit 階段遍歷 effectList，根據(jù) effectTag 來增刪改 dom。

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