我們會遇到這樣的場景：某個組件想要暴露一些方法，來供外部組件來調用。例如我們在開發form表單的時候，就需要把設置表單值、重置值、提交等方法暴露給外部使用。會有如下代碼：

import { forwardRef } from 'react';const Form = forwardRef(function MyForm(props, ref) {useImperativeHandle(ref, () => {return {// ... 你的方法 ...};}, []);return (<div {...props} ref={ref}><input type="text" /></div>);
});

在組件外部，只需傳入ref屬性，即可調用form組件提供的方法。

獲取最新的state

由于react中，setState之后，是采用異步調度、批量更新的策略，導致我們無法直接獲取最新的state。在使用class組件的時候，我們可以通過傳遞第二個參數，傳一個回調用函數，來讓我們獲取最新的state (在React 18以后，就算在class component里面，在setTimeout、原生事件回調里面，也是異步批量更新了)。在hooks里面，我目前只能通過useEffect，把當前state當作依賴傳入，來在useEffect回調函數里面獲取最新的state。
在setState的時候，其實就是在調用dispatchSetState，源碼如下 (刪掉了一些注釋和DEV代碼):

function dispatchSetState<S, A>(fiber: Fiber,queue: UpdateQueue<S, A>,action: A,
) // 計算更新優先級const lane = requestUpdateLane(fiber);const update: Update<S, A> = {lane,action,hasEagerState: false,eagerState: null,next: (null: any),};// 判斷當前fiber是否正在處于更新中，若是則把當前更新進行排隊if (isRenderPhaseUpdate(fiber)) {enqueueRenderPhaseUpdate(queue, update);} else {const alternate = fiber.alternate;if (fiber.lanes === NoLanes &&(alternate === null || alternate.lanes === NoLanes)) {const lastRenderedReducer = queue.lastRenderedReducer;if (lastRenderedReducer !== null) {let prevDispatcher;try {const currentState: S = (queue.lastRenderedState: any);const eagerState = lastRenderedReducer(currentState, action);update.hasEagerState = true;update.eagerState = eagerState;// 若新舊狀態無變化，則直接返回，啥也不干if (is(eagerState, currentState)) {enqueueConcurrentHookUpdateAndEagerlyBailout(fiber, queue, update);return;}} catch (error) {// Suppress the error. It will throw again in the render phase.} finally {if (__DEV__) {ReactCurrentDispatcher.current = prevDispatcher;}}}}const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);if (root !== null) {const eventTime = requestEventTime();scheduleUpdateOnFiber(root, fiber, lane, eventTime);entangleTransitionUpdate(root, queue, lane);}}markUpdateInDevTools(fiber, lane, action);
}

scheduleUpdateOnFiber則是react內部的核心調度方法，源碼如下：

export function scheduleUpdateOnFiber(root: FiberRoot,fiber: Fiber,lane: Lane,eventTime: number,
) {checkForNestedUpdates();// Mark that the root has a pending update.markRootUpdated(root, lane, eventTime);if ((executionContext & RenderContext) !== NoLanes &&root === workInProgressRoot) {warnAboutRenderPhaseUpdatesInDEV(fiber);// Track lanes that were updated during the render phaseworkInProgressRootRenderPhaseUpdatedLanes = mergeLanes(workInProgressRootRenderPhaseUpdatedLanes,lane,);} else {// This is a normal update, scheduled from outside the render phase. For// example, during an input event.if (enableUpdaterTracking) {if (isDevToolsPresent) {addFiberToLanesMap(root, fiber, lane);}}warnIfUpdatesNotWrappedWithActDEV(fiber);if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {if ((executionContext & CommitContext) !== NoContext &&root === rootCommittingMutationOrLayoutEffects) {if (fiber.mode & ProfileMode) {let current = fiber;while (current !== null) {if (current.tag === Profiler) {const {id, onNestedUpdateScheduled} = current.memoizedProps;if (typeof onNestedUpdateScheduled === 'function') {onNestedUpdateScheduled(id);}}current = current.return;}}}}if (enableTransitionTracing) {const transition = ReactCurrentBatchConfig.transition;if (transition !== null) {if (transition.startTime === -1) {transition.startTime = now();}addTransitionToLanesMap(root, transition, lane);}}if (root === workInProgressRoot) {if (deferRenderPhaseUpdateToNextBatch ||(executionContext & RenderContext) === NoContext) {workInProgressRootInterleavedUpdatedLanes = mergeLanes(workInProgressRootInterleavedUpdatedLanes,lane,);}if (workInProgressRootExitStatus === RootSuspendedWithDelay) {markRootSuspended(root, workInProgressRootRenderLanes);}}ensureRootIsScheduled(root, eventTime);if (lane === SyncLane &&executionContext === NoContext &&(fiber.mode & ConcurrentMode) === NoMode &&// Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.!(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)) {resetRenderTimer();flushSyncCallbacksOnlyInLegacyMode();}}
}

我們繼續追蹤ensureRootIsScheduled方法，此源碼就省略了，然后會調用scheduleMicrotask方法，源碼如下：

export const scheduleMicrotask: any =typeof queueMicrotask === 'function'? queueMicrotask: typeof localPromise !== 'undefined'? callback =>localPromise.resolve(null).then(callback).catch(handleErrorInNextTick): scheduleTimeout;

會優先使用queueMicrotask來添加一個微任務，此方法是一個標準的web api，可以不借助Promise來往微任務隊列里面添加一個任務。若當前環境不支持queueMicrotask，則依次優先使用Promise，setTimeout。這與vue的nextTick源碼實現是基本一致的。通過以上的分析，我們可以大致了解了react異步批量更新的調度過程。