function?updateFunctionComponent(
??current,
??workInProgress,
??Component,
??nextProps:?any,
??renderLanes,
)?{
??let?context;
??if?(!disableLegacyContext)?{
????const?unmaskedContext?=?getUnmaskedContext(workInProgress,?Component,?true);
????context?=?getMaskedContext(workInProgress,?unmaskedContext);
??}
??let?nextChildren;
??prepareToReadContext(workInProgress,?renderLanes);
??//?執(zhí)行組件函數(shù)獲取返回的?element
??nextChildren?=?renderWithHooks(
????current,
????workInProgress,
????Component,
????nextProps,
????context,
????renderLanes,
??);
??
??//?React?DevTools?reads?this?flag.
??workInProgress.flags?|=?PerformedWork;
??reconcileChildren(current,?workInProgress,?nextChildren,?renderLanes);
??return?workInProgress.child;
}

得到組件返回的 element(s) 之后，下一步就是為他們生成 Fiber，我們查看源碼可以看到，不論是函數(shù)組件或是類組件或是普通組件，最后返回的 element(s) 都會作為參數(shù)傳入到 「reconcileChildren」 中。

介紹 「reconcileChildren」 之前我們先用一張圖總結(jié)一下 「beginWork」 的大致流程：

生成子節(jié)點

經(jīng)過上一步得到 workInProgress 的 children 之后，接下來需要為這些 children element 生成 Fiber ，這就是 「reconcileChildFibers」 函數(shù)做的事情，這也是我們經(jīng)常提到的 diff 的過程。

這個函數(shù)里主要分兩種情況處理，如果是 newChild(即 children element)是 object 類型，則進(jìn)入單節(jié)點 diff 過程（「reconcileSingleElement」），如果是數(shù)組類型，則進(jìn)入多節(jié)點 diff 過程（「reconcileChildrenArray」）

function?reconcileChildFibers(
????returnFiber:?Fiber,
????currentFirstChild:?Fiber?|?null,
????newChild:?any,
????lanes:?Lanes,
??):?Fiber?|?null?{
????if?(typeof?newChild?===?'object'?&&?newChild?!==?null)?{
??????switch?(newChild.$typeof)?{
????????case?REACT_ELEMENT_TYPE:
??????????return?placeSingleChild(
????????????reconcileSingleElement(
??????????????returnFiber,
??????????????currentFirstChild,
??????????????newChild,
??????????????lanes,
????????????),
??????????);
????????...
??????}
??????if?(isArray(newChild))?{
????????return?reconcileChildrenArray(
??????????returnFiber,
??????????currentFirstChild,
??????????newChild,
??????????lanes,
????????);
??????}
??????throwOnInvalidObjectType(returnFiber,?newChild);
????}
????
}???

單節(jié)點diff

function?reconcileSingleElement(
????returnFiber:?Fiber,
????currentFirstChild:?Fiber?|?null,
????element:?ReactElement,
????lanes:?Lanes,
??):?Fiber?{
????const?key?=?element.key;
????let?child?=?currentFirstChild;
????while?(child?!==?null)?{
????
??????//?首先比較?key?是否相同
??????if?(child.key?===?key)?{
????????const?elementType?=?element.type;
????????...
???????????//?然后比較?elementType?是否相同
??????????if?(child.elementType?===?elementType)?{
????????????deleteRemainingChildren(returnFiber,?child.sibling);
????????????const?existing?=?useFiber(child,?element.props);
????????????existing.ref?=?coerceRef(returnFiber,?child,?element);
????????????existing.return?=?returnFiber;
????????????return?existing;
??????????}
????????
????????//?Didn't?match.
????????deleteRemainingChildren(returnFiber,?child);
????????break;
??????}?else?{
????????deleteChild(returnFiber,?child);
??????}
??????//?遍歷兄弟節(jié)點，看能不能找到?key?相同的節(jié)點
??????child?=?child.sibling;
????}

????if?(element.type?===?REACT_FRAGMENT_TYPE)?{
??????const?created?=?createFiberFromFragment(
????????element.props.children,
????????returnFiber.mode,
????????lanes,
????????element.key,
??????);
??????created.return?=?returnFiber;
??????return?created;
????}?else?{
??????const?created?=?createFiberFromElement(element,?returnFiber.mode,?lanes);
??????created.ref?=?coerceRef(returnFiber,?currentFirstChild,?element);
??????created.return?=?returnFiber;
??????return?created;
????}
??}
??

本著盡可能復(fù)用舊節(jié)點的原則，在單節(jié)點 diff 在這里，我們會遍歷舊節(jié)點，對每個遍歷到的節(jié)點會做一下兩個判斷：

• key 是否相同
• key 相同的情況下，elementType 是否相同

延伸下來有三種情況：

• 如果 key 不相同，則直接調(diào)用 「deleteChild」 將這個 child 標(biāo)記為刪除，但是我們不用灰心，可能只是我們還沒有找到那個對的節(jié)點，所以要繼續(xù)執(zhí)行child = child.sibling;遍歷兄弟節(jié)點，直到找到那個對的節(jié)點。
• 如果 key 相同，elementType 相同，那就是最理想的情況，找到了可以復(fù)用的節(jié)點，直接調(diào)用 「deleteRemainingChildren」 把剩余的兄弟節(jié)點標(biāo)記刪除，然后直接復(fù)用 child 返回。
• 如果 key 相同，但 elementType 不同，這是最悲情的情況，我們找到了那個節(jié)點，可惜的是這個節(jié)點的 elementType 已經(jīng)變了，那我們也不需要再找了，把 child 及其所有兄弟節(jié)點標(biāo)記刪除，跳出循環(huán)。直接創(chuàng)建一個新的節(jié)點。

多節(jié)點diff

