React Hooks 源码深入解析:链表架构、双阶段更新与 5 条核心机制

面试常问：为什么 useState 不能在条件语句里调用？

答案藏在 React Hooks 的底层实现里——它是一条单向链表，React 靠"调用顺序"把状态和 Hook 节点一一对应。这篇我们一起拆源码：Hook 链表结构、Mount/Update 双阶段、useState/useEffect 实现原理、Hooks 规则的底层依据。

export type Hook = {

  memoizedState: any,

  baseState: any,

  baseQueue: Update<any, any> | null,

  queue: any,

  next: Hook | null,

};

function mountWorkInProgressHook(): Hook {

  const hook: Hook = {

    memoizedState: null, baseState: null,

    baseQueue: null, queue: null, next: null,

  };

  if (workInProgressHook === null) {

    // 第一个 Hook：挂到 fiber.memoizedState

    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;

  } else {

    // 追加到链表末尾

    workInProgressHook = workInProgressHook.next = hook;

  }

  return workInProgressHook;

}

function mountState(initialState) {

  const hook = mountStateImpl(initialState);

  const queue = hook.queue;

  const dispatch = dispatchSetState.bind(

    null, currentlyRenderingFiber, queue,

  );

  queue.dispatch = dispatch;

  return [hook.memoizedState, dispatch];

}

六个必背考点

Hook 链表结构（每个 Hook 是链表节点，含 memoizedState / baseState / queue / next）；Mount vs Update 双阶段逻辑；useState 通过 dispatch 闭包触发更新、内部基于 useReducer；useEffect 异步执行与清理机制（Object.is 比较依赖）；Hooks 规则源于链表顺序依赖；useMemo / useCallback 依赖比较原理。

Q1：React 是怎么保证每次渲染中 Hook 的状态不错位的？

靠链表的顺序对齐。每个 fiber 的 memoizedState 持有 Hook 链表头，渲染时用 workInProgressHook 从链表头开始逐个推进；更新时 currentHook 从 fiber.alternate 的旧链表头开始，两条链表按索引一一对应。只要每次渲染调用顺序一致，第 N 个 Hook 永远复用第 N 个节点，状态自然不错位。这也是 Hooks 规则（顶层调用、顺序稳定）的底层原因。

Q2：为什么 useState 不能在条件语句里调用？从源码角度讲。

条件为真时这个 Hook 被调用、链表多一个节点；条件为假时不调用、链表少一个节点。下次渲染时 workInProgressHook 按新顺序对齐旧链表，后续所有 Hook 的状态全部错位——比如第二个 useState 可能读到第一个的旧状态。React 在开发模式用 Hook 数量校验捕获这个问题，直接抛错；但生产环境没有校验，表现就是状态错乱、数据串位。所以规则不是约定俗成，而是链表实现的硬约束。

落地总结

Hooks 的源码主线就是一条链表加两个阶段：链表存状态，顺序定对应；Mount 建节点，Update 对齐复用；useState 走更新队列，useEffect 比较依赖异步执行。面试时把"链表 + 顺序"这条主线讲清楚，再用条件调用导致的错位场景举例，源码题就能答出深度。