一文看懂React Hooks流程，别再被面试官问倒了

一文看懂 React Hooks 流程，别再被面试官问倒了

React Hooks 的底层机制其实不复杂，核心就一句话：React 靠“调用顺序 + 链表”来记住每个 Hook 的状态。

一次渲染里，Hooks 的真实顺序

组件每次渲染都会经历这些阶段：

执行组件函数，按顺序调用 useState、useMemo、useCallback、useRef 等。

React 根据 Hook 调用顺序，从当前组件的 Hook 链表里取出对应状态。

生成新的虚拟 DOM，完成 DOM 更新。

浏览器绘制前，同步执行 useLayoutEffect。

浏览器绘制后，异步执行 useEffect。

所以 useEffect 永远晚于组件函数执行，也晚于 useLayoutEffect。

为什么 Hooks 不能写在 if / 循环里

React 内部把每个组件的 Hooks 存在一个链表里，挂载在 Fiber 节点的 memoizedState 上。

首次渲染时，第 1 个 useState 对应链表第 1 个节点，第 2 个 useEffect 对应第 2 个节点。后续每次渲染，React 都会按同样顺序遍历这个链表。

一旦你把 Hook 放进 if、for 或嵌套函数里，调用顺序可能变化，React 就会把状态读错位。这就是“顺序一致”规则的来源。

不同 Hook 在流程里的位置

useState / useReducer：渲染阶段执行，负责读取/计算当前状态。

useMemo / useCallback：渲染阶段执行，依赖不变时复用旧值。

useRef：渲染阶段执行，返回一个跨渲染周期稳定的对象。

useLayoutEffect：DOM 更新后、浏览器绘制前同步执行，适合读取布局。

useEffect：浏览器绘制后异步执行，不阻塞 UI。

useEffect 的依赖数组怎么判断

React 会用 Object.is 逐个比较本次依赖和上次依赖。

不传依赖数组：每次渲染后都执行。

传 []：只在挂载后执行，清理函数在卸载时执行。

传 [a, b]：挂载后执行，之后只有 a 或 b 变化时才执行。

多个 useEffect 按声明顺序执行;清理函数按逆序执行。

面试官常追问的几个点

useEffect 和 useLayoutEffect 的区别：前者异步不阻塞绘制，后者同步会阻塞绘制。

useMemo 和 useCallback 的区别：前者缓存值，后者缓存函数引用。

setState 为什么看起来异步：因为它会把更新放入队列，触发调度后再重新渲染。

为什么 Hooks 只能在函数组件或自定义 Hook 里调用：只有这些场景才有对应的 Fiber 节点和 Hook 链表。