function?reconcileChildrenArray(
????returnFiber:?Fiber,
????currentFirstChild:?Fiber?|?null,
????newChildren:?Array<*>,
????lanes:?Lanes,
)?{
????let?resultingFirstChild:?Fiber?|?null?=?null;
????let?previousNewFiber:?Fiber?|?null?=?null;

????let?oldFiber?=?currentFirstChild;
????let?lastPlacedIndex?=?0;
????let?newIdx?=?0;
????let?nextOldFiber?=?null;
????for?(;?oldFiber?!==?null?&&?newIdx?????????const?newFiber?=?updateSlot(
????????returnFiber,
????????oldFiber,
????????newChildren[newIdx],
????????lanes,
????????);
????????if?(newFiber?===?null)?{
??????????break;
????????}
??????????lastPlacedIndex?=?placeChild(newFiber,?lastPlacedIndex,?newIdx);
??????????if?(previousNewFiber?===?null)?{
????????????resultingFirstChild?=?newFiber;
??????????}?else?{
????????????previousNewFiber.sibling?=?newFiber;
??????????}
??????????previousNewFiber?=?newFiber;
??????????oldFiber?=?nextOldFiber;
????}
????if?(newIdx?===?newChildren.length)?{
????????...
????}
????if?(oldFiber?===?null)?{
????????...
????}
????for?(;?newIdx?????????...
????}
????return?resultingFirstChild;
}


function?updateSlot(
????returnFiber:?Fiber,
????oldFiber:?Fiber?|?null,
????newChild:?any,
????lanes:?Lanes,
??):?Fiber?|?null?{
????const?key?=?oldFiber?!==?null???oldFiber.key?:?null;
????...
????if?(newChild.key?===?key)?{
??????return?updateElement(returnFiber,?oldFiber,?newChild,?lanes);
????}?else?{
??????return?null;
????}
}

從源碼我們可以看到，在 「reconcileChildrenArray」 中，出現(xiàn)了兩個循環(huán)。

第一輪循環(huán)中邏輯如下：

1. 同時遍歷 oldFiber 鏈和 newChildren，判斷 oldFiber 和 newChild 的 key 是否相同。
2. 如果 key 相同。
1. 判斷雙方 elementType 是否相同。
2. 如果相同則復(fù)用 oldFiber 返回。
3. 如果不同則新建 Fiber 返回。
3. 如果 key 不同則直接跳出循環(huán)。

可以看到第一輪循環(huán)只要碰到新舊的 key 不一樣時就會跳出循環(huán)，換句話說，第一輪循環(huán)里做的事情都是基于 key 相同，主要就是「更新」的工作。

跳出循環(huán)后，要先執(zhí)行兩個判斷

• newChildren 已經(jīng)遍歷完了：這種情況說明新的 children 全都已經(jīng)處理完了，只要把 oldFiber 和他所有剩余的兄弟節(jié)點刪除然后返回頭部的 Fiber 即可。
• 已經(jīng)沒有 oldFiber ：這種情況說明 children 有新增的節(jié)點，給這些新增的節(jié)點逐一構(gòu)建 Fiber 并鏈接上，然后返回頭部的 Fiber 即可。

如果以上兩種情況都不是，則進(jìn)入第二輪循環(huán)。

在執(zhí)行第二輪循環(huán)之前，先把剩下的舊節(jié)點和他們對應(yīng)的 key 或者 index 做成映射，方便查找。

第二輪循環(huán)沿用了第一輪循環(huán)的 newIdx 變量，說明第二輪循環(huán)是在第一輪循環(huán)結(jié)束的地方開始再次遍歷剩下的 newChildren。

????const?existingChildren?=?mapRemainingChildren(returnFiber,?oldFiber);
????for?(;?newIdx???????const?newFiber?=?updateFromMap(
????????existingChildren,
????????returnFiber,
????????newIdx,
????????newChildren[newIdx],
????????lanes,
??????);
??????if?(newFiber?!==?null)?{
????????if?(shouldTrackSideEffects)?{
??????????if?(newFiber.alternate?!==?null)?{
????????????existingChildren.delete(
??????????????newFiber.key?===?null???newIdx?:?newFiber.key,
????????????);
??????????}
????????}
????????lastPlacedIndex?=?placeChild(newFiber,?lastPlacedIndex,?newIdx);
????????if?(previousNewFiber?===?null)?{
??????????resultingFirstChild?=?newFiber;
????????}?else?{
??????????previousNewFiber.sibling?=?newFiber;
????????}
????????previousNewFiber?=?newFiber;
??????}
????}
????
????
????function?placeChild(
????newFiber:?Fiber,
????lastPlacedIndex:?number,
????newIndex:?number,
??):?number?{
????newFiber.index?=?newIndex;
????if?(!shouldTrackSideEffects)?{
??????//?Noop.
??????return?lastPlacedIndex;
????}
????const?current?=?newFiber.alternate;
????if?(current?!==?null)?{
??????const?oldIndex?=?current.index;
??????if?(oldIndex?????????//?This?is?a?move.
????????newFiber.flags?|=?Placement;
????????return?lastPlacedIndex;
??????}?else?{
????????//?This?item?can?stay?in?place.
????????return?oldIndex;
??????}
????}?else?{
??????//?This?is?an?insertion.
??????newFiber.flags?|=?Placement;
??????return?lastPlacedIndex;
????}
??}

第二輪循環(huán)主要調(diào)用了 「updateFromMap」 來處理節(jié)點，在這里需要用 newChild 的 key 去 existingChildren 中找對應(yīng)的 Fiber。

• 能找到 key 相同的，則說明這個節(jié)點只是位置變了，是可以復(fù)用的。
• 找不到 key 相同的，則說明這個節(jié)點應(yīng)該是新增的。

不管是復(fù)用還是新增，「updateFromMap」 都會返回一個 newFiber，然后我們需要為這個 newFiber 更新一下它的位置（index），但是僅僅更新這個 Fiber 的 index 還不夠，因為這個 Fiber 有可能是復(fù)用的，如果是復(fù)用的就意味著它已經(jīng)有對應(yīng)的真實 DOM 節(jié)點了，我們還需要復(fù)用它的真實 DOM，因此需要對應(yīng)更新這個 Fiber 的 flag，但是真的需要對每個 Fiber 都去設(shè)置 flag 嗎，我們舉個例子：

