React-useImperativeHandle (forwardRef)

我们会遇到这样的场景：某个组件想要暴露一些方法，来供外部组件来调用。例如我们在开发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异步批量更新的调度过程。