React Hook 的原理是什么？源码你能看懂几成？

赫本的猫
2025到07-12
0 收藏
阅读3分钟

当React Hooks在2018年横空出世时，整个前端开发领域都经历了一场思维革命。作为函数组件突破性的能力扩展方案，其核心原理究竟如何支撑起状态管理、生命周期等关键特性？闭包与Fiber架构如何精妙配合？本文将从运行机制到源码实现，为你揭开Hooks的神秘面纱。

在控制台运行这段代码时，你会惊讶地发现闭包正是Hooks的核心存储机制：

function Counter() {
  const [count, setCount] = useState(0);
  // 闭包保存count值
  return <button onClick={() => setCount(c => c+1)}>{count}</button>
}

每个组件实例的Hooks状态都通过闭包独立存储。当组件重新渲染时，React通过Hooks调用顺序精准定位对应状态，这正是Hooks规则第一条（只在顶层使用）的根本原因。

在React内部，每个组件对应一个Fiber节点。Hooks链表就挂载在Fiber节点的memoizedState属性上：

interface Fiber {
  memoizedState: Hook | null;
  // 其他Fiber属性...
}

interface Hook {
  memoizedState: any;
  next: Hook | null;
}

这种链表结构让多个Hooks能按执行顺序串联，即使组件多次渲染也能准确追踪状态。

以useState为例，源码核心逻辑分为两个阶段：

Mount阶段：调用mountState创建初始Hook对象
Update阶段：通过updateState获取最新状态

关键源码片段（简化版）：

function useState(initialState) {
  const dispatcher = ReactCurrentDispatcher.current;
  return dispatcher.useState(initialState);
}

// mount阶段实现
function mountState(initialState) {
  const hook = mountWorkInProgressHook();
  hook.memoizedState = initialState;
  const queue = {/ 更新队列 /};
  const dispatch = dispatchAction.bind(null, queue);
  return [hook.memoizedState, dispatch];
}

Dispatcher机制是Hooks实现的关键，不同渲染阶段会切换不同的dispatcher实现，这是Hooks不能在条件语句中使用的原因。

React通过workInProgressHook指针跟踪当前处理的Hook：

let workInProgressHook: Hook | null = null;

function mountWorkInProgressHook(): Hook {
  const hook: Hook = {
    memoizedState: null,
    next: null,
  };

  if (workInProgressHook === null) {
    currentlyRenderingFiber.memoizedState = hook;
  } else {
    workInProgressHook.next = hook;
  }
  workInProgressHook = hook;
  return hook;
}

这种链表管理方式保证了Hooks状态的强顺序依赖性，这也是开发者必须遵守Hooks规则的根本原因。

React团队通过Hooks实现了代数效应的编程范式，将组件副作用从主逻辑中分离。这种设计使得：

业务逻辑更纯粹
代码可测试性增强
为并发模式打下基础

对比类组件的生命周期方法，Hooks带来了：

类组件	函数组件+Hooks
生命周期方法分散逻辑	useEffect聚合相关逻辑
this作用域问题	闭包天然捕获最新值
高阶组件嵌套地狱	自定义Hook逻辑复用

使用useRef保持引用稳定：

function Timer() {
  const countRef = useRef(0);
  
  useEffect(() => {
    const id = setInterval(() => {
      countRef.current++;
    }, 1000);
    return () => clearInterval(id);
  }, []); // 空依赖数组
}

通过useMemo和useCallback优化性能：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);