//?舊
[<div?key='a'?/>,?'b'?/>,?'c'?/>]

//?新
[<div?key='c'?/>,?'a'?/>,?'b'?/>]

如果按照我們剛剛說的做法，這里的 a, b, c 都會被打上 flag，這樣一來，在 commit 階段，這三個 DOM 都會被移動，可是我們知道，這里顯然只需要移動一個節(jié)點即可，退一萬步說我們移動兩個節(jié)點也比移動所有節(jié)點要來的聰明。

其實在這個問題上主要就是我們得區(qū)分一下到底哪個節(jié)點才是移動了的，這就需要一個參照點，我們要保證在參照點左邊都是已經(jīng)排好順序了的。而這個參照點就是 lastPlacedIndex。有了它，我們在遍歷 newChildren 的時候可能會出現(xiàn)下面兩種情況：

• 生成（或復(fù)用）的 Fiber 對應(yīng)的老 index < lastPlacedIndex，這就說明這個 Fiber 的位置不對，因為 lastPlacedIndex 左邊的應(yīng)該全是已經(jīng)遍歷過的 newChild 生成的 Fiber。因此這個 Fiber 是需要被移動的，打上 flag。
• 如果 Fiber 對應(yīng)的老 index >= lastPlacedIndex，那就說明這個 Fiber 的相對位置是 ok 的，可以不用移動，但是我們需要更新一下參照點，把參照點更新成這個 Fiber 對應(yīng)的老 index。

我們舉一個例子：

//?舊
[<div?key='a'?/>,?'b'?/>,?'c'?/>,?'d'?/>]

//?新
[<div?key='c'?/>,?'a'?/>,?'b'?/>,?'d'?/>,?'e'?/>]

lastPlacedIndex 初始值為 0，

首先處理第一個節(jié)點 c，給節(jié)點 c 的 index 賦值為最新值 0，c.index = 0。

可以看到 c 的 oldIndex 為 2，此時 oldIndex > lastPlacedIndex，無需對 c 做移動，將 lastPlacedIndex 賦值為 2。

此時 lastPlacedIndex = 2。

然后處理節(jié)點 a，a.index = 1。

a 的 oldIndex 為 0，此時 oldIndex < lastPlacedIndex，因此需要對 a 打上 Placement 標(biāo)記，lastPlacedIndex 維持不變。

此時 lastPlacedIndex 仍然等于 2。

然后處理節(jié)點 b，b.index = 2。

b 的 oldIndex 為 1，此時 oldIndex < lastPlacedIndex，需要對 b 打上 Placement 標(biāo)記，將 lastPlacedIndex 維持不變。

此時 lastPlacedIndex 仍然等于 2。

然后處理節(jié)點 d，b.index = 3。

d 的 oldIndex 為 3，此時 oldIndex > lastPlacedIndex，無需對 d 做移動，將 lastPlacedIndex 賦值為 3。

此時 lastPlacedIndex = 3。

然后處理節(jié)點 e，e.index = 4。

由于 e 是新建節(jié)點，所以 e 的 oldIndex 為 0，此時 oldIndex < lastPlacedIndex，因此需要對 e 打上 Placement 標(biāo)記，lastPlacedIndex 維持不變。

因此最終需要變動位置的節(jié)點是 a b e。

這里可以看到其實最高效的改動是移動 c 和 e，但是 React 的 diff 邏輯選擇了固定住 c，移動 a b，因此我們平時寫代碼的時候盡量避免把節(jié)點從后面提到前面的操作。

為 newChildren 里的所有 element 都生成了 Fiber 并連接好之后，返回第一個 child ，至此生成子節(jié)點的步驟就完成了。

completeUnitOfWork

在核心流程里我們說到，當(dāng) beginWork 處理到葉子節(jié)點，返回 null 的時候就會調(diào)用 「completeUnitOfWork」 函數(shù)。

「completeUnitOfWork」 主要做的事情有兩件：

• 處理當(dāng)前節(jié)點
• “歸”操作

處理當(dāng)前節(jié)點

「completeUnitOfWork」 里主要調(diào)用了 「completeWork」 來處理當(dāng)前節(jié)點，而在 completeWork 中則是使用了 switch...case... 來處理不同類型的節(jié)點，這里我們主要以最常見的 HostComponent 為例。分成首次渲染和非首次渲染兩種情況討論。

mount

當(dāng)是首次渲染時，這里要做的事情主要是：

1. 創(chuàng)建真實 DOM。
2. 如果有子節(jié)點的話將子節(jié)點的真實 DOM 插入到剛剛創(chuàng)建的 DOM 中。
3. 處理真實 DOM 的 props 等。

const?currentHostContext?=?getHostContext();
//?為fiber創(chuàng)建對應(yīng)DOM節(jié)點
const?instance?=?createInstance(
????type,
????newProps,
????rootContainerInstance,
????currentHostContext,
????workInProgress,
??);
//?將子孫DOM節(jié)點插入剛生成的DOM節(jié)點中
appendAllChildren(instance,?workInProgress,?false,?false);
//?DOM節(jié)點賦值給fiber.stateNode
workInProgress.stateNode?=?instance;

//?處理props
if?(
??finalizeInitialChildren(
????instance,
????type,
????newProps,
????rootContainerInstance,
????currentHostContext,
??)
)?{
??markUpdate(workInProgress);
}

update

當(dāng) update 時，F(xiàn)iber 節(jié)點已經(jīng)存在對應(yīng) DOM 節(jié)點，所以不需要生成 DOM 節(jié)點。需要做的主要是處理DOM 節(jié)點的 props，這里主要就是一些真實 DOM 的 onClick、onChange等回調(diào)函數(shù)的注冊，style 等，這些處理完之后的 props 也會記錄到 workInProgress.updateQueue 中，并在 commit 階段更新到 DOM 節(jié)點上。

if?(current?!==?null?&&?workInProgress.stateNode?!=?null)?{
??//?update的情況
??updateHostComponent(
????current,
????workInProgress,
????type,
????newProps,
????rootContainerInstance,
??);
}

“歸”

