人人都能讀懂的react源碼解析(大廠高薪必備)
7.commit階段(聽(tīng)說(shuō)renderer幫我們打好標(biāo)記了,映射真實(shí)節(jié)點(diǎn)吧)
視頻課程&調(diào)試demos
視頻課程的目的是為了快速掌握react源碼運(yùn)行的過(guò)程和react中的scheduler砰碴、reconciler馆蠕、renderer苟蹈、fiber等寂呛，并且詳細(xì)debug源碼和分析，過(guò)程更清晰。
視頻課程：進(jìn)入課程
demos：demo
課程結(jié)構(gòu):
- 開(kāi)篇(聽(tīng)說(shuō)你還在艱難的啃react源碼)
- react心智模型(來(lái)來(lái)來(lái),讓大腦有react思維吧)
- Fiber(我是在內(nèi)存中的dom)
- 從legacy或concurrent開(kāi)始(從入口開(kāi)始,然后讓我們奔向未來(lái))
- state更新流程(setState里到底發(fā)生了什么)
- render階段(厲害了,我有創(chuàng)建Fiber的技能)
- commit階段(聽(tīng)說(shuō)renderer幫我們打好標(biāo)記了,映射真實(shí)節(jié)點(diǎn)吧)
- diff算法(媽媽再也不擔(dān)心我的diff面試了)
- hooks源碼(想知道Function Component是怎樣保存狀態(tài)的嘛)
- scheduler&lane模型(來(lái)看看任務(wù)是暫停、繼續(xù)和插隊(duì)的)
- concurrent mode(并發(fā)模式是什么樣的)
- 手寫(xiě)迷你react(短小精悍就是我)
在render階段的末尾會(huì)調(diào)用commitRoot(root);進(jìn)入commit階段蚊惯，這里的root指的就是fiberRoot，然后會(huì)遍歷render階段生成的effectList灵临，effectList上的Fiber節(jié)點(diǎn)保存著對(duì)應(yīng)的props變化截型。之后會(huì)遍歷effectList進(jìn)行對(duì)應(yīng)的dom操作和生命周期、hooks回調(diào)或銷(xiāo)毀函數(shù)儒溉，各個(gè)函數(shù)做的事情如下
在commitRoot函數(shù)中其實(shí)是調(diào)度了commitRootImpl函數(shù)
function commitRoot(root) {
var renderPriorityLevel = getCurrentPriorityLevel();
runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel));
return null;
}
在commitRootImpl的函數(shù)中主要分三個(gè)部分：
-
mutation前
調(diào)用flushPassiveEffects執(zhí)行完所有effect的任務(wù)
初始化相關(guān)變量
-
賦值firstEffect給后面遍歷effectList用
do { // 調(diào)用flushPassiveEffects執(zhí)行完所有effect的任務(wù) flushPassiveEffects(); } while (rootWithPendingPassiveEffects !== null); //... // 重置變量 finishedWork指rooFiber root.finishedWork = null; //重置優(yōu)先級(jí) root.finishedLanes = NoLanes; // Scheduler回調(diào)函數(shù)重置 root.callbackNode = null; root.callbackId = NoLanes; // 重置全局變量 if (root === workInProgressRoot) { workInProgressRoot = null; workInProgress = null; workInProgressRootRenderLanes = NoLanes; } else { } //rootFiber可能會(huì)有新的副作用 將它也加入到effectLis let firstEffect; if (finishedWork.effectTag > PerformedWork) { if (finishedWork.lastEffect !== null) { finishedWork.lastEffect.nextEffect = finishedWork; firstEffect = finishedWork.firstEffect; } else { firstEffect = finishedWork; } } else { firstEffect = finishedWork.firstEffect; }
-
mutation階段
遍歷effectList分別執(zhí)行三個(gè)方法commitBeforeMutationEffects宦焦、commitMutationEffects、commitLayoutEffects執(zhí)行對(duì)應(yīng)的dom操作和生命周期
在介紹雙緩存Fiber樹(shù)的時(shí)候顿涣，我們?cè)跇?gòu)建完workInProgress Fiber樹(shù)之后會(huì)將fiberRoot的current指向workInProgress Fiber波闹，讓workInProgress Fiber成為current，這個(gè)步驟發(fā)生在commitMutationEffects函數(shù)執(zhí)行之后涛碑，commitLayoutEffects之前精堕，因?yàn)閏omponentWillUnmount發(fā)生在commitMutationEffects函數(shù)中，這時(shí)還可以獲取之前的Update锌唾，而componentDidMount
和componentDidUpdate會(huì)在commitLayoutEffects中執(zhí)行锄码，這時(shí)已經(jīng)可以獲取更新后的真實(shí)dom了function commitRootImpl(root, renderPriorityLevel) { //... do { //... commitBeforeMutationEffects(); } while (nextEffect !== null); do { //... commitMutationEffects(root, renderPriorityLevel);//commitMutationEffects } while (nextEffect !== null); root.current = finishedWork;//切換current Fiber樹(shù) do { //... commitLayoutEffects(root, lanes);//commitLayoutEffects } while (nextEffect !== null); //... } -
mutation 后
根據(jù)rootDoesHavePassiveEffects賦值相關(guān)變量
-
執(zhí)行flushSyncCallbackQueue處理componentDidMount等生命周期或者useLayoutEffect等同步任務(wù)
onst rootDidHavePassiveEffects = rootDoesHavePassiveEffects; // 根據(jù)rootDoesHavePassiveEffects賦值相關(guān)變量 if (rootDoesHavePassiveEffects) { rootDoesHavePassiveEffects = false; rootWithPendingPassiveEffects = root; pendingPassiveEffectsLanes = lanes; pendingPassiveEffectsRenderPriority = renderPriorityLevel; } else {} //... // 確保被調(diào)度 ensureRootIsScheduled(root, now()); // ... // 執(zhí)行flushSyncCallbackQueue處理componentDidMount等生命周期或者useLayoutEffect等同步任務(wù) flushSyncCallbackQueue(); return null;現(xiàn)在讓我們來(lái)看看mutation階段的三個(gè)函數(shù)分別做了什么事情
-
commitBeforeMutationEffects
該函數(shù)主要做了如下兩件事
-
執(zhí)行g(shù)etSnapshotBeforeUpdate
在源碼中commitBeforeMutationEffectOnFiber對(duì)應(yīng)的函數(shù)是commitBeforeMutationLifeCycles在該函數(shù)中會(huì)調(diào)用getSnapshotBeforeUpdate，現(xiàn)在我們知道了getSnapshotBeforeUpdate是在mutation階段中的commitBeforeMutationEffect函數(shù)中執(zhí)行的晌涕，而commit階段是同步的，所以getSnapshotBeforeUpdate也同步執(zhí)行
function commitBeforeMutationLifeCycles( current: Fiber | null, finishedWork: Fiber, ): void { switch (finishedWork.tag) { //... case ClassComponent: { if const instance = finishedWork.stateNode; const snapshot = instance.getSnapshotBeforeUpdate(//getSnapshotBeforeUpdate finishedWork.elementType === finishedWork.type ? prevProps : resolveDefaultProps(finishedWork.type, prevProps), prevState, ); } } -
調(diào)度useEffect
在flushPassiveEffects函數(shù)中調(diào)用flushPassiveEffectsImpl遍歷pendingPassiveHookEffectsUnmount和pendingPassiveHookEffectsMount痛悯，執(zhí)行對(duì)應(yīng)的effect回調(diào)和銷(xiāo)毀函數(shù)余黎，而這兩個(gè)數(shù)組是在commitLayoutEffects函數(shù)中賦值的（待會(huì)就會(huì)講到），mutation后effectList賦值給rootWithPendingPassiveEffects载萌，然后scheduleCallback調(diào)度執(zhí)行flushPassiveEffects
function flushPassiveEffectsImpl() { if (rootWithPendingPassiveEffects === null) {//在mutation后變成了root return false; } const unmountEffects = pendingPassiveHookEffectsUnmount; pendingPassiveHookEffectsUnmount = [];//useEffect的回調(diào)函數(shù) for (let i = 0; i < unmountEffects.length; i += 2) { const effect = ((unmountEffects[i]: any): HookEffect); //... const destroy = effect.destroy; destroy(); } const mountEffects = pendingPassiveHookEffectsMount;//useEffect的銷(xiāo)毀函數(shù) pendingPassiveHookEffectsMount = []; for (let i = 0; i < mountEffects.length; i += 2) { const effect = ((unmountEffects[i]: any): HookEffect); //... const create = effect.create; effect.destroy = create(); } }componentDidUpdate或componentDidMount會(huì)在commit階段同步執(zhí)行(這個(gè)后面會(huì)講到)惧财，而useEffect會(huì)在commit階段異步調(diào)度，所以適用于數(shù)據(jù)請(qǐng)求等副作用的處理
注意扭仁，和在render階段的fiber node會(huì)打上Placement等標(biāo)簽一樣垮衷，useEffect或useLayoutEffect也有對(duì)應(yīng)的effect Tag，在源碼中對(duì)應(yīng)export const Passive = /* */ 0b0000000001000000000;
function commitBeforeMutationEffects() { while (nextEffect !== null) { const current = nextEffect.alternate; const effectTag = nextEffect.effectTag; // 在commitBeforeMutationEffectOnFiber函數(shù)中會(huì)執(zhí)行g(shù)etSnapshotBeforeUpdate if ((effectTag & Snapshot) !== NoEffect) { commitBeforeMutationEffectOnFiber(current, nextEffect); } // scheduleCallback調(diào)度useEffect if ((effectTag & Passive) !== NoEffect) { if (!rootDoesHavePassiveEffects) { rootDoesHavePassiveEffects = true; scheduleCallback(NormalSchedulerPriority, () => { flushPassiveEffects(); return null; }); } } nextEffect = nextEffect.nextEffect;//遍歷effectList } }
-
-
commitMutationEffects
commitMutationEffects主要做了如下幾件事
- 調(diào)用commitDetachRef解綁ref（第11章hook會(huì)講解）
2.根據(jù)effectTag執(zhí)行對(duì)應(yīng)的dom操作
3.useLayoutEffect銷(xiāo)毀函數(shù)在UpdateTag時(shí)執(zhí)行
function commitMutationEffects(root: FiberRoot, renderPriorityLevel) { //遍歷effectList while (nextEffect !== null) { const effectTag = nextEffect.effectTag; // 調(diào)用commitDetachRef解綁ref if (effectTag & Ref) { const current = nextEffect.alternate; if (current !== null) { commitDetachRef(current); } } // 根據(jù)effectTag執(zhí)行對(duì)應(yīng)的dom操作 const primaryEffectTag = effectTag & (Placement | Update | Deletion | Hydrating); switch (primaryEffectTag) { // 插入dom case Placement: { commitPlacement(nextEffect); nextEffect.effectTag &= ~Placement; break; } // 插入更新dom case PlacementAndUpdate: { // 插入 commitPlacement(nextEffect); nextEffect.effectTag &= ~Placement; // 更新 const current = nextEffect.alternate; commitWork(current, nextEffect); break; } //... // 更新dom case Update: { const current = nextEffect.alternate; commitWork(current, nextEffect); break; } // 刪除dom case Deletion: { commitDeletion(root, nextEffect, renderPriorityLevel); break; } } nextEffect = nextEffect.nextEffect; } }現(xiàn)在讓我們來(lái)看看操作dom的這幾個(gè)函數(shù)
commitPlacement插入節(jié)點(diǎn)：
簡(jiǎn)化后的代碼很清晰乖坠，找到該節(jié)點(diǎn)最近的parent節(jié)點(diǎn)和兄弟節(jié)點(diǎn)搀突，然后根據(jù)isContainer來(lái)判斷是插入到兄弟節(jié)點(diǎn)前還是append到parent節(jié)點(diǎn)后
function commitPlacement(finishedWork: Fiber): void { //... const parentFiber = getHostParentFiber(finishedWork);//找到最近的parent let parent; let isContainer; const parentStateNode = parentFiber.stateNode; switch (parentFiber.tag) { case HostComponent: parent = parentStateNode; isContainer = false; break; //... } const before = getHostSibling(finishedWork);//找兄弟節(jié)點(diǎn) if (isContainer) { insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent); } else { insertOrAppendPlacementNode(finishedWork, before, parent); } }commitWork更新節(jié)點(diǎn)：
在簡(jiǎn)化后的源碼中可以看到
如果fiber的tag是SimpleMemoComponent會(huì)調(diào)用commitHookEffectListUnmount執(zhí)行對(duì)應(yīng)的hook的銷(xiāo)毀函數(shù)，可以看到傳入的參數(shù)是HookLayout | HookHasEffect熊泵，也就是說(shuō)執(zhí)行useLayoutEffect的銷(xiāo)毀函數(shù)仰迁。
如果是HostComponent甸昏，那么調(diào)用commitUpdate，commitUpdate最后會(huì)調(diào)用updateDOMProperties處理對(duì)應(yīng)Update的dom操作
function commitWork(current: Fiber | null, finishedWork: Fiber): void { if (!supportsMutation) { switch (finishedWork.tag) { //... case SimpleMemoComponent: { commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork); } //... } } switch (finishedWork.tag) { //... case HostComponent: { //... commitUpdate( instance, updatePayload, type, oldProps, newProps, finishedWork, ); } return; } }function updateDOMProperties( domElement: Element, updatePayload: Array<any>, wasCustomComponentTag: boolean, isCustomComponentTag: boolean, ): void { // TODO: Handle wasCustomComponentTag for (let i = 0; i < updatePayload.length; i += 2) { const propKey = updatePayload[i]; const propValue = updatePayload[i + 1]; if (propKey === STYLE) { setValueForStyles(domElement, propValue); } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { setInnerHTML(domElement, propValue); } else if (propKey === CHILDREN) { setTextContent(domElement, propValue); } else { setValueForProperty(domElement, propKey, propValue, isCustomComponentTag); } } }commitDeletion刪除節(jié)點(diǎn):
如果是ClassComponent會(huì)執(zhí)行componentWillUnmount徐许，刪除fiber施蜜，如果是FunctionComponent 會(huì)刪除ref、并執(zhí)行useEffect的銷(xiāo)毀函數(shù)雌隅，具體可在源碼中查看unmountHostComponents翻默、commitNestedUnmounts、detachFiberMutation這幾個(gè)函數(shù)
function commitDeletion( finishedRoot: FiberRoot, current: Fiber, renderPriorityLevel: ReactPriorityLevel, ): void { if (supportsMutation) { // Recursively delete all host nodes from the parent. // Detach refs and call componentWillUnmount() on the whole subtree. unmountHostComponents(finishedRoot, current, renderPriorityLevel); } else { // Detach refs and call componentWillUnmount() on the whole subtree. commitNestedUnmounts(finishedRoot, current, renderPriorityLevel); } const alternate = current.alternate; detachFiberMutation(current); if (alternate !== null) { detachFiberMutation(alternate); } }- commitLayoutEffects
在commitMutationEffects之后所有的dom操作都已經(jīng)完成恰起，可以訪問(wèn)dom了冰蘑，commitLayoutEffects主要做了
- 調(diào)用commitLayoutEffectOnFiber執(zhí)行相關(guān)生命周期函數(shù)或者h(yuǎn)ook相關(guān)callback
2.執(zhí)行commitAttachRef為ref賦值
-
function commitLayoutEffects(root: FiberRoot, committedLanes: Lanes) {
while (nextEffect !== null) {
const effectTag = nextEffect.effectTag;
// 調(diào)用commitLayoutEffectOnFiber執(zhí)行生命周期和hook
if (effectTag & (Update | Callback)) {
const current = nextEffect.alternate;
commitLayoutEffectOnFiber(root, current, nextEffect, committedLanes);
}
// ref賦值
if (effectTag & Ref) {
commitAttachRef(nextEffect);
}
nextEffect = nextEffect.nextEffect;
}
}
commitLayoutEffectOnFiber：
在源碼中commitLayoutEffectOnFiber函數(shù)的別名是commitLifeCycles，在簡(jiǎn)化后的代碼中可以看到村缸，commitLifeCycles會(huì)判斷fiber的類(lèi)型祠肥，SimpleMemoComponent會(huì)執(zhí)行useLayoutEffect的回調(diào)，然后調(diào)度useEffect梯皿，ClassComponent會(huì)執(zhí)行componentDidMount或者componentDidUpdate仇箱，this.setState第二個(gè)參數(shù)也會(huì)執(zhí)行，HostRoot會(huì)執(zhí)行ReactDOM.render函數(shù)的第三個(gè)參數(shù)东羹，例如
ReactDOM.render(<App />, document.querySelector("#root"), function() {
console.log("root mount");
});
現(xiàn)在可以知道useLayoutEffect是在commit階段同步執(zhí)行剂桥，useEffect會(huì)在commit階段異步調(diào)度
function commitLifeCycles(
finishedRoot: FiberRoot,
current: Fiber | null,
finishedWork: Fiber,
committedLanes: Lanes,
): void {
switch (finishedWork.tag) {
case SimpleMemoComponent: {
// 此函數(shù)會(huì)調(diào)用useLayoutEffect的回調(diào)
commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
// 向pendingPassiveHookEffectsUnmount和pendingPassiveHookEffectsMount中push effect // 并且調(diào)度它們
schedulePassiveEffects(finishedWork);
}
case ClassComponent: {
//條件判斷...
instance.componentDidMount();
//條件判斷...
instance.componentDidUpdate(//update 在layout期間同步執(zhí)行
prevProps,
prevState,
instance.__reactInternalSnapshotBeforeUpdate,
);
}
case HostRoot: {
commitUpdateQueue(finishedWork, updateQueue, instance);//render第三個(gè)參數(shù)
}
}
}
在schedulePassiveEffects中會(huì)將useEffect的銷(xiāo)毀和回調(diào)函數(shù)push到pendingPassiveHookEffectsUnmount和pendingPassiveHookEffectsMount中
function schedulePassiveEffects(finishedWork: Fiber) {
const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
if (lastEffect !== null) {
const firstEffect = lastEffect.next;
let effect = firstEffect;
do {
const {next, tag} = effect;
if (
(tag & HookPassive) !== NoHookEffect &&
(tag & HookHasEffect) !== NoHookEffect
) {
//push useEffect的銷(xiāo)毀函數(shù)并且加入調(diào)度
enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
//push useEffect的回調(diào)函數(shù)并且加入調(diào)度
enqueuePendingPassiveHookEffectMount(finishedWork, effect);
}
effect = next;
} while (effect !== firstEffect);
}
}
commitAttachRef:
commitAttachRef中會(huì)判斷ref的類(lèi)型，執(zhí)行ref或者給ref.current賦值
function commitAttachRef(finishedWork: Fiber) {
const ref = finishedWork.ref;
if (ref !== null) {
const instance = finishedWork.stateNode;
let instanceToUse;
switch (finishedWork.tag) {
case HostComponent:
instanceToUse = getPublicInstance(instance);
break;
default:
instanceToUse = instance;
}
if (typeof ref === "function") {
// 執(zhí)行ref回調(diào)
ref(instanceToUse);
} else {
// 如果是值的類(lèi)型則賦值給ref.current
ref.current = instanceToUse;
}
}
}
各階段生命周期執(zhí)行情況
mount和update發(fā)生的生命周期的調(diào)用如下
