手写React状态hook


在日常开发中,我们经常用到 React 的状态管理 Hook:useStateuseReducer

但你有没有想过:这些 Hook 内部是怎么实现的?为什么调用 setState 之后组件会重新渲染?

今天我们就来从零手写 useState 和 useReducer,理解它们的原理。


一、React Hook 的本质

在 React 中,每个函数组件调用时都会按照 调用顺序 来记录 Hook。

比如下面的例子:

jsx 复制代码
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("张三");

  return (
    <div>
      <p>{count}</p>
      <p>{name}</p>
    </div>
  );
}

React 内部会维护一个 数组(或链表) 来存储这些 Hook 对应的状态:

复制代码
hooks = [
  { state: 0 },        // count
  { state: "张三" }     // name
]
  • 每次组件渲染时,useState 都会返回这个位置对应的状态。
  • 调用 setState 时,会更新状态并触发组件重新渲染。

所以:Hook 的核心 = 存储状态 + 按顺序取出


二、手写 useState

我们先写一个最简版的 React Hook 运行环境:

js 复制代码
let hookStates = []; // 存放所有 hook 的状态
let hookIndex = 0;   // 当前执行到第几个 hook

function useState(initialValue) {
  const currentIndex = hookIndex; // 记录当前 hook 的位置

  // 第一次渲染:存储初始值
  if (hookStates[currentIndex] === undefined) {
    hookStates[currentIndex] = initialValue;
  }

  // 获取当前状态
  const state = hookStates[currentIndex];

  // 更新函数
  const setState = (newValue) => {
    hookStates[currentIndex] =
      typeof newValue === "function"
        ? newValue(hookStates[currentIndex])
        : newValue;
    render(); // 触发重新渲染
  };

  hookIndex++; // 下一个 hook 位置
  return [state, setState];
}

这里我们做了几件事:

  1. hookStates 保存所有状态。
  2. hookIndex 保证按顺序存取。
  3. setState 更新状态后调用 render,模拟 React 重新渲染。

三、测试 useState

写一个小 demo:

js 复制代码
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("张三");

  console.log("render:", { count, name });

  return {
    add: () => setCount(count + 1),
    rename: () => setName("李四"),
  };
}

// 模拟渲染
function render() {
  hookIndex = 0; // 每次渲染重置
  app = Counter();
}

let app;
render();

// 测试
app.add();    // count 从 0 → 1
app.rename(); // name 从 "张三" → "李四"

运行过程:

复制代码
render: { count: 0, name: '张三' }
render: { count: 1, name: '张三' }
render: { count: 1, name: '李四' }

✅ 我们的 useState 成功模拟了 React 的状态管理!


四、手写 useReducer

useReducer 的本质就是 useState 的加强版:

  • useState 直接存值
  • useReducerreducer 函数 来更新值

我们来实现它:

js 复制代码
function useReducer(reducer, initialValue) {
  const [state, setState] = useState(initialValue);

  function dispatch(action) {
    const newState = reducer(state, action);
    setState(newState);
  }

  return [state, dispatch];
}

是不是很眼熟?

其实 React 源码里 useState 就是 useReducer 的语法糖:

js 复制代码
function useState(initialValue) {
  return useReducer((state, action) => action, initialValue);
}

五、测试 useReducer

来写一个计数器:

js 复制代码
function reducer(state, action) {
  switch (action.type) {
    case "add":
      return state + 1;
    case "sub":
      return state - 1;
    default:
      return state;
  }
}

function Counter2() {
  const [count, dispatch] = useReducer(reducer, 0);

  console.log("render:", { count });

  return {
    add: () => dispatch({ type: "add" }),
    sub: () => dispatch({ type: "sub" }),
  };
}

// 模拟渲染
function render() {
  hookIndex = 0;
  app = Counter2();
}

let app;
render();

app.add(); // count: 0 → 1
app.add(); // count: 1 → 2
app.sub(); // count: 2 → 1

输出:

复制代码
render: { count: 0 }
render: { count: 1 }
render: { count: 2 }
render: { count: 1 }

完美模拟 ✅


六、总结

  • useState :存储值,返回 [state, setState]
  • useReducer :存储值 + reducer 逻辑,返回 [state, dispatch]
  • 关系useState = useReducer 的简化版。

什么时候用哪个?

  • 逻辑简单(计数器、表单输入) → 用 useState
  • 逻辑复杂(多个状态、复杂操作) → 用 useReducer

结语

通过手写,我们发现 React Hook 并没有什么黑魔法:

它只是 按照调用顺序存储状态,并在更新时触发重新渲染。

理解了原理,再写业务代码时就更清晰:

为什么 Hook 不能写在 if/for 里?为什么每次渲染必须顺序一致?

------ 因为 React 就是用数组来按顺序存储的

相关推荐
诗书画唱3 小时前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf3 小时前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
代码青铜3 小时前
【实战指南】Cursor前端+Zion后端:10分钟打造能收款的AI商业应用MVP
前端·人工智能
quan26313 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路3 小时前
GDAL 读取影像元数据
前端
qb4 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖4 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯4 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰4 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript