第十八节：代码手写题-实现一个简版useState-CSDN博客

本文链接：https://blog.csdn.net/qq_40860137/article/details/147360074

简版 `useState` 实现原理与代码解析

一、核心设计思路

useState 的核心原理是通过闭包和 状态数组 实现状态存储与更新。以下是关键实现要素：

状态存储：使用外部变量 states 数组保存所有状态值，setters 数组保存对应的更新函数。
顺序管理：通过 cursor 游标记录当前操作的索引，确保多次 useState 调用的状态按顺序存取。
更新触发：调用 setState 时会修改对应状态值，并触发组件重新渲染（模拟 ReactDOM.render）。

二、完整实现代码

// 外部存储状态与更新函数
let states = [];
let setters = [];
let cursor = 0;
let isInitialRender = true;

function createSetter(cursor) {
  return function (newState) {
    // 支持函数式更新（如 setCount(prev => prev + 1)）
    if (typeof newState === 'function') {
      states[cursor] = newState(states[cursor]);
    } else {
      states[cursor] = newState;
    }
    // 触发重新渲染（模拟 React 的渲染流程）
    render();
  };
}

function useState(initialState) {
  // 首次渲染初始化状态
  if (isInitialRender) {
    states.push(initialState);
    setters.push(createSetter(cursor));
    isInitialRender = false;
  }

  // 获取当前状态和对应更新函数
  const currentState = states[cursor];
  const setState = setters[cursor];

  // 移动游标为下一次 useState 调用做准备
  cursor++;

  return [currentState, setState];
}

// 模拟组件重新渲染（实际 React 中通过调度器触发）
function render() {
  cursor = 0; // 重置游标
  ReactComponent(); // 重新执行组件函数
}

// 使用示例
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("Anonymous");

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
      <p>Name: <input value={name} onChange={e => setName(e.target.value)}/></p>
    </div>
  );
}

三、关键特性实现

特性	实现方式	引用来源
多状态管理	通过 `cursor` 游标按调用顺序存取 `states` 和 `setters` 数组
函数式更新	`setState` 参数支持函数类型，基于前值计算新值
状态持久化	使用闭包保存 `states` 数组，避免组件重新执行时状态丢失
渲染触发机制	调用 `setState` 后执行 `render()` 重置游标并重新执行组件函数

四、与 React 源码的差异

特性	简版实现	React 实际实现
状态存储结构	数组	链表（Fiber 节点的 `memoizedState`）
更新批量处理	无（立即触发渲染）	异步批处理（避免多次渲染）
依赖追踪	无	通过 Effect List 追踪副作用
错误处理	无边界条件检查	严格模式校验调用顺序