剛剛說到，當(dāng) 「beginWork」 返回值為 null 的時候會進(jìn)入 「completeUnitOfWork」 中，可是我們知道 beginWork 是深度優(yōu)先的更新，也就意味著進(jìn)入 「completeUnitOfWork」 之后必然還需要回到 beginWork 中繼續(xù)處理其他的節(jié)點。

????...
????const?siblingFiber?=?completedWork.sibling;
????if?(siblingFiber?!==?null)?{
??????//?If?there?is?more?work?to?do?in?this?returnFiber,?do?that?next.
??????workInProgress?=?siblingFiber;
??????return;
????}
????//?Otherwise,?return?to?the?parent
????completedWork?=?returnFiber;
????//?Update?the?next?thing?we're?working?on?in?case?something?throws.
????workInProgress?=?completedWork;

可以看到，當(dāng)處理完當(dāng)前節(jié)點之后，React 會判斷當(dāng)前節(jié)點是否具有兄弟節(jié)點，如果有的話則將兄弟節(jié)點設(shè)置為當(dāng)前的 workInProgress 回到主流程繼續(xù) 「beginWork?！?/strong>

而如果沒有兄弟節(jié)點的話，就意味著同父節(jié)點下的所有子節(jié)點都已經(jīng)處理完畢，則接下來就會處理他們的父節(jié)點。

大致流程就是：「beginWork」 執(zhí)行到當(dāng)前節(jié)點沒有 child 的時候，進(jìn)入 「completeUnitOfWork」 處理當(dāng)前節(jié)點，處理完后如果當(dāng)前節(jié)點有兄弟節(jié)點則回到 「beginWork」 繼續(xù)處理兄弟節(jié)點，如果沒有兄弟節(jié)點則繼續(xù)在 「completeUnitOfWork」 處理當(dāng)前節(jié)點的父節(jié)點，直到“歸”到根結(jié)點上。

三、掛載過程（commitRoot）

effect list

render階段的一個主要工作是收集需要執(zhí)行的 DOM 操作，然后交給 commit階段 來處理，而這些 DOM 操作的具體類型都會保存在 Fiber 節(jié)點的 effectTag 屬性上。

部分 DOM 操作的類型：

//?插入?DOM
export?const?Placement?=?/*????????????????*/?0b00000000000010;
//?更新?DOM
export?const?Update?=?/*???????????????????*/?0b00000000000100;
//?插入并更新?DOM
export?const?PlacementAndUpdate?=?/*???????*/?0b00000000000110;
//?刪除?DOM?節(jié)點
export?const?Deletion?=?/*?????????????????*/?0b00000000001000;

使用二進(jìn)制來表示可以方便地用位運算給 effectTag 帶上多個副作用(effect)，也可以方便地判斷是否存在某個副作用。例如有個 fiber 節(jié)點 effectTag 是 PlacementAndUpdate (0b00000000000110)，可以通過按位與運算來判斷是否存在Placement：

const?effectTag?=?PlacementAndUpdate;
console.log(effectTag?&?Placement?!==?0);?//?=>?true

在 commit階段 可以像 render階段 那樣遍歷所有 fiber 節(jié)點找出其中的 effectTag，但這樣效率比較低，所以在 render階段 的 completeUnitOfWork 中會把具有 effectTag 的 fiber 節(jié)點連接起來，形成 effectList 鏈表。例如我們有這樣的代碼：

function?App()?{
??const?[count,?setCount]?=?useState(0);
??return?(
????<div?onClick={()?=>?setCount(count?+?1)}>
??????<p>{count}p>
??????<span>{count}span>
????div>
??);
};

我們在 performSyncWorkOnRoot 方法的末尾的 finishedWork 打個斷點，然后點擊 div 觸發(fā)一次 setCount 更新：

當(dāng) react 執(zhí)行到斷點這個地方時，我們在控制臺打印一下 finishedWork：

所以此時對應(yīng)的 effectList是：

這里 span 和 p 節(jié)點有 effectTag 是因為 {count}，div 節(jié)點有 effectTag 是因為重新生成的 onClick 函數(shù)。

commit 階段

render階段結(jié)束后，會在performSyncWorkOnRoot()或finishConcurrentRender()中把 fiberRootNode 傳給 commitRoot 方法，開啟 commit階段。

以performSyncWorkOnRoot為例：

function?performSyncWorkOnRoot(root)?{
????//?render階段的入口函數(shù)
????renderRootSync(root,?lanes);
????//?...
????//?commitRoot函數(shù)調(diào)用
????const?finishedWork?=?root.current.alternate;
????root.finishedWork?=?finishedWork;
????root.finishedLanes?=?lanes;
????commitRoot(root);
????//?...省略代碼
}

commit階段的一個主要工作就是遍歷 effectList 并執(zhí)行對應(yīng)的 DOM 操作。commit階段又分為三個子階段：

• before mutation階段
• mutation階段
• layout階段

下面來看看 commit階段 具體發(fā)生了什么。

進(jìn)入 commitRootImpl 方法時，會先判斷 rootWithPendingPassiveEffects 是否為 null，如果不為 null 就會執(zhí)行 flushPassiveEffects。

function?commitRootImpl(root,?renderPriorityLevel)?{
??do?{
????flushPassiveEffects();
??}?while?(rootWithPendingPassiveEffects?!==?null);

??//?...
}

rootWithPendingPassiveEffects 中的PassiveEffect 是什么意思呢？我們知道如果一個 fiber 節(jié)點的 dom 節(jié)點需要被插入到頁面中，那 fiber.effectTag 就會帶上 Placement effect，類似的，如果一個 FunctionComponent 有 useEffect 需要被執(zhí)行，那它就會帶上 Passive effect。

所以這里的意思是進(jìn)入 commitRoot 時先判斷當(dāng)前是否還有未執(zhí)行的 useEffect，如果有，就執(zhí)行它，也就是說在開啟新一輪的 commit 階段時會先等待上一輪的 useEffect 執(zhí)行完。這其實在官方文檔里也有一些說明：

接著會重置 render階段使用到的一些全局變量：

