React render核心階段深入探究穿插scheduler與reconciler
本章將講解 react 的核心階段之一 —— render階段，我們將探究以下部分內(nèi)容的源碼：
- 更新任務的觸發(fā)
- 更新任務的創(chuàng)建
- reconciler 過程同步和異步遍歷及執(zhí)行任務
- scheduler 是如何實現(xiàn)幀空閑時間調度任務以及中斷任務的
觸發(fā)更新
觸發(fā)更新的方式主要有以下幾種：ReactDOM.render、setState、forUpdate 以及 hooks 中的 useState 等，關于 hooks 的我們后面再詳細講解，這里先關注前三種情況。
ReactDOM.render
ReactDOM.render 作為 react 應用程序的入口函數(shù)，在頁面首次渲染時便會觸發(fā)，頁面 dom 的首次創(chuàng)建，也屬于觸發(fā) react 更新的一種情況。
首先調用 legacyRenderSubtreeIntoContainer 函數(shù)，校驗根節(jié)點 root 是否存在，若不存在，調用 legacyCreateRootFromDOMContainer 創(chuàng)建根節(jié)點 root、rootFiber 和 fiberRoot 并綁定它們之間的引用關系，然后調用 updateContainer 去非批量執(zhí)行后面的更新流程；若存在，直接調用 updateContainer 去批量執(zhí)行后面的更新流程：
// packages/react-dom/src/client/ReactDOMLegacy.js
function legacyRenderSubtreeIntoContainer(
parentComponent: ?React$Component<any, any>, children: ReactNodeList, container: Container, forceHydrate: boolean, callback: ?Function,
) {
// ...
let root: RootType = (container._reactRootContainer: any);
let fiberRoot;
if (!root) {
// 首次渲染時根節(jié)點不存在
// 通過 legacyCreateRootFromDOMContainer 創(chuàng)建根節(jié)點、fiberRoot 和 rootFiber
root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
container,
forceHydrate,
);
fiberRoot = root._internalRoot;
if (typeof callback === 'function') {
const originalCallback = callback;
callback = function() {
const instance = getPublicRootInstance(fiberRoot);
originalCallback.call(instance);
};
}
// 非批量執(zhí)行更新流程
unbatchedUpdates(() => {
updateContainer(children, fiberRoot, parentComponent, callback);
});
} else {
fiberRoot = root._internalRoot;
if (typeof callback === 'function') {
const originalCallback = callback;
callback = function() {
const instance = getPublicRootInstance(fiberRoot);
originalCallback.call(instance);
};
}
// 批量執(zhí)行更新流程
updateContainer(children, fiberRoot, parentComponent, callback);
}
return getPublicRootInstance(fiberRoot);
}updateContainer 函數(shù)中，主要做了以下幾件事情：
- requestEventTime：獲取更新觸發(fā)的時間
- requestUpdateLane：獲取當前任務優(yōu)先級
- createUpdate：創(chuàng)建更新
- enqueueUpdate：將任務推進更新隊列
- scheduleUpdateOnFiber：調度更新
關于這幾個函數(shù)稍后會詳細講到
// packages/react-dom/src/client/ReactDOMLegacy.js
export function updateContainer(
element: ReactNodeList, container: OpaqueRoot, parentComponent: ?React$Component<any, any>, callback: ?Function,
): Lane {
// ...
const current = container.current;
const eventTime = requestEventTime(); // 獲取更新觸發(fā)的時間
// ...
const lane = requestUpdateLane(current); // 獲取任務優(yōu)先級
if (enableSchedulingProfiler) {
markRenderScheduled(lane);
}
const context = getContextForSubtree(parentComponent);
if (container.context === null) {
container.context = context;
} else {
container.pendingContext = context;
}
// ...
const update = createUpdate(eventTime, lane); // 創(chuàng)建更新任務
update.payload = {element};
callback = callback === undefined ? null : callback;
if (callback !== null) {
// ...
update.callback = callback;
}
enqueueUpdate(current, update); // 將任務推入更新隊列
scheduleUpdateOnFiber(current, lane, eventTime); // schedule 進行調度
return lane;
}setState
setState 時類組件中我們最常用的修改狀態(tài)的方法，狀態(tài)修改會觸發(fā)更新流程。
class 組件在原型鏈上定義了 setState 方法，其調用了觸發(fā)器 updater 上的 enqueueSetState 方法：
// packages/react/src/ReactBaseClasses.js
Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object' ||
typeof partialState === 'function' ||
partialState == null,
'setState(...): takes an object of state variables to update or a ' +
'function which returns an object of state variables.',
);
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};然后我們再來看以下 updater 上定義的 enqueueSetState 方法，一看到這我們就了然了，和 updateContainer 方法中做的事情幾乎一模一樣，都是觸發(fā)后續(xù)的更新調度。
// packages/react-reconciler/src/ReactFiberClassComponent.old.js
const classComponentUpdater = {
isMounted,
enqueueSetState(inst, payload, callback) {
const fiber = getInstance(inst);
const eventTime = requestEventTime(); // 獲取更新觸發(fā)的時間
const lane = requestUpdateLane(fiber); // 獲取任務優(yōu)先級
const update = createUpdate(eventTime, lane); // 創(chuàng)建更新任務
update.payload = payload;
if (callback !== undefined && callback !== null) {
if (__DEV__) {
warnOnInvalidCallback(callback, 'setState');
}
update.callback = callback;
}
enqueueUpdate(fiber, update); // 將任務推入更新隊列
scheduleUpdateOnFiber(fiber, lane, eventTime); // schedule 進行調度
// ...
if (enableSchedulingProfiler) {
markStateUpdateScheduled(fiber, lane);
}
},
// ...
};forceUpdate
forceUpdate 的流程與 setState 幾乎一模一樣：
同樣其調用了觸發(fā)器 updater 上的 enqueueForceUpdate 方法，enqueueForceUpdate 方法也同樣是觸發(fā)了一系列的更新流程：相關參考視頻講解：傳送門
reconciler/src/ReactFiberClassComponent.old.js
const classComponentUpdater = {
isMounted,
// ...
enqueueForceUpdate(inst, callback) {
const fiber = getInstance(inst);
const eventTime = requestEventTime(); // 獲取更新觸發(fā)的時間
const lane = requestUpdateLane(fiber); // 獲取任務優(yōu)先級
const update = createUpdate(eventTime, lane); // 創(chuàng)建更新
update.tag = ForceUpdate;
if (callback !== undefined && callback !== null) {
if (__DEV__) {
warnOnInvalidCallback(callback, 'forceUpdate');
}
update.callback = callback;
}
enqueueUpdate(fiber, update); // 將任務推進更新隊列
scheduleUpdateOnFiber(fiber, lane, eventTime); // 觸發(fā)更新調度
// ...
if (enableSchedulingProfiler) {
markForceUpdateScheduled(fiber, lane);
}
},
};創(chuàng)建更新任務
可以發(fā)現(xiàn)，上述的三種觸發(fā)更新的動作，最后殊途同歸，都會走上述流程圖中從 requestEventTime 到 scheduleUpdateOnFiber 這一流程，去創(chuàng)建更新任務，先我們詳細看下更新任務是如何創(chuàng)建的。
獲取更新觸發(fā)時間
前面的文章中我們講到過，react 執(zhí)行更新過程中，會將更新任務拆解，每一幀優(yōu)先執(zhí)行高優(yōu)先級的任務，從而保證用戶體驗的流暢。那么即使對于同樣優(yōu)先級的任務，在任務多的情況下該優(yōu)先執(zhí)行哪一些呢？
react 通過 requestEventTime 方法去創(chuàng)建一個 currentEventTime，用于標識更新任務觸發(fā)的時間，對于相同時間的任務，會批量去執(zhí)行。同樣優(yōu)先級的任務，currentEventTime 值越小，就會越早執(zhí)行。
我們看一下 requestEventTime 方法的實現(xiàn)：
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
export function requestEventTime() {
if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
// 在 react 執(zhí)行過程中，直接返回當前時間
return now();
}
// 如果不在 react 執(zhí)行過程中
if (currentEventTime !== NoTimestamp) {
// 正在執(zhí)行瀏覽器事件，返回上次的 currentEventTime
return currentEventTime;
}
// react 中斷后首次更新，計算新的 currentEventTime
currentEventTime = now();
return currentEventTime;
}在這個方法中，(executionContext & (RenderContext | CommitContext) 做了二進制運算，RenderContext 代表著 react 正在計算更新，CommitContext 代表著 react 正在提交更新。所以這句話是判斷當前 react 是否處在計算或者提交更新的階段，如果是則直接返回 now()。
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js export const NoContext = /* */ 0b0000000; const BatchedContext = /* */ 0b0000001; const EventContext = /* */ 0b0000010; const DiscreteEventContext = /* */ 0b0000100; const LegacyUnbatchedContext = /* */ 0b0001000; const RenderContext = /* */ 0b0010000; const CommitContext = /* */ 0b0100000; export const RetryAfterError = /* */ 0b1000000; let executionContext: ExecutionContext = NoContext;
再來看一下 now 的代碼，這里的意思時，當前后的更新任務時間差小于 10ms 時，直接采用上次的 Scheduler_now，這樣可以抹平 10ms 內(nèi)更新任務的時間差， 有利于批量更新：
// packages/react-reconciler/src/SchedulerWithReactIntegration.old.js export const now = initialTimeMs < 10000 ? Scheduler_now : () => Scheduler_now() - initialTimeMs;
綜上所述，requestEvent 做的事情如下：
- 在 react 的 render 和 commit 階段我們直接獲取更新任務的觸發(fā)時間，并抹平相差 10ms 以內(nèi)的更新任務以便于批量執(zhí)行。
- 當 currentEventTime 不等于 NoTimestamp 時，則判斷其正在執(zhí)行瀏覽器事件，react 想要同樣優(yōu)先級的更新任務保持相同的時間，所以直接返回上次的 currentEventTime
- 如果是 react 上次中斷之后的首次更新，那么給 currentEventTime 賦一個新的值
劃分更新任務優(yōu)先級
說完了相同優(yōu)先級任務的觸發(fā)時間，那么任務的優(yōu)先級又是如何劃分的呢？這里就要提到 requestUpdateLane，我們來看一下其源碼：
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
export function requestUpdateLane(fiber: Fiber): Lane {
// ...
// 根據(jù)記錄下的事件的優(yōu)先級，獲取任務調度的優(yōu)先級
const schedulerPriority = getCurrentPriorityLevel();
// ...
let lane;
if (
(executionContext & DiscreteEventContext) !== NoContext &&
schedulerPriority === UserBlockingSchedulerPriority
) {
// 如果是用戶阻塞級別的事件，則通過InputDiscreteLanePriority 計算更新的優(yōu)先級 lane
lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes);
} else {
// 否則依據(jù)事件的優(yōu)先級計算 schedulerLanePriority
const schedulerLanePriority = schedulerPriorityToLanePriority(
schedulerPriority,
);
if (decoupleUpdatePriorityFromScheduler) {
const currentUpdateLanePriority = getCurrentUpdateLanePriority();
// 根據(jù)計算得到的 schedulerLanePriority，計算更新的優(yōu)先級 lane
lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
}
return lane;
}它首先找出會通過 getCurrentPriorityLevel 方法，根據(jù) Scheduler 中記錄的事件優(yōu)先級，獲取任務調度的優(yōu)先級 schedulerPriority。然后通過 findUpdateLane 方法計算得出 lane，作為更新過程中的優(yōu)先級。
findUpdateLane 這個方法中，按照事件的類型，匹配不同級別的 lane，事件類型的優(yōu)先級劃分如下，值越高，代表優(yōu)先級越高：
// packages/react-reconciler/src/ReactFiberLane.js export const SyncLanePriority: LanePriority = 15; export const SyncBatchedLanePriority: LanePriority = 14; const InputDiscreteHydrationLanePriority: LanePriority = 13; export const InputDiscreteLanePriority: LanePriority = 12; const InputContinuousHydrationLanePriority: LanePriority = 11; export const InputContinuousLanePriority: LanePriority = 10; const DefaultHydrationLanePriority: LanePriority = 9; export const DefaultLanePriority: LanePriority = 8; const TransitionHydrationPriority: LanePriority = 7; export const TransitionPriority: LanePriority = 6; const RetryLanePriority: LanePriority = 5; const SelectiveHydrationLanePriority: LanePriority = 4; const IdleHydrationLanePriority: LanePriority = 3; const IdleLanePriority: LanePriority = 2; const OffscreenLanePriority: LanePriority = 1; export const NoLanePriority: LanePriority = 0;
創(chuàng)建更新對象
eventTime 和 lane 都創(chuàng)建好了之后，就該創(chuàng)建更新了，createUpdate 就是基于上面兩個方法所創(chuàng)建的 eventTime 和 lane，去創(chuàng)建一個更新對象：
// packages/react-reconciler/src/ReactUpdateQueue.old.js
export function createUpdate(eventTime: number, lane: Lane): Update<*> {
const update: Update<*> = {
eventTime, // 更新要出發(fā)的事件
lane, // 優(yōu)先級
tag: UpdateState, // 指定更新的類型，0更新 1替換 2強制更新 3捕獲性的更新
payload: null, // 要更新的內(nèi)容，例如 setState 接收的第一個參數(shù)
callback: null, // 更新完成后的回調
next: null, // 指向下一個更新
};
return update;
}關聯(lián) fiber 的更新隊列
創(chuàng)建好了 update 對象之后，緊接著調用 enqueueUpdate 方法把update 對象放到 關聯(lián)的 fiber 的 updateQueue 隊列之中：
// packages/react-reconciler/src/ReactUpdateQueue.old.js
export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
// 獲取當前 fiber 的更新隊列
const updateQueue = fiber.updateQueue;
if (updateQueue === null) {
// 若 updateQueue 為空，表示 fiber 還未渲染，直接退出
return;
}
const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;
const pending = sharedQueue.pending;
if (pending === null) {
// pending 為 null 時表示首次更新，創(chuàng)建循環(huán)列表
update.next = update;
} else {
// 將 update 插入到循環(huán)列表中
update.next = pending.next;
pending.next = update;
}
sharedQueue.pending = update;
// ...
}
reconciler 過程
上面的更新任務創(chuàng)建好了并且關聯(lián)到了 fiber 上，下面就該到了 react render 階段的核心之一 —— reconciler 階段。
根據(jù)任務類型執(zhí)行不同更新
reconciler 階段會協(xié)調任務去執(zhí)行，以 scheduleUpdateOnFiber 為入口函數(shù)，首先會調用 checkForNestedUpdates 方法，檢查嵌套的更新數(shù)量，若嵌套數(shù)量大于 50 層時，被認為是循環(huán)更新（無限更新）。此時會拋出異常，避免了例如在類組件 render 函數(shù)中調用了 setState 這種死循環(huán)的情況。
然后通過 markUpdateLaneFromFiberToRoot 方法，向上遞歸更新 fiber 的 lane，lane 的更新很簡單，就是將當前任務 lane 與之前的 lane 進行二進制或運算疊加。
我們看一下其源碼：
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
export function scheduleUpdateOnFiber(
fiber: Fiber, lane: Lane, eventTime: number,
) {
// 檢查是否有循環(huán)更新
// 避免例如在類組件 render 函數(shù)中調用了 setState 這種死循環(huán)的情況
checkForNestedUpdates();
// ...
// 自底向上更新 child.fiberLanes
const root = markUpdateLaneFromFiberToRoot(fiber, lane);
// ...
// 標記 root 有更新，將 update 的 lane 插入到root.pendingLanes 中
markRootUpdated(root, lane, eventTime);
if (lane === SyncLane) { // 同步任務，采用同步渲染
if (
(executionContext & LegacyUnbatchedContext) !== NoContext &&
(executionContext & (RenderContext | CommitContext)) === NoContext
) {
// 如果本次是同步更新，并且當前還未開始渲染
// 表示當前的 js 主線程空閑，并且沒有 react 任務在執(zhí)行
// ...
// 調用 performSyncWorkOnRoot 執(zhí)行同步更新任務
performSyncWorkOnRoot(root);
} else {
// 如果本次時同步更新，但是有 react 任務正在執(zhí)行
// 調用 ensureRootIsScheduled 去復用當前正在執(zhí)行的任務，讓其將本次的更新一并執(zhí)行
ensureRootIsScheduled(root, eventTime);
schedulePendingInteractions(root, lane);
// ...
} else {
// 如果本次更新是異步任務
// ...
// 調用 ensureRootIsScheduled 執(zhí)行可中斷更新
ensureRootIsScheduled(root, eventTime);
schedulePendingInteractions(root, lane);
}
mostRecentlyUpdatedRoot = root;
}然后會根據(jù)任務類型以及當前線程所處的 react 執(zhí)行階段，去判斷進行何種類型的更新：
執(zhí)行同步更新
當任務的類型為同步任務，并且當前的 js 主線程空閑（沒有正在執(zhí)行的 react 任務時），會通過 performSyncWorkOnRoot(root) 方法開始執(zhí)行同步任務。
performSyncWorkOnRoot 里面主要做了兩件事：
- renderRootSync 從根節(jié)點開始進行同步渲染任務
- commitRoot 執(zhí)行 commit 流程
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function performSyncWorkOnRoot(root) {
// ...
exitStatus = renderRootSync(root, lanes);
// ...
commitRoot(root);
// ...
}當任務類型為同步類型，但是 js 主線程非空閑時。會執(zhí)行 ensureRootIsScheduled 方法：
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
// ...
// 如果有正在執(zhí)行的任務，
if (existingCallbackNode !== null) {
const existingCallbackPriority = root.callbackPriority;
if (existingCallbackPriority === newCallbackPriority) {
// 任務優(yōu)先級沒改變，說明可以復用之前的任務一起執(zhí)行
return;
}
// 任務優(yōu)先級改變了，說明不能復用。
// 取消正在執(zhí)行的任務，重新去調度
cancelCallback(existingCallbackNode);
}
// 進行一個新的調度
let newCallbackNode;
if (newCallbackPriority === SyncLanePriority) {
// 如果是同步任務優(yōu)先級，執(zhí)行 performSyncWorkOnRoot
newCallbackNode = scheduleSyncCallback(
performSyncWorkOnRoot.bind(null, root),
);
} else if (newCallbackPriority === SyncBatchedLanePriority) {
// 如果是批量同步任務優(yōu)先級，執(zhí)行 performSyncWorkOnRoot
newCallbackNode = scheduleCallback(
ImmediateSchedulerPriority,
performSyncWorkOnRoot.bind(null, root),
);
} else {
// ...
// 如果不是批量同步任務優(yōu)先級，執(zhí)行 performConcurrentWorkOnRoot
newCallbackNode = scheduleCallback(
schedulerPriorityLevel,
performConcurrentWorkOnRoot.bind(null, root),
);
}
// ...
}
ensureRootIsScheduled 方法中，會先看加入了新的任務后根節(jié)點任務優(yōu)先級是否有變更，如果無變更，說明新的任務會被當前的 schedule 一同執(zhí)行；如果有變更，則創(chuàng)建新的 schedule，然后也是調用performSyncWorkOnRoot(root) 方法開始執(zhí)行同步任務。
執(zhí)行可中斷更新
當任務的類型不是同步類型時，react 也會執(zhí)行 ensureRootIsScheduled 方法，因為是異步任務，最終會執(zhí)行 performConcurrentWorkOnRoot 方法，去進行可中斷的更新，下面會詳細講到。
workLoop
同步
以同步更新為例，performSyncWorkOnRoot 會經(jīng)過以下流程，performSyncWorkOnRoot ——> renderRootSync ——> workLoopSync。
workLoopSync 中，只要 workInProgress（workInProgress fiber 樹中新創(chuàng)建的 fiber 節(jié)點） 不為 null，就會一直循環(huán)，執(zhí)行 performUnitOfWork 函數(shù)。
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function workLoopSync() {
while (workInProgress !== null) {
performUnitOfWork(workInProgress);
}
}
可中斷
可中斷模式下，performConcurrentWorkOnRoot 會執(zhí)行以下過程：performConcurrentWorkOnRoot ——> renderRootConcurrent ——> workLoopConcurrent。
相比于 workLoopSync, workLoopConcurrent 在每一次對 workInProgress 執(zhí)行 performUnitOfWork 前，會先判斷以下 shouldYield() 的值。若為 false 則繼續(xù)執(zhí)行，若為 true 則中斷執(zhí)行。
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function workLoopConcurrent() {
while (workInProgress !== null && !shouldYield()) {
performUnitOfWork(workInProgress);
}
}
performUnitOfWork
最終無論是同步執(zhí)行任務，還是可中斷地執(zhí)行任務，都會進入 performUnitOfWork 函數(shù)中。
performUnitOfWork 中會以 fiber 作為單元，進行協(xié)調過程。每次 beginWork 執(zhí)行后都會更新 workIngProgress，從而響應了上面 workLoop 的循環(huán)。
直至 fiber 樹便利完成后，workInProgress 此時置為 null，執(zhí)行 completeUnitOfWork 函數(shù)。
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function performUnitOfWork(unitOfWork: Fiber): void {
// ...
const current = unitOfWork.alternate;
// ...
let next;
if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) {
// ...
next = beginWork(current, unitOfWork, subtreeRenderLanes);
} else {
next = beginWork(current, unitOfWork, subtreeRenderLanes);
}
// ...
if (next === null) {
completeUnitOfWork(unitOfWork);
} else {
workInProgress = next;
}
ReactCurrentOwner.current = null;
}
beginWork
beginWork 是根據(jù)當前執(zhí)行環(huán)境，封裝調用了 originalBeginWork 函數(shù)：
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
let beginWork;
if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
beginWork = (current, unitOfWork, lanes) => {
// ...
try {
return originalBeginWork(current, unitOfWork, lanes);
} catch (originalError) {
// ...
}
};
} else {
beginWork = originalBeginWork;
}
originalBeginWork 中，會根據(jù) workInProgress 的 tag 屬性，執(zhí)行不同類型的 react 元素的更新函數(shù)。但是他們都大同小異，不論是 tag 是何種類型，更新函數(shù)最終都會去調用 reconcileChildren 函數(shù)。
// packages/react-reconciler/src/ReactFiberBeginWork.old.js
function beginWork(
current: Fiber | null, workInProgress: Fiber, renderLanes: Lanes,
): Fiber | null {
const updateLanes = workInProgress.lanes;
workInProgress.lanes = NoLanes;
// 針對 workInProgress 的tag，執(zhí)行相應的更新
switch (workInProgress.tag) {
// ...
case HostRoot:
return updateHostRoot(current, workInProgress, renderLanes);
case HostComponent:
return updateHostComponent(current, workInProgress, renderLanes);
// ...
}
// ...
}以 updateHostRoot 為例，根據(jù)根 fiber 是否存在，去執(zhí)行 mountChildFibers 或者 reconcileChildren：
// packages/react-reconciler/src/ReactFiberBeginWork.old.js
function updateHostRoot(current, workInProgress, renderLanes) {
// ...
const root: FiberRoot = workInProgress.stateNode;
if (root.hydrate && enterHydrationState(workInProgress)) {
// 若根 fiber 不存在，說明是首次渲染，調用 mountChildFibers
// ...
const child = mountChildFibers(
workInProgress,
null,
nextChildren,
renderLanes,
);
workInProgress.child = child;
} else {
// 若根 fiber 存在，調用 reconcileChildren
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
resetHydrationState();
}
return workInProgress.child;
}reconcileChildren 做的事情就是 react 的另一核心之一 —— diff 過程，在下一篇文章中會詳細講。
completeUnitOfWork
當 workInProgress 為 null 時，也就是當前任務的 fiber 樹遍歷完之后，就進入到了 completeUnitOfWork 函數(shù)。
經(jīng)過了 beginWork 操作，workInProgress 節(jié)點已經(jīng)被打上了flags 副作用標簽。completeUnitOfWork 方法中主要是逐層收集 effects
鏈，最終收集到 root 上，供接下來的commit階段使用。
completeUnitOfWork 結束后，render 階段便結束了，后面就到了 commit 階段。
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function completeUnitOfWork(unitOfWork: Fiber): void {
let completedWork = unitOfWork;
do {
// ...
// 對節(jié)點進行completeWork，生成DOM，更新props，綁定事件
next = completeWork(current, completedWork, subtreeRenderLanes);
if (
returnFiber !== null &&
(returnFiber.flags & Incomplete) === NoFlags
) {
// 將當前節(jié)點的 effectList 并入到父節(jié)點的 effectList
if (returnFiber.firstEffect === null) {
returnFiber.firstEffect = completedWork.firstEffect;
}
if (completedWork.lastEffect !== null) {
if (returnFiber.lastEffect !== null) {
returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
}
returnFiber.lastEffect = completedWork.lastEffect;
}
// 將自身添加到 effectList 鏈，添加時跳過 NoWork 和 PerformedWork的 flags，因為真正的 commit 時用不到
const flags = completedWork.flags;
if (flags > PerformedWork) {
if (returnFiber.lastEffect !== null) {
returnFiber.lastEffect.nextEffect = completedWork;
} else {
returnFiber.firstEffect = completedWork;
}
returnFiber.lastEffect = completedWork;
}
}
} while (completedWork !== null);
// ...
}
實現(xiàn)幀空閑調度任務
剛剛上面說到了在執(zhí)行可中斷的更新時，瀏覽器會在每一幀空閑時刻去執(zhí)行 react 更新任務，那么空閑時刻去執(zhí)行是如何實現(xiàn)的呢？我們很容易聯(lián)想到一個 api —— requestIdleCallback。但由于 requestIdleCallback 的兼容性問題以及 react 對應部分高優(yōu)先級任務可能犧牲部分幀的需要，react 通過自己實現(xiàn)了類似的功能代替了 requestIdleCallback。
我們上面講到執(zhí)行可中斷更新時，performConcurrentWorkOnRoot 函數(shù)時通過 scheduleCallback 包裹起來的：
scheduleCallback( schedulerPriorityLevel, performConcurrentWorkOnRoot.bind(null, root), );
scheduleCallback 函數(shù)是引用了 packages/scheduler/src/Scheduler.js 路徑下的 unstable_scheduleCallback 函數(shù)，我們來看一下這個函數(shù)，它會去按計劃插入調度任務：
// packages/scheduler/src/Scheduler.js
function unstable_scheduleCallback(priorityLevel, callback, options) {
// ...
if (startTime > currentTime) {
// 當前任務已超時，插入超時隊列
// ...
} else {
// 任務未超時，插入調度任務隊列
newTask.sortIndex = expirationTime;
push(taskQueue, newTask);
// 符合更新調度執(zhí)行的標志
if (!isHostCallbackScheduled && !isPerformingWork) {
isHostCallbackScheduled = true;
// requestHostCallback 調度任務
requestHostCallback(flushWork);
}
}
return newTask;
}
將任務插入了調度隊列之后，會通過 requestHostCallback 函數(shù)去調度任務。
react 通過 new MessageChannel() 創(chuàng)建了消息通道，當發(fā)現(xiàn) js 線程空閑時，通過 postMessage 通知 scheduler 開始調度。然后 react 接收到調度開始的通知時，就通過 performWorkUntilDeadline 函數(shù)去更新當前幀的結束時間，以及執(zhí)行任務。從而實現(xiàn)了幀空閑時間的任務調度。
// packages/scheduler/src/forks/SchedulerHostConfig.default.js
// 獲取當前設備每幀的時長
forceFrameRate = function(fps) {
// ...
if (fps > 0) {
yieldInterval = Math.floor(1000 / fps);
} else {
yieldInterval = 5;
}
};
// 幀結束前執(zhí)行任務
const performWorkUntilDeadline = () => {
if (scheduledHostCallback !== null) {
const currentTime = getCurrentTime();
// 更新當前幀的結束時間
deadline = currentTime + yieldInterval;
const hasTimeRemaining = true;
try {
const hasMoreWork = scheduledHostCallback(
hasTimeRemaining,
currentTime,
);
// 如果還有調度任務就執(zhí)行
if (!hasMoreWork) {
isMessageLoopRunning = false;
scheduledHostCallback = null;
} else {
// 沒有調度任務就通過 postMessage 通知結束
port.postMessage(null);
}
} catch (error) {
// ..
throw error;
}
} else {
isMessageLoopRunning = false;
}
needsPaint = false;
};
// 通過 MessageChannel 創(chuàng)建消息通道，實現(xiàn)任務調度通知
const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = performWorkUntilDeadline;
// 通過 postMessage，通知 scheduler 已經(jīng)開始了幀調度
requestHostCallback = function(callback) {
scheduledHostCallback = callback;
if (!isMessageLoopRunning) {
isMessageLoopRunning = true;
port.postMessage(null);
}
};
任務中斷
前面說到可中斷模式下的 workLoop，每次遍歷執(zhí)行 performUnitOfWork 前會先判斷 shouYield 的值
// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
function workLoopConcurrent() {
while (workInProgress !== null && !shouldYield()) {
performUnitOfWork(workInProgress);
}
}
我們看一下 shouYield 的值是如何獲取的：
// packages\scheduler\src\SchedulerPostTask.js
export function unstable_shouldYield() {
return getCurrentTime() >= deadline;
}
getCurrentTime 獲取的是當前的時間戳，deadline 上面講到了是瀏覽器每一幀結束的時間戳。也就是說 concurrent 模式下，react 會將這些非同步任務放到瀏覽器每一幀空閑時間段去執(zhí)行，若每一幀結束未執(zhí)行完，則中斷當前任務，待到瀏覽器下一幀的空閑再繼續(xù)執(zhí)行。
總結
總結一下 react render 階段的設計思想：
當發(fā)生渲染或者更新操作時，react 去創(chuàng)建一系列的任務，任務帶有優(yōu)先級，然后構建 workInProgress fiber 樹鏈表。
遍歷任務鏈表去執(zhí)行任務。每一幀幀先執(zhí)行瀏覽器的渲染等任務，如果當前幀還有空閑時間，則執(zhí)行任務，直到當前幀的時間用完。如果當前幀已經(jīng)沒有空閑時間，就等到下一幀的空閑時間再去執(zhí)行。如果當前幀沒有空閑時間但是當前任務鏈表有任務到期了或者有立即執(zhí)行任務，那么必須執(zhí)行的時候就以丟失幾幀的代價，執(zhí)行這些任務。執(zhí)行完的任務都會被從鏈表中刪除。
到此這篇關于React render核心階段深入探究穿插scheduler與reconciler的文章就介紹到這了,更多相關React render內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了詳解antd+react項目遷移vite的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
react中關于函數(shù)調用()與bind this的原因及分析
這篇文章主要介紹了react中關于函數(shù)調用()與bind this的原因及分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
react進階教程之異常處理機制error?Boundaries
在react中一旦出錯,如果每個組件去處理出錯情況則比較麻煩,下面這篇文章主要給大家介紹了關于react進階教程之異常處理機制error?Boundaries的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了使用Redux處理異步問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
React路由渲染方式與withRouter高階組件及自定義導航組件應用詳細介紹
這篇文章主要介紹了React路由三種渲染方式、withRouter高階組件、自定義導航組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
利用React Router4實現(xiàn)的服務端直出渲染(SSR)
這篇文章主要介紹了利用React Router4實現(xiàn)的服務端直出渲染(SSR)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家介紹了React的diff算法核心復用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
Taro?React自定義TabBar使用useContext解決底部選中異常
這篇文章主要為大家介紹了Taro?React底部自定義TabBar使用React?useContext解決底部選中異常(需要點兩次才能選中的問題)示例詳解，有需要的朋友可以借鑒參考下2023-08-08
本文通過實例給大家分享了編寫React組件項目實踐的全過程，對此有興趣的朋友可以參考下。2018-03-03
React Native模塊之Permissions權限申請的實例相機
這篇文章主要介紹了React Native模塊之Permissions權限申請的實例相機的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09