漸進(jìn)式源碼解析React更新流程驅(qū)動(dòng)
正文
前面兩篇文章介紹了fiber架構(gòu)和workLoop如何調(diào)度。但是缺了一塊非常重要的地方，那就是開(kāi)發(fā)者寫(xiě)的代碼是如何對(duì)接到上面流程的？
在日常開(kāi)發(fā)中，我們只關(guān)心了如何寫(xiě)組件，但是寫(xiě)完的組件是如何被渲染到頁(yè)面當(dāng)中？又是如何驅(qū)動(dòng)更新流程？如果不知道這塊內(nèi)容，其實(shí)大家還是云里霧里的停留在概念層面。
所以這篇文章主要是從開(kāi)發(fā)者角度闡述開(kāi)發(fā)代碼->編譯->觸發(fā)更新流程的介紹。
這里的更新流程指schedule（調(diào)度）->reconciler（協(xié)調(diào)）->commit (渲染)
老規(guī)矩還是先制定5個(gè)小目標(biāo)：
- react組件編譯成什么了？
- reactElement元素是什么？
- 什么是雙緩存技術(shù)？
- react.createRoot().render()做了什么事情？
- 還有哪些更新方式對(duì)接到目前的更新流程當(dāng)中？
ok,我們一一解答：
一、react.createElement和ReactElement元素
首先我們書(shū)寫(xiě)的函數(shù)式組件、類組件、jsx等代碼全部會(huì)被babel-react編譯成react.createElement()的調(diào)用或者jsx()調(diào)用（取決于react版本）。
舉個(gè)栗子：
<div>
<ul>
<li key='1'>1</li>
<li key='2'>2</li>
<li key='3'>3</li>
</ul>
</div>
轉(zhuǎn)換成
React.createElement(
'div',
null,
React.createElement(
'ul',
null,
React.createElement(
'li',
{
key: '1'
},
'1'
),
React.createElement(
'li',
{
key: '2'
},
'2'
),
React.createElement(
'li',
{
key: '3'
},
'3'
)
)
);
接下來(lái)我們需要知道React.createElement內(nèi)部到底做了什么？源碼位置
內(nèi)部的實(shí)現(xiàn)其實(shí)很簡(jiǎn)單，就是處理傳入的type/config/children等參數(shù),再返回一個(gè)新的對(duì)象。
- 從config中分離出特殊屬性 key 和 ref
- 將普通屬性以及children添加到props中
- 最后返回一個(gè)對(duì)象，這個(gè)對(duì)象我們稱之為ReactElement元素
ReactElement數(shù)據(jù)結(jié)構(gòu)如下：
const element = {
$$typeof: REACT_ELEMENT_TYPE,
type,
key,
ref,
props,
};
- '$$typeof':ReactElement的標(biāo)識(shí)
- 'type':可能是'div' 'span'這樣的字符串標(biāo)簽，也可以是個(gè)函數(shù)(函數(shù)式組件)、類(類組件)
- 'key/ref/props': ReactElement的屬性
所以上述栗子的調(diào)用結(jié)果是下面的樹(shù)形結(jié)構(gòu)：
{
type: 'div',
key: null,
ref: null,
props: {
children: {
type: 'ul',
key: null,
ref: null,
props: {
children: [
{
type: 'li',
key: null,
ref: null,
props: {
children: '1'
}
},
{
type: 'li',
key: null,
ref: null,
props: {
children: '2'
}
},
{
type: 'li',
key: null,
ref: null,
props: {
children: '3'
}
}
]
}
}
}
}
到這里就已經(jīng)完成第一個(gè)和第二個(gè)小目標(biāo)。
不過(guò)在這里要多提一下，上述的樹(shù)形結(jié)構(gòu)，在react15版本及以前就可以直接拿來(lái)diff以及生成頁(yè)面，不過(guò)正如第一篇文章所說(shuō)，這樣會(huì)遇到很大的問(wèn)題（任務(wù)過(guò)重js執(zhí)行時(shí)間久，影響渲染）。
所以16之后做的事情，就是依據(jù)上述的樹(shù)形結(jié)構(gòu)進(jìn)行重構(gòu)，重構(gòu)出來(lái)的fiber數(shù)據(jù)結(jié)構(gòu)用于滿足異步渲染之需。
二、雙緩存技術(shù)
上篇文章中已經(jīng)介紹了fiber節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)，這里我們?cè)俳榻B下fiberRoot以及rootFiber。 fiberRoot源碼位置
FiberRoot數(shù)據(jù)結(jié)構(gòu)：
class FiberRootNode {
current: FiberNode;
container: any | null;
finishedWork: FiberNode | null;
pendingLanes: Lanes;
finishedLane: Lane;
pendingPassiveEffects: PendingPassiveEffects;
constructor(container: any | null, hostRootFiber: FiberNode) {
this.current = hostRootFiber;
this.container = container;
hostRootFiber.stateNode = this;
this.finishedWork = null;
this.pendingLanes = NoLanes;
this.finishedLane = NoLane;
this.pendingPassiveEffects = {
unmount: [],
update: []
};
}
}
其中很多屬性我們暫時(shí)無(wú)視，后續(xù)涉及到的時(shí)候會(huì)詳細(xì)講解，這里重點(diǎn)關(guān)注節(jié)點(diǎn)的關(guān)系。 rootFiber的數(shù)據(jù)結(jié)構(gòu)和普通的FiberNode節(jié)點(diǎn)區(qū)別不大，這里不再贅述~
整個(gè)React應(yīng)用有且只有一個(gè)fiberRoot
整個(gè)應(yīng)用中同時(shí)存在兩棵rootFiber樹(shù)
當(dāng)前頁(yè)面對(duì)應(yīng)的稱為currentFiber,另外一顆在內(nèi)存中構(gòu)建的稱為workInProgressFiber，它們通過(guò)alternate屬性連接。
fiberRoot中的current指針指向了currentFiber樹(shù)。
當(dāng)整個(gè)應(yīng)用更新完成，fiberRoot會(huì)修改current指針指向內(nèi)存中構(gòu)建好的workInProgressFiber。
圖形描述如下：
以上我們稱之為雙緩存技術(shù)，當(dāng)然這個(gè)技術(shù)不光用在react中，其他很多地方都有涉及，大家感興趣的話自行Google。
三、React初始化的執(zhí)行函數(shù)
在mount階段的時(shí)候，應(yīng)用是需要一個(gè)執(zhí)行函數(shù)的，而這個(gè)函數(shù)就是(源碼位置)
react.createRoot(root).render(<App/>)
root: 模版文件中的id為root的div<App>: 整個(gè)應(yīng)用的根組件
源碼簡(jiǎn)化后的代碼如下：
const createRoot = (container: Container) => {
const root = createContainer(container);
return {
render(element: ReactElementType) {
return updateContainer(element, root);
}
};
};
createRoot會(huì)返回一個(gè)對(duì)象，其中包含了render函數(shù)，我們具體看看createContainer做了哪些事情。
const createContainer = (container: Container) => {
// 創(chuàng)建rootFiber
const hostRootFiber = new FiberNode(HostRoot, {}, null);
// 創(chuàng)建fiberRoot
const root = new FiberRootNode(container, hostRootFiber);
hostRootFiber.updateQueue = createUpdateQueue();
return root;
};
react.createRoot()在內(nèi)部會(huì)去創(chuàng)建整個(gè)應(yīng)用唯一的fiberRoot和rootFiber，并進(jìn)行關(guān)聯(lián)。(如上述圖形結(jié)構(gòu))
render內(nèi)部執(zhí)行的是updateContainer(),我們查看下內(nèi)部實(shí)現(xiàn)：
const updateContainer = (
element: ReactElementType,
root: FiberRootNode
) => {
// mount時(shí)
const hostRootFiber = root.current;
// 添加update任務(wù)
const lane = requestUpdateLane();
const update = createUpdate<ReactElementType | null>(element, lane);
enqueueUpdate(
hostRootFiber?.updateQueue as UpdateQueue<ReactElementType | null>,
update
);
scheduleUpdateOnFiber(hostRootFiber, lane);
return element;
};
其中有很多地方我們此時(shí)無(wú)須關(guān)心，但是我們看到內(nèi)部調(diào)用了scheduleUpdateOnFiber， 而這個(gè)就是更新流程(schedule（調(diào)度）->reconciler（協(xié)調(diào)）->commit (渲染))的入口。
而這個(gè)入口不僅僅在初始化執(zhí)行函數(shù)中render調(diào)用會(huì)喚起，還有其他的方式：
- 類組件中setState -> scheduleUpdateOnFiber()
- 函數(shù)組件useState -> scheduleUpdateOnFiber()
至此，我們知道了開(kāi)發(fā)代碼->編譯->觸發(fā)更新流程的鏈路。
ok,以上就是文章的所有內(nèi)容了，我們總結(jié)下：
- react組件會(huì)被編譯成react.createElement的調(diào)用，而調(diào)用結(jié)果是一顆樹(shù)形結(jié)構(gòu)。
- react16之后會(huì)重構(gòu)增強(qiáng)這顆樹(shù)，變成fiber結(jié)構(gòu)。
- 在react應(yīng)用中，使用了雙緩存技術(shù)，用于更新。
- mount階段的執(zhí)行函數(shù)(createRoot().render)會(huì)創(chuàng)建fiberRoot并且喚起更新流程。
- 更新流程的喚起還有setState、useState等方式。
此篇文章完成了5個(gè)小目標(biāo)，相信大家對(duì)整體的鏈路會(huì)更加清晰，后續(xù)的文章，會(huì)進(jìn)一步深入到具體實(shí)現(xiàn)當(dāng)中，敬請(qǐng)期待~
以上就是漸進(jìn)式源碼解析React更新流程驅(qū)動(dòng)的詳細(xì)內(nèi)容，更多關(guān)于React更新流程驅(qū)動(dòng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼
本篇文章主要介紹了使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
React整個(gè)的渲染機(jī)制就是React會(huì)調(diào)用render()函數(shù)構(gòu)建一棵Dom樹(shù)，在state/props發(fā)生改變的時(shí)候，render()函數(shù)會(huì)被再次調(diào)用渲染出另外一棵樹(shù)，重新渲染所有的節(jié)點(diǎn)，構(gòu)造出新的虛擬Dom tree2022-11-11
基于React實(shí)現(xiàn)無(wú)限滾動(dòng)表格
以文本為例,為了實(shí)現(xiàn)無(wú)限循環(huán)的視覺(jué)效果,我們需要準(zhǔn)備兩段相同的文本,并讓第二段文本的頭部銜接在第一段文本的尾部,同時(shí),為兩段文本設(shè)置相同的滾動(dòng)動(dòng)畫(huà),本文給大家介紹了基于React實(shí)現(xiàn)無(wú)限滾動(dòng)表格,需要的朋友可以參考下2023-11-11
本文主要介紹了React的相關(guān)知識(shí)，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
lazy是React提供的懶（動(dòng)態(tài)）加載組件的方法，React.lazy()，路由組件代碼會(huì)被分開(kāi)打包，能減少打包體積、延遲加載首屏不需要渲染的組件，依賴內(nèi)置組件Suspense標(biāo)簽的fallback屬性，給lazy加上loading指示器組件，Suspense目前只和lazy配合實(shí)現(xiàn)組件等待加載指示器的功能2023-03-03
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你對(duì)這些問(wèn)題還不是很明白，那么可以在這篇文章中找到答案2022-12-12
本文主要介紹了React中井字棋游戲的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Objects are not valid as a Rea
這篇文章主要為大家介紹了Objects are not valid as a React child報(bào)錯(cuò)解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React?Native?中實(shí)現(xiàn)倒計(jì)時(shí)功能
這篇文章主要介紹了React?Native中實(shí)現(xiàn)倒計(jì)時(shí)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08