React 的 useState 自己能实现吗？核心机制是什么？

在React 16.8版本推出Hooks之前，函数组件只能作为无状态的UI展示容器，开发者必须使用类组件才能管理状态。这种割裂导致代码复用困难、组件嵌套复杂等问题。useState的出现不仅让函数组件具备完整的状态管理能力，更推动React开发模式向函数式编程的范式转变。

每个useState调用都会创建一个独立的状态闭包，React内部通过链表结构维护组件状态队列。当组件首次渲染时，初始化状态值会被存入对应的链表节点；后续更新时，通过闭包记住当前状态索引。

// 简化版实现思路
let stateQueue = [];
let index = 0;

function mockUseState(initial) {
  const currentIndex = index++;
  if (stateQueue[currentIndex] === undefined) {
    stateQueue[currentIndex] = typeof initial === 'function' ? initial() : initial;
  }
  
  const setState = (newValue) => {
    stateQueue[currentIndex] = newValue;
    triggerRender(); // 触发重新渲染
  };
  
  return [stateQueue[currentIndex], setState];
}

React采用批量更新策略优化渲染性能。当调用setState时，并不会立即触发渲染，而是将更新加入队列。在事件处理器执行完成后，统一进行状态合并和组件重渲染。

每次渲染都会固定获取对应顺序的状态值，这就是为什么Hook必须在组件顶层调用且不能有条件判断的根本原因。React通过维护渲染计数器和状态队列索引来实现这个机制。

可以基于闭包和数组模拟基础功能：

function createUseState() {
  let states = [];
  let cursor = 0;
  
  return function useState(initialValue) {
    const currentCursor = cursor;
    
    if (states.length <= currentCursor) {
      states.push(initialValue);
    }
    
    function setState(newValue) {
      states[currentCursor] = newValue;
      // 需要实现重新渲染逻辑
    }
    
    cursor++;
    return [states[currentCursor], setState];
  }
}

批量更新缺失：原生实现会自动合并多次setState调用
异步处理不足：缺乏调度器优化渲染性能
生命周期整合：无法自动处理组件卸载时的状态清理

推荐将相关联的状态合并为对象，避免过多独立状态变量导致渲染性能问题。当需要更新嵌套对象时，应该使用扩展运算符创建新引用：

const [user, setUser] = useState({
  name: '张三',
  preferences: {
    theme: 'dark',
    fontSize: 14
  }
});

// 正确更新方式
setUser(prev => ({
  ...prev,
  preferences: {
    ...prev.preferences,
    fontSize: 16
  }
}));