function?commitRootImpl(root,?renderPriorityLevel)?{
??do?{
????flushPassiveEffects();
??}?while?(rootWithPendingPassiveEffects?!==?null);

??//?...

??if?(root?===?workInProgressRoot)?{
????workInProgressRoot?=?null;
????workInProgress?=?null;
????workInProgressRootRenderLanes?=?NoLanes;
??}
??
??//?...
}

處理 effect list：

function?commitRootImpl(root,?renderPriorityLevel)?{
??//?...

??let?firstEffect;
??if?(finishedWork.effectTag?>?PerformedWork)?{
????if?(finishedWork.lastEffect?!==?null)?{
??????finishedWork.lastEffect.nextEffect?=?finishedWork;
??????firstEffect?=?finishedWork.firstEffect;
????}?else?{
??????firstEffect?=?finishedWork;
????}
??}?else?{
????firstEffect?=?finishedWork.firstEffect;
??}
??
??//?...
}

上面說過 render階段已經(jīng)把帶有 effectTag 的 fiber 節(jié)點連接形成一條鏈表了，這里再次處理 effect list 是因為這條鏈表目前只有子節(jié)點，并沒有掛載根節(jié)點。如果根節(jié)點也存在 effectTag，那么就需要把根節(jié)點拼接到鏈表的末尾，形成一條完整的 effect list：

同時上面的代碼也會取出 firstEffect，也就是第一個需要被處理的 fiber 節(jié)點。接著判斷如果存在 firstEffect，會將 firstEffect 賦值給 nextEffect，開始三個子階段的工作。

function?commitRootImpl(root,?renderPriorityLevel)?{
??//?...

??if?(firstEffect?!==?null)?{
????nextEffect?=?firstEffect;
????
????// beforeMutation 階段：
????//?執(zhí)行?commitBeforeMutationEffects
????
????// mutation 階段：
????//?執(zhí)行?commitMutationEffects
????
????// layout 階段：
????//?執(zhí)行?commitLayoutEffects
??}
??
??//?...
}

beforeMutation階段

beforeMutation階段會執(zhí)行 commitBeforeMutationEffects 方法

function?commitBeforeMutationEffects()?{
??while?(nextEffect?!==?null)?{
????//?...
????
????const?effectTag?=?nextEffect.effectTag;
????if?((effectTag?&?Snapshot)?!==?NoEffect)?{
??????//?...
??????commitBeforeMutationEffectOnFiber(current,?nextEffect);
????}

????//?...
????nextEffect?=?nextEffect.nextEffect;
??}
}

執(zhí)行 getSnapshotBeforeUpdate

在commitBeforeMutationEffects這個方法中會遍歷帶有 effectTag 的 fiber 節(jié)點，如果判斷有 Snapshot effectTag 就會調(diào)用 ClassComponent 的 getSnapshotBeforeUpdate 生命周期方法：

function?commitBeforeMutationLifeCycles(
??current:?Fiber?|?null,
??finishedWork:?Fiber,
):?void?{
??switch?(finishedWork.tag)?{
????case?FunctionComponent:
????case?ForwardRef:
????case?SimpleMemoComponent:
????case?Block:?{
??????return;
????}
????case?ClassComponent:?{
??????if?(finishedWork.effectTag?&?Snapshot)?{
????????if?(current?!==?null)?{
??????????//?...
??????????const?snapshot?=?instance.getSnapshotBeforeUpdate(/**?...?*/);
??????????//?...
????????}
??????}
??????return;
????}
????case?HostRoot:?{
??????//?...
??????return;
????}
????case?HostComponent:
????case?HostText:
????case?HostPortal:
????case?IncompleteClassComponent:
??????//?Nothing?to?do?for?these?component?types
??????return;
??}
}

調(diào)度 useEffect

再看下 commitBeforeMutationEffects 的剩余部分：

function?commitBeforeMutationEffects()?{
??while?(nextEffect?!==?null)?{
????//?...
????
????if?((effectTag?&?Passive)?!==?NoEffect)?{
??????if?(!rootDoesHavePassiveEffects)?{
????????rootDoesHavePassiveEffects?=?true;
????????scheduleCallback(NormalSchedulerPriority,?()?=>?{
??????????flushPassiveEffects();
??????????return?null;
????????});
??????}
????}
????nextEffect?=?nextEffect.nextEffect;
??}
}

上面提到 flushPassiveEffects 用于執(zhí)行 useEffect 的回調(diào)函數(shù)，而這里并不會立即執(zhí)行它，而是把它放在 scheduleCallback 的回調(diào)當(dāng)中，scheduleCallback 方法會以一個優(yōu)先級異步執(zhí)行它的回調(diào)函數(shù)。

所以這段代碼的意思是，如果存在 Passive effect，則把 rootDoesHavePassiveEffects 置為 true，并且調(diào)度 flushPassiveEffects，而整個 commit階段 是「同步執(zhí)行」的，所以 useEffect 的回調(diào)函數(shù)其實會在 commit階段「完成后」再異步執(zhí)行。

這也跟官方文檔說的對應(yīng)上了：

總結(jié)

在 beforeMutation階段 會：

• 執(zhí)行getSnapshotBeforeUpdate生命周期方法
• 「調(diào)度」useEffect

mutation階段

mutation階段會執(zhí)行 commitMutationEffects 方法：

function?commitMutationEffects(root:?FiberRoot,?renderPriorityLevel)?{
??while?(nextEffect?!==?null)?{
????const?effectTag?=?nextEffect.effectTag;
????
????//?如果有?ContentReset，會重置文本節(jié)點
????if?(effectTag?&?ContentReset)?{
??????commitResetTextContent(nextEffect);
????}
????
????//?如果有?Ref，會執(zhí)行?ref?相關(guān)的更新
????if?(effectTag?&?Ref)?{
??????//?...
????}

????const?primaryEffectTag?=
??????effectTag?&?(Placement?|?Update?|?Deletion?|?Hydrating);
????switch?(primaryEffectTag)?{
??????//?如果需要插入節(jié)點，會執(zhí)行?commitPlacement
??????case?Placement:?{
????????commitPlacement(nextEffect);
????????nextEffect.effectTag?&=?~Placement;
????????break;
??????}
??????//?如果需要更新節(jié)點，會執(zhí)行?commitWork
??????case?Update:?{
????????const?current?=?nextEffect.alternate;
????????commitWork(current,?nextEffect);
????????break;
??????}
??????//?如果需要刪除節(jié)點，會執(zhí)行?commitDeletion
??????case?Deletion:?{
????????commitDeletion(root,?nextEffect,?renderPriorityLevel);
????????break;
??????}
??????//?...
????}
????
????//?取出下一個?fiber?節(jié)點，進(jìn)入下一次循環(huán)
????nextEffect?=?nextEffect.nextEffect;
??}
}

