React深入了解原理
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。
- 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á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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解React Native頂|底部導(dǎo)航使用小技巧
本篇文章主要介紹了詳解React Native頂|底部導(dǎo)航使用小技巧 ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09React + webpack 環(huán)境配置的方法步驟
本篇文章主要介紹了React + webpack 環(huán)境配置的方法步驟,詳解的介紹了開發(fā)環(huán)境的配置搭建,有興趣的可以了解一下2017-09-09react中實(shí)現(xiàn)搜索結(jié)果中關(guān)鍵詞高亮顯示
這篇文章主要介紹了react中實(shí)現(xiàn)搜索結(jié)果中關(guān)鍵詞高亮顯示,使用react實(shí)現(xiàn)要比js簡單很多,方法都是大同小異,具體實(shí)現(xiàn)代碼大家跟隨腳本之家小編一起看看吧2018-07-07Ant?Design?組件庫按鈕實(shí)現(xiàn)示例詳解
這篇文章主要介紹了Ant?Design?組件庫按鈕實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪</P><P><BR>2022-08-08