React useState 实现原理剖析，从源码解开其神秘面纱

2023-10-18 19:59:35

useState 是 React 中用于状态管理的 Hooks 之一，它允许你以函数式的方式定义组件的状态，从而简化组件的开发和维护。useState 的使用非常简单，只需调用 useState 函数并传入一个初始值，即可创建一个可变的状态变量。

const [state, setState] = useState(initialState);

useState 函数返回一个数组，其中第一个元素是当前的状态值，第二个元素是更新状态的函数。你可以通过调用 setState 函数来更新状态，从而触发组件的重新渲染。

为了更好地理解 useState 的实现原理，我们不妨从源码角度对其进行剖析。useState 的源码位于 React 源码库的 packages/react/src/useState.js 文件中。

export default function useState(initialState) {
  const hook = getHook();
  const state = hook.memoizedState;

  if (isUndef(state)) {
    // 如果状态没有初始化，则使用初始值初始化状态
    hook.memoizedState = state = initialState;
  }

  // 构建一个更新状态的函数
  const updateQueue = {
    last: null,
    dispatch: null,
  };

  const dispatchAction = (queue, action) => {
    const update = {
      action,
      next: null,
    };

    // 将更新动作添加到更新队列中
    if (isUndef(queue.last)) {
      queue.last = queue.dispatch = update;
    } else {
      queue.last.next = update;
      queue.last = update;
    }
  };

  // 构建一个更新状态的函数
  const setState = action => {
    dispatchAction(updateQueue, action);

    // 调度组件重新渲染
    scheduleUpdate();
  };

  return [state, setState];
}