在這個方法中會遍歷帶有 effectTag 的 fiber 節(jié)點，

• 如果有 ContentReset，會重置文本節(jié)點
• 如果有 Ref，會執(zhí)行 ref 相關(guān)的操作
• 增刪改
• 如果需要插入節(jié)點，會執(zhí)行 commitPlacement
• 如果需要更新節(jié)點，會執(zhí)行 commitWork
• 如果需要刪除節(jié)點，會執(zhí)行 commitDeletion
• ...

commitPlacement

在 commitPlacement 方法中，會先找到距離最近的 host 類型父節(jié)點和距離最近的 host 類型兄弟節(jié)點，然后根據(jù) host 父 fiber 節(jié)點的類型取出對應(yīng)的 DOM 節(jié)點，接著根據(jù)是否 container 來執(zhí)行 insertOrAppendPlacementNodeIntoContainer 或 insertOrAppendPlacementNode。

function?commitPlacement(finishedWork:?Fiber):?void?{
??//?找到?host?父?fiber?節(jié)點
??const?parentFiber?=?getHostParentFiber(finishedWork);

??let?parent;
??let?isContainer;
??const?parentStateNode?=?parentFiber.stateNode;
??
??//?根據(jù)?host?父?fiber?節(jié)點的類型，取出對應(yīng)的?DOM?節(jié)點
??switch?(parentFiber.tag)?{
????case?HostComponent:
??????parent?=?parentStateNode;
??????isContainer?=?false;
??????break;
????case?HostRoot:
??????parent?=?parentStateNode.containerInfo;
??????isContainer?=?true;
??????break;
????case?HostPortal:
??????parent?=?parentStateNode.containerInfo;
??????isContainer?=?true;
??????break;
????//?...
??}
??//?...
??//?獲取?host?兄弟節(jié)點
??const?before?=?getHostSibling(finishedWork);
??
??//?根據(jù)是否?container?來決定執(zhí)行哪個方法
??if?(isContainer)?{
????insertOrAppendPlacementNodeIntoContainer(finishedWork,?before,?parent);
??}?else?{
????insertOrAppendPlacementNode(finishedWork,?before,?parent);
??}
}

為什么需要先找到 host 父 fiber 節(jié)點和 host 兄弟 fiber 節(jié)點？

我們知道在DOM中插入一個節(jié)點有兩種方式：

• parentNode.appendChild(newNode)
• parentNode.insertBefore(newNode, referenceNode)

無論哪種方式都需要找到它的父 DOM 節(jié)點，而如果需要 insertBefore 則還需要找到它的兄弟 DOM 節(jié)點。

另外，為什么需要找 host 類型的父節(jié)點和兄弟節(jié)點呢？這是因為最近的父 「fiber」 節(jié)點不一定就是最近的父 「DOM」 節(jié)點，同理，最近的兄弟 「fiber」 節(jié)點不一樣是最近的兄弟 「DOM」 節(jié)點。例如，我們的代碼長這樣：

function?Item()?{
??return?

}

function?App()?{
??return?(
????

??????
??????
????

??);
}

它對應(yīng)的 fiber 樹和 dom 樹分別是：

可以看到， fiber 樹和 don 樹并不是一一對應(yīng)的：

• p 的 fiber 節(jié)點的父節(jié)點是 Item，而 p 的 dom 節(jié)點的父節(jié)點是 div
• p 的 fiber 節(jié)點沒有兄弟節(jié)點，而 p 的 dom 節(jié)點有個兄弟節(jié)點是 span

上面的insertOrAppendPlacementNodeIntoContainer 和 insertOrAppendPlacementNode做的事情差不多，都會判斷是否有 before，如果有，則執(zhí)行 insertBefore，沒有則執(zhí)行 appendChild：

function?insertOrAppendPlacementNode(
??node:?Fiber,
??before:??Instance,
??parent:?Instance,
):?void?{
??//?...
??if?(before)?{
????insertBefore(parent,?stateNode,?before);
??}?else?{
????appendChild(parent,?stateNode);
??}
??//?...
}

appendChild 和 insertBefore 都來自于 ReactFiberHostConfig。

這里的 ReactFiberHostConfig 在源碼里其實只是一個空殼，最終需要被特定環(huán)境的 renderer 來填充，例如在我們平常使用 ReactDOM 時，ReactFiberHostConfig 會被 ReactDOM 的 ReactDOMHostConfig 來填充：

export?function?appendChild(
??parentInstance:?Instance,
??child:?Instance?|?TextInstance,
):?void?{
??parentInstance.appendChild(child);
}

export?function?insertBefore(
??parentInstance:?Instance,
??child:?Instance?|?TextInstance,
??beforeChild:?Instance?|?TextInstance?|?SuspenseInstance,
):?void?{
??parentInstance.insertBefore(child,?beforeChild);
}

可以看到，其實最終就是執(zhí)行 dom 節(jié)點的 appendChild 或 insertBefore 方法。

?

React 倉庫其他 renderer 的 hostConfig：

?

