react源碼解析10.commit階段
視頻課程（高效學(xué)習(xí)）：進(jìn)入課程
課程目錄：
6.legacy和concurrent模式入口函數(shù)
在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)或銷毀函數(shù)缩功，各個(gè)函數(shù)做的事情如下
![]()
react源碼10.1
react源碼10.1
在commitRoot函數(shù)中其實(shí)是調(diào)度了commitRootImpl函數(shù)
//ReactFiberWorkLoop.old.js
function commitRoot(root) {
var renderPriorityLevel = getCurrentPriorityLevel();
runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel));
return null;
}
在commitRootImpl的函數(shù)中主要分三個(gè)部分：
-
commit階段前置工作
調(diào)用flushPassiveEffects執(zhí)行完所有effect的任務(wù)
初始化相關(guān)變量
-
賦值firstEffect給后面遍歷effectList用
//ReactFiberWorkLoop.old.js 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í)候烙荷，我們?cè)跇?gòu)建完workInProgress Fiber樹之后會(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樹 do { //... commitLayoutEffects(root, lanes);//commitLayoutEffects } while (nextEffect !== null); //... }
-
mutation 后
根據(jù)rootDoesHavePassiveEffects賦值相關(guān)變量
-
執(zhí)行flushSyncCallbackQueue處理componentDidMount等生命周期或者useLayoutEffect等同步任務(wù)
const 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)和銷毀函數(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的銷毀函數(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;
```js
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ì)講解）
根據(jù)effectTag執(zhí)行對(duì)應(yīng)的dom操作
-
useLayoutEffect銷毀函數(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)后
```js
unction 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的銷毀函數(shù)吧享，可以看到傳入的參數(shù)是HookLayout | HookHasEffect魏割，也就是說(shuō)執(zhí)行useLayoutEffect的銷毀函數(shù)。
如果是HostComponent耙蔑，那么調(diào)用commitUpdate见妒，commitUpdate最后會(huì)調(diào)用updateDOMProperties處理對(duì)應(yīng)Update的dom操作
```js
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;
}
}
```
```js
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的銷毀函數(shù)，具體可在源碼中查看unmountHostComponents译株、commitNestedUnmounts吉执、detachFiberMutation這幾個(gè)函數(shù)
```js
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
執(zhí)行commitAttachRef為ref賦值
```js
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的類型谤碳，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ù)，例如
```js
ReactDOM.render(<App />, document.querySelector("#root"), function() {
console.log("root mount");
});
```
現(xiàn)在可以知道useLayoutEffect是在commit階段同步執(zhí)行搓茬，useEffect會(huì)在commit階段異步調(diào)度
```js
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的銷毀和回調(diào)函數(shù)push到pendingPassiveHookEffectsUnmount和pendingPassiveHookEffectsMount中
```js
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的銷毀函數(shù)并且加入調(diào)度
enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
//push useEffect的回調(diào)函數(shù)并且加入調(diào)度
enqueuePendingPassiveHookEffectMount(finishedWork, effect);
}
effect = next;
} while (effect !== firstEffect);
}
}
```
**commitAttachRef:**
commitAttacRef中會(huì)判斷ref的類型犹赖，執(zhí)行ref或者給ref.current賦值
```js
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 {
// 如果是值的類型則賦值給ref.current
ref.current = instanceToUse;
}
}
}
```
