React useState原理解密：从源码到实战

简介

useState是React Hooks的核心之一，理解它的底层原理有助于更好地是使用它。

基本数据结构

React内部使用单向链表管理Hooks。每个组件都有一个对应地fiber对象，其中包含一个memoizedState属性来存储hooks链表

// 简化的 Hook 结构
const hook = {
  memoizedState: null, // 存储当前状态值
  baseState: null,     // 基础状态
  queue: null,         // 更新队列
  next: null           // 指向下一个 hook
};

工作流程

1. 组件首次渲染时，React会按顺序创建hooks链表
2. useState接受地初始值会被存入memoizedState中（惰性初始化：只有在初次渲染的时候才执行一次）
3. 调用setState时，更新会被加入队列
4. 下次渲染的时候，React会处理队列中的所有更新

// 伪代码展示更新
function dispatchAction(queue, action) {
  const update = { action, next: null };
  // 将更新加入队列
  if (queue.pending === null) {
    update.next = update; // 自引用形成循环链表
  } else {
  	// 跟新队列插入update
    update.next = queue.pending.next;
    queue.pending.next = update;
  }
  queue.pending = update;
  
  // 触发重新渲染
  scheduleWork();
}
// 伪代码展示初始化
function mountState(initialState) {
  const hook = mountWorkInProgressHook();// 创建hook
  // 初始化memoizedState
  hook.memoizedState = typeof initialState === 'function' 
    ? initialState() 
    : initialState;
  // 初始化更新队列
  const queue = { pending: null };
  hook.queue = queue;
  // 包装更新队列
  const dispatch = dispatchAction.bind(null, queue);
  return [hook.memoizedState, dispatch];
}

关键实现细节

状态合并

多个状态更新会被批量处理​（React 17及之前版本在事件处理函数中批量处理，React 18+自动批量处理所有更新）

function Example() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(c => c + 1); // 不会立即更新
    setCount(c => c + 1); // 会与前一个合并
    // 最终 count 只会增加 2，而不是触发两次渲染
  };
}

闭包陷阱

由于函数组件的特性，每次渲染都有自己的 props 和 state,但是闭包特性又有可能导致状态值”卡住“地现象，特别是在异步操作和时间处理中常见，这就是闭包陷阱。

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); // 总是打印初始值，形成闭包陷阱
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 空依赖数组

  return <div>{count}</div>;
}

更新调度

React 使用调度器（Scheduler）来决定何时处理状态更新，这使 React 能够：

1. 优先处理高优先级更新
2. 在浏览器空闲时执行低优先级更新
3. 避免阻塞主线程

简易实现

下面是一个极简版的 useState 实现，帮助理解核心原理：

let currentHook = 0; // 当前 hook 的索引
let hooks = [];      // 存储所有 hook

function useState(initialState) {
  const position = currentHook++;
  
  // 初始化时设置初始状态
  if (hooks[position] === undefined) {
    hooks[position] = typeof initialState === 'function' 
      ? initialState() 
      : initialState;
  }

  // 返回当前状态和更新函数
  return [
    hooks[position],
    (newState) => {
      hooks[position] = typeof newState === 'function'
        ? newState(hooks[position])
        : newState;
      // 这里应该触发组件重新渲染
      render();
    }
  ];
}

// 组件渲染前重置 hook 索引
function render() {
  currentHook = 0;
  // 实际渲染逻辑...
}

与类组件setState的区别

结语

本篇文章可以帮助你理解以下问题：

• 避免常见的陷阱（如闭包问题）
• 写出更高效的组件
• 更好的调试状态相关问题
• 理解React的更新机制