BTW，umijs/hox(https://github.com/umijs/hox) 是一個基于 hooks 的全局狀態(tài)管理工具，它跟其他基于 hooks 的狀態(tài)管理工具很大的一個不同點是， hox 不需要我們手動掛載 就能直接使用 model：

//?counterModel.js
import?{?useState?}?from?"react";
import?{?createModel?}?from?"hox";
function?useCounter()?{
??const?[count,?setCount]?=?useState(0);
??const?decrement?=?()?=>?setCount(count?-?1);
??const?increment?=?()?=>?setCount(count?+?1);
??return?{
????count,
????decrement,
????increment
??};
}
export?default?createModel(useCounter);

//?index.jsx
import?useCounterModel?from?"./counterModel";
function?App(props)?{
??const?counter?=?useCounterModel();
??return?(
????

??????
{counter.count}

??????Increment
????

??);
}

其實它是在調(diào)用 createModel 時把 hooks 的執(zhí)行掛在了它自定義的一個 renderer 里，對應(yīng)的 hostConfig 都是空函數(shù)，因為它并不需要執(zhí)行真正的渲染，只是用來執(zhí)行 hooks 而已：

import?ReactReconciler?from?"react-reconciler";
import?{?ReactElement?}?from?"react";

const?hostConfig?=?{
??now:?Date.now,
??getRootHostContext:?()?=>?({}),
??prepareForCommit:?()?=>?{},
??resetAfterCommit:?()?=>?{},
??getChildHostContext:?()?=>?({}),
??shouldSetTextContent:?()?=>?true,
??createInstance:?()?=>?{},
??createTextInstance:?()?=>?{},
??appendInitialChild:?()?=>?{},
??appendChild:?()?=>?{},
??finalizeInitialChildren:?()?=>?{},
??supportsMutation:?true,
??appendChildToContainer:?()?=>?{},
??prepareUpdate:?()?=>?true,
??commitUpdate:?()?=>?{},
??commitTextUpdate:?()?=>?{},
??removeChild:?()?=>?{}
};

const?reconciler?=?ReactReconciler(hostConfig?as?any);

export?function?render(reactElement:?ReactElement)?{
??const?container?=?reconciler.createContainer(null,?false,?false);
??return?reconciler.updateContainer(reactElement,?container,?null,?null);
}

commitWork

commitWork 用于更新節(jié)點。在這個方法中會根據(jù) fiber 節(jié)點的類型進(jìn)行不同的操作：

function?commitWork(current:?Fiber?|?null,?finishedWork:?Fiber):?void?{
??switch?(finishedWork.tag)?{
????case?FunctionComponent:
????case?ForwardRef:
????case?MemoComponent:
????case?SimpleMemoComponent:
????case?Block:?{
??????//?...
??????return;
????}
????case?ClassComponent:?{
??????return;
????}
????case?HostComponent:?{
??????//?...
??????return;
????}
????case?HostText:?{
??????//?...
??????return;
????}
????//?case...
??}
}

對于 FunctionComponent，更新時會執(zhí)行 commitHookEffectListUnmount(``HookLayout | HookHasEffect, finishedWork)：

function?commitHookEffectListUnmount(tag:?number,?finishedWork:?Fiber)?{
??const?updateQueue?=?finishedWork.updateQueue;
??const?lastEffect?=?updateQueue?!==?null???updateQueue.lastEffect?:?null;
??if?(lastEffect?!==?null)?{
????const?firstEffect?=?lastEffect.next;
????let?effect?=?firstEffect;
????do?{
??????if?((effect.tag?&?tag)?===?tag)?{
????????const?destroy?=?effect.destroy;
????????effect.destroy?=?undefined;
????????if?(destroy?!==?undefined)?{
??????????destroy();
????????}
??????}
??????effect?=?effect.next;
????}?while?(effect?!==?firstEffect);
??}
}

里面會遍歷 effect list，判斷 effect.tag 是否存在參數(shù)傳入的 tag 類型，在這個場景里被傳入 tag 參數(shù)是 HookLayout，也就是 useLayoutEffect 對應(yīng)的 effect tag。所以這里的意思是遍歷 effect list，如果存在 useLayoutEffect 的 effect tag，則執(zhí)行它的銷毀函數(shù)（即 useLayoutEffect 的回調(diào)函數(shù)的返回值）。

如果 fiber 節(jié)點的類型是 HostComponent，也就是 dom 節(jié)點對應(yīng)的 fiber 節(jié)點，更新時會執(zhí)行 commitUpdate 方法：

function?commitWork(current:?Fiber?|?null,?finishedWork:?Fiber):?void?{
??switch?(finishedWork.tag)?{
????//?...
????case?HostComponent:?{
??????const?instance:?Instance?=?finishedWork.stateNode;
??????if?(instance?!=?null)?{
????????//?...
????????const?updatePayload:?null?|?UpdatePayload?=?(finishedWork.updateQueue:?any);
????????//?...
????????if?(updatePayload?!==?null)?{
??????????commitUpdate(
????????????instance,
????????????updatePayload,
????????????type,
????????????oldProps,
????????????newProps,
????????????finishedWork,
??????????);
????????}
????????if?(enableDeprecatedFlareAPI)?{
??????????const?prevListeners?=?oldProps.DEPRECATED_flareListeners;
??????????const?nextListeners?=?newProps.DEPRECATED_flareListeners;
??????????if?(prevListeners?!==?nextListeners)?{
????????????updateDeprecatedEventListeners(nextListeners,?finishedWork,?null);
??????????}
????????}
??????}
??????return;
????}
????//?...
??}
}

commitUpdate 方法接收的參數(shù)中有個 updatePayload，它來自于 fiber.updateQueue 屬性，對于類型為 HostComponent 的 fiber 節(jié)點來說，它的 updateQueue 屬性是一個數(shù)組，表示這個 dom 節(jié)點的屬性變更，例如一個 dom 節(jié)點在某次更新中它的 a 屬性需要從 react 更新為 vue，b 屬性需要從 byte 更新為 dance，那這個 dom 節(jié)點的 fiber 節(jié)點的 updateQueue 就長這樣 ['a', 'vue', 'b', 'dance']，也就是說第 i 項是屬性 key，第 i + 1 項是屬性 value。

commitUpdate 方法同樣來自 ReactFiberHostConfig：

export?function?commitUpdate(
??domElement:?Instance,
??updatePayload:?Array,
??type:?string,
??oldProps:?Props,
??newProps:?Props,
??internalInstanceHandle:?Object,
):?void?{
??//?...
??updateProperties(domElement,?updatePayload,?type,?oldProps,?newProps);
}

它最終會調(diào)用 updateDOMProperties 來更新 dom 屬性：

function?updateDOMProperties(
??domElement:?Element,
??updatePayload:?Array,
??wasCustomComponentTag:?boolean,
??isCustomComponentTag:?boolean,
):?void?{
??for?(let?i?=?0;?i?????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);
????}
??}
}

