当前位置：首页 > news >正文

React19源码系列之Hooks (useEffect、useLayoutEffect、useInsertionEffect)

news 2025/6/18 13:53:12

上篇文章记录了useState钩子函数的源码，这篇文章记录 useEffect、useLayoutEffect 和 useInsertionEffect 钩子函数，主要看看它们的源码实现、区别和应用场景。

useEffect：useEffect – React 中文文档

useLayoutEffect：useLayoutEffect – React 中文文档

useInsertionEffect：useInsertionEffect – React 中文文档

useEffect

useEffect 是 React 中用于处理 副作用 的核心 Hook，主要用于执行与渲染无关的操作。

function useEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {const dispatcher = resolveDispatcher();return dispatcher.useEffect(create, deps);
}

mountEffect

mountEffect 函数是 React 中用于在组件挂载阶段执行副作用操作的钩子函数。在 React 里，副作用操作可以是数据获取、订阅事件、手动修改 DOM 等。mountEffect 会在组件首次渲染到 DOM 之后执行副作用函数，并且可以选择性地指定依赖项数组，用于控制副作用函数的重新执行。

函数参数含义：

create：这是一个必需的参数，是一个函数。该函数会在组件挂载后执行，它可以返回一个可选的清理函数（类型为 () => void），用于在组件卸载时执行清理操作，比如取消订阅、清除定时器等。如果不需要清理操作，create 函数可以不返回任何值（即返回 void）。
deps：这是一个可选参数，类型可以是数组（Array<mixed>）、void 或者 null。deps 数组中的元素是副作用函数依赖的值。如果 deps 数组为空，副作用函数只会在组件挂载和卸载时执行；如果 deps 数组中的某个值发生变化，副作用函数会在组件重新渲染后再次执行。

function mountEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {mountEffectImpl(// 这是一个标志位，用于表示副作用的类型。// PassiveEffect 通常表示副作用是被动执行的，即不会阻塞渲染过程；//PassiveStaticEffect 可能与静态副作用相关。PassiveEffect | PassiveStaticEffect,HookPassive,// HookPassive：也是一个标志，用于标识这是一个被动的钩子类型create,// 回调函数deps,// 依赖项数组);
}

mountEffectImpl 函数

mountEffectImpl 函数是 React 内部用于实现副作用钩子（如 useEffect 在挂载阶段）的核心逻辑。它主要负责初始化钩子状态、设置 Fiber 节点的标志位，并将副作用信息存储在钩子的 memoizedState 中。

函数参数说明：

fiberFlags：类型为 Flags，是一个标志位，用于标识当前 Fiber 节点上副作用的类型和状态。不同的标志位组合可以表示不同的副作用行为，例如是否是被动副作用、是否需要立即执行等。
hookFlags：类型为 HookFlags，用于标识当前钩子的类型和状态，与 fiberFlags 类似，但更侧重于钩子本身的特性。
create：是一个函数，在组件挂载后会执行这个函数来产生副作用。它可以返回一个可选的清理函数（类型为 () => void），用于在组件卸载或副作用重新执行之前清理之前的副作用。
deps：依赖项数组，类型为 Array<mixed> | void | null。它决定了副作用函数在什么情况下会重新执行。如果 deps 为 undefined 或 null，副作用函数会在每次渲染时都执行；如果 deps 是一个空数组，副作用函数只会在组件挂载和卸载时执行；如果 deps 数组中有值，当这些值发生变化时，副作用函数会重新执行。

function mountEffectImpl(fiberFlags: Flags,hookFlags: HookFlags,create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {// 创建并返回当前hookconst hook = mountWorkInProgressHook();// 如果 deps 为 undefined，将 nextDeps 赋值为 null；否则，将 deps 赋值给 nextDepsconst nextDeps = deps === undefined ? null : deps;// currentlyRenderingFiber 表示当前正在渲染的 Fiber 节点。通过按位或操作将 fiberFlags 合并到 currentlyRenderingFiber.flags 中，标记当前 Fiber 节点上存在特定类型的副作用。currentlyRenderingFiber.flags |= fiberFlags;// pushEffect：是 React 内部的一个函数，用于将副作用信息存储到一个链表中。hook.memoizedState = pushEffect(HookHasEffect | hookFlags,//标志位create,// 副作用函数createEffectInstance(),//创建一个副作用实例对象，该对象可能包含副作用的相关信息，如清理函数等。nextDeps,// 依赖项数字);
}

pushEffect 函数

pushEffect 函数是 React 内部用于将副作用信息添加到当前正在渲染的 Fiber 节点的更新队列中的核心函数。在 React 的函数式组件中，副作用（如 useEffect 产生的副作用）会被组织成一个循环链表，pushEffect 函数负责创建副作用对象并将其插入到这个链表中。

函数参数说明

tag：类型为 HookFlags，是一个标志位，用于标识副作用的类型和状态，例如是否需要执行、是否是被动副作用等。
create：是一个函数，用于创建副作用。这个函数在副作用执行时会被调用，并且它可以返回一个可选的清理函数，用于在副作用重新执行或组件卸载时清理之前的副作用。
inst：类型为 EffectInstance，是一个副作用实例对象，可能包含一些与副作用相关的元数据。
deps：依赖项数组，类型为 Array<mixed> | null。它决定了副作用在什么情况下会重新执行。如果 deps 为 null，副作用会在每次渲染时都执行；如果 deps 是一个数组，当数组中的值发生变化时，副作用会重新执行。

function pushEffect(tag: HookFlags,create: () => (() => void) | void,inst: EffectInstance,deps: Array<mixed> | null,
): Effect {// 创建一个 Effect 类型的对象 effect，包含了副作用的各种信息，如标志位 tag、创建函数 create、副作用实例 inst、依赖项数组 deps，以及一个指向下一个副作用对象的指针 next，初始化为 nullconst effect: Effect = {tag,create,inst,deps,// Circularnext: (null: any),};// currentlyRenderingFiber 表示当前正在渲染的 Fiber 节点。//首先尝试从 currentlyRenderingFiber 的 updateQueue 属性中获取更新队列 componentUpdateQueue。let componentUpdateQueue: null | FunctionComponentUpdateQueue = (currentlyRenderingFiber.updateQueue: any);// 若更新队列为 null，则调用 createFunctionComponentUpdateQueue 函数创建一个新的更新队列，并将其赋值给 currentlyRenderingFiber 的 updateQueue 属性。if (componentUpdateQueue === null) {componentUpdateQueue = createFunctionComponentUpdateQueue();currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);}const lastEffect = componentUpdateQueue.lastEffect;// 如果 lastEffect 为 null，说明更新队列中还没有副作用对象，此时将 effect 的 next 指针指向自身，形成一个只有一个节点的循环链表，并将 componentUpdateQueue 的 lastEffect 指向 effect。if (lastEffect === null) {componentUpdateQueue.lastEffect = effect.next = effect;} else {// 构建循环队列const firstEffect = lastEffect.next;lastEffect.next = effect;effect.next = firstEffect;componentUpdateQueue.lastEffect = effect;}// 返回创建并插入到链表中的副作用对象。return effect;
}

createFunctionComponentUpdateQueue

React 中 函数组件更新队列 的创建逻辑，主要根据特性开关 enableUseMemoCacheHook 决定是否包含 memoCache 字段。

let createFunctionComponentUpdateQueue: () => FunctionComponentUpdateQueue;
// 一个布尔型特性开关，控制是否启用 useMemo 和 useCallback 的缓存优化。
if (enableUseMemoCacheHook) {createFunctionComponentUpdateQueue = () => {// 启用缓存优化的结构return {lastEffect: null, // 最后一个副作用链表events: null, // 事件处理相关状态stores: null, // 事件处理相关状态memoCache: null,  // memo 缓存（新增字段）};};
} else {createFunctionComponentUpdateQueue = () => {// 传统结构return {lastEffect: null,events: null,stores: null,};};
}

updateEffect

React 中 useEffect Hook 的 更新阶段 实现，主要用于 注册副作用 并在后续渲染时决定是否重新执行。

function updateEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {// PassiveEffect：表示这是一个异步副作用（在浏览器绘制后执行）。// HookPassive：标记 Hook 类型为 useEffect。// create：副作用创建函数。updateEffectImpl(PassiveEffect, HookPassive, create, deps);
}

updateEffectImpl

React 中 useEffect 和 useLayoutEffect 的 核心实现，主要负责 注册、更新和比较副作用。

function updateEffectImpl(fiberFlags: Flags,hookFlags: HookFlags,create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {// 获取当前 Hook 并准备依赖数组const hook = updateWorkInProgressHook();const nextDeps = deps === undefined ? null : deps;const effect: Effect = hook.memoizedState;// 存储副作用的实例信息，可能包含上一次的 cleanup 函数。const inst = effect.inst;// currentHook is null on initial mount when rerendering after a render phase// state update or for strict mode.if (currentHook !== null) {if (nextDeps !== null) {const prevEffect: Effect = currentHook.memoizedState;const prevDeps = prevEffect.deps;if (areHookInputsEqual(nextDeps, prevDeps)) {// 依赖未变化，仅添加 hookFlags（不包含 HookHasEffect）//hookFlags, 此时副作用仅被存储，不会在提交阶段执行。hook.memoizedState = pushEffect(hookFlags, create, inst, nextDeps);return;}}}// 标记 Fiber 并创建副作用// 对于 useEffect：PassiveEffect（异步执行）。// 对于 useLayoutEffect：LayoutEffect（同步执行）。currentlyRenderingFiber.flags |= fiberFlags;hook.memoizedState = pushEffect(// HookHasEffect：标记该副作用需要在提交阶段执行。HookHasEffect | hookFlags,create,inst,nextDeps,);
}

useLayoutEffect

function useLayoutEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {const dispatcher = resolveDispatcher();return dispatcher.useLayoutEffect(create, deps);
}

mountLayoutEffect

React 中 useLayoutEffect Hook 的 挂载阶段 实现，主要用于 注册同步执行的副作用。

function mountLayoutEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {// UpdateEffect：表示该 Fiber 需要执行副作用。// LayoutStaticEffect：表示这是一个布局副作用，需要同步执行。let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;return mountEffectImpl(fiberFlags, HookLayout, create, deps);
}

updateLayoutEffect

React 中 useLayoutEffect Hook 的 更新阶段 实现，主要用于 比较依赖项 并决定是否需要更新或执行副作用。

function updateLayoutEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {// UpdateEffect：表示该 Fiber 需要执行副作用。// HookLayout：标记为 useLayoutEffect 类型的副作用。// create：副作用创建函数。return updateEffectImpl(UpdateEffect, HookLayout, create, deps);
}

useInsertionEffect

useInsertionEffect 是 React 18 新增的 Hook，用于在 DOM 插入后、布局计算前执行副作用。它主要用于 CSS-in-JS 库注入动态样式，以避免 布局抖动（Layout Shift）。

function useInsertionEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {const dispatcher = resolveDispatcher();return dispatcher.useInsertionEffect(create, deps);
}

mountInsertionEffect

React 中 useInsertionEffect Hook 的 挂载阶段 实现，主要用于 在 DOM 插入后、布局计算前执行副作用。

function mountInsertionEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {// UpdateEffect：表示该 Fiber 需要执行副作用。// HookInsertion：标记为插入阶段的副作用（useInsertionEffect）。mountEffectImpl(UpdateEffect, HookInsertion, create, deps);
}

updateInsertionEffect

React 中 useInsertionEffect Hook 的 更新阶段 实现，主要用于 在 DOM 插入后、布局计算前执行副作用，并在依赖项变化时重新执行。

function updateInsertionEffect(create: () => (() => void) | void,deps: Array<mixed> | void | null,
): void {return updateEffectImpl(UpdateEffect, HookInsertion, create, deps);
}

全局常量之 Hook 副作用类型的位掩码常量

React 中 Hook 副作用类型 的位掩码常量，用于标记副作用的 执行时机 和状态。

export type HookFlags = number;export const NoFlags = /*   */ 0b0000;// Represents whether effect should fire.
// 标记副作用需要执行。
export const HasEffect = /* */ 0b0001;// Represents the phase in which the effect (not the clean-up) fires.
// 插入副作用（首次挂载时执行）。
export const Insertion = /* */ 0b0010;// 布局副作用（同步执行）。
export const Layout = /*    */ 0b0100;// 异步副作用（浏览器绘制后执行）。
export const Passive = /*   */ 0b1000;