2、React中的useState：基础用法、函数式更新、惰性初始化、状态更新的异步特性

useState 是 React Hooks 里最基础、也最常用的一个。说实话，我面试前端候选人时，经常发现很多人用了两三年 useState，却连它的异步特性和惰性初始化都说不清楚。这一节，咱们就把这几个核心点彻底聊透。

2.1 基础用法：从声明到更新

useState 的签名很简单：

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

它返回一个数组，第一个元素是当前状态值，第二个是更新函数。我习惯用数组解构的方式命名，语义清晰，一眼就能看出哪个是数据、哪个是更新方法。

来看一个最简单的计数器：

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

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

点击按钮，count 加 1，界面自动更新。嗯，就是这么直接。

2.2 函数式更新：解决「过期闭包」问题

基础用法看起来没问题，但如果你在短时间内连续调用多次 setCount，就会踩坑：

function handleClick() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}
// 结果：count 只加了 1，而不是 3

为什么会这样？因为每次 setCount 拿到的 count 都是当前渲染快照里的值，三个 setCount 读取的是同一个 count，所以最终只加了一次。

解决办法就是函数式更新：

function handleClick() {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
}
// 结果：count 加了 3

函数式更新的参数是上一次的状态值，React 会保证这个 prev 是最新的。我在项目中遇到过好几次因为没注意这个细节导致的 bug，尤其是在处理购物车数量加减、分页器连续翻页时，函数式更新几乎是必须的。

2.3 惰性初始化：别再每次都算一遍了

useState 的初始值可以是一个值，也可以是一个函数。当初始值需要经过复杂计算才能得到时，用函数形式可以避免每次渲染都重复计算：

// ❌ 每次渲染都会执行 expensiveComputation
const [data, setData] = useState(expensiveComputation());

// ✅ 只在首次渲染时执行一次
const [data, setData] = useState(() => expensiveComputation());

function handleClick() {
  setCount(count + 1);
  console.log(count); // 打印的还是旧值
}

function handleClick() {
  setCount(c => c + 1);
  setCount(c => c + 1);
  setFlag(true);
  setFlag(f => !f);
}
// React 会把这四个更新合并成一次渲染