這里的 i 和 i + 1 就對應(yīng)著上面提到的 updateQueue 的數(shù)據(jù)結(jié)構(gòu)，第 i 項是屬性 key，第 i + 1 項是屬性 value。

commitDeletion

commitDeletion 用于執(zhí)行刪除操作：

function?commitDeletion(
??finishedRoot:?FiberRoot,
??current:?Fiber,
??renderPriorityLevel:?ReactPriorityLevel,
):?void?{
??//?...
??unmountHostComponents(finishedRoot,?current,?renderPriorityLevel);
??//?...
}

在 unmountHostComponents 中核心是遍歷節(jié)點調(diào)用 commitUnmount 方法。在這個方法中會根據(jù) fiber 節(jié)點的類型做不同的處理。

對于 FunctionComponent，會注冊它的 useEffect 銷毀函數(shù)，其實就是把這個 effect 推進(jìn) pendingPassiveHookEffectsUnmount 這個數(shù)組中，便于「后續(xù)」取出來執(zhí)行銷毀函數(shù)。

function?commitUnmount(
??finishedRoot:?FiberRoot,
??current:?Fiber,
??renderPriorityLevel:?ReactPriorityLevel,
):?void?{
??switch?(current.tag)?{
????case?FunctionComponent:?{
??????//?...
??????enqueuePendingPassiveHookEffectUnmount(current,?effect);
??????//?...
??????return;
????}
??}
}

對于 ClassComponent，會執(zhí)行它的 componentWillUnmount 方法：

function?commitUnmount(
??finishedRoot:?FiberRoot,
??current:?Fiber,
??renderPriorityLevel:?ReactPriorityLevel,
):?void?{
??switch?(current.tag)?{
????case?ClassComponent:?{
??????const?instance?=?current.stateNode;
??????if?(typeof?instance.componentWillUnmount?===?'function')?{
????????safelyCallComponentWillUnmount(current,?instance);
??????}
??????return;
????}
??}
}

layout階段

layout階段 會執(zhí)行 commitLayoutEffects 方法，里面核心是執(zhí)行commitLifeCycles方法。在這個方法中會根據(jù) fiber 節(jié)點的類型執(zhí)行不同的處理。

function?commitLifeCycles(
??finishedRoot:?FiberRoot,
??current:?Fiber?|?null,
??finishedWork:?Fiber,
??committedLanes:?Lanes,
):?void?{
??switch?(finishedWork.tag)?{
????case?FunctionComponent:?{
??????commitHookEffectListMount(HookLayout?|?HookHasEffect,?finishedWork);
??????schedulePassiveEffects(finishedWork);
??????return;
????}
??}
}

對于 FunctionComponent，會把 HookLayout 這個 tag 類型傳給 commitHookEffectListMount 方法，也就是說這里會執(zhí)行 useLayoutEffect 的回調(diào)函數(shù)。

接著會執(zhí)行 schedulePassiveEffects 方法：

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
??????)?{
????????enqueuePendingPassiveHookEffectUnmount(finishedWork,?effect);
????????enqueuePendingPassiveHookEffectMount(finishedWork,?effect);
??????}
??????effect?=?next;
????}?while?(effect?!==?firstEffect);
??}
}

在這里會分別注冊 useEffect 銷毀函數(shù)和回調(diào)函數(shù)，其實也就是把 effect 分別推進(jìn) pendingPassiveHookEffectsUnmount 和 pendingPassiveHookEffectsMount 這兩個數(shù)組中，用于「后續(xù)」取出來執(zhí)行。

對于 ClassComponent，如果 current 為空，也就是這個節(jié)點是首次 render，則會執(zhí)行它的 componentDidMount 生命周期方法，否則會執(zhí)行 componentDidUpdate 方法：

function?commitLifeCycles(
??finishedRoot:?FiberRoot,
??current:?Fiber?|?null,
??finishedWork:?Fiber,
??committedLanes:?Lanes,
):?void?{
??switch?(finishedWork.tag)?{
????case?ClassComponent:?{
??????const?instance?=?finishedWork.stateNode;
??????if?(finishedWork.effectTag?&?Update)?{
????????if?(current?===?null)?{
??????????instance.componentDidMount();
????????}?else?{
??????????instance.componentDidUpdate(
????????????prevProps,
????????????prevState,
????????????instance.__reactInternalSnapshotBeforeUpdate,
??????????);
????????}
??????}
??????return;
????}
??}
}

commit 階段總結(jié)

• 等待執(zhí)行完上一輪渲染的 useEffect
• 重置一些全局變量（如：workInProgressRoot）
• 更新副作用列表 effect list。根節(jié)點的副作用列表是不包括自身的，如果根節(jié)點有副作用, 則需要把根節(jié)點添加到副作用列表的末尾
• 渲染
• 執(zhí)行 componentDidMount、componentDidUpdate
• 執(zhí)行 useLayoutEffect 的回調(diào)函數(shù)
• 注冊 useEffect 的回調(diào)函數(shù)和銷毀函數(shù)，等 commit 階段結(jié)束后再異步執(zhí)行
• 執(zhí)行 DOM 增刪改
• 執(zhí)行 useLayoutEffect 的銷毀函數(shù)
• 執(zhí)行 getSnapshotBeforeUpdate
• 調(diào)度 useEffect
• beforeMutation
• mutation
• 切換當(dāng)前 fiber 樹（root.current = finishedWork），使得 fiberRoot 的 current 指向的是當(dāng)前頁面展示的 fiber 樹。
• layout