一个最简单的 Hook，藏着一半 React 开发者的困惑

在 React 函数组件里useState 是每个开发者写的第一个 Hook。它看起来简单得不能再简单：传一个初始值。拿回一个状态变量和一个更新函数，接下来你就可以在组件里管理状态了。不过，

但如果你真的只把它当成一个"存值的变量"。很快就会撞上三堵墙：连续调用 setCount 三次为什么只加了 1 而不是 3？setCount 之后立刻 console.log为什么打印的还是旧值？初始值需要经过复杂计算才能得到，每次组件渲染都重新算一遍，性能扛得住吗？

这三个问题，分别对应 useState 的三个主要机制：异步批量更新闭包陷阱惰性初始化。说起来，搞懂它们，才算真正搞懂了 React 函数式编程的基石。

useState 的 API 设计：不只是"存一个值"

useState 是 React Hooks 家族中最基础也最关键的成员。怎么说呢，它接管了函数组件中"会变化的数据"。让函数组件拥有了"记住状态"的能力。

API 签名非常简洁：

const = useState;

• 参数: initialValue 可以是任意类型，也可以是返回初始值的函数。
• 返回值: 一个长度为 2 的数组。第一个元素是当前状态值，第二个是更新状态的函数。
• : React 社区约定，用来保持代码可读性。老实说，

初始值的两种形态

useState's 参数有两种合法写法。它们行为差异很大：

// 写法一：直接传值
const = useState;怎么说呢，const = useState;// 写法二：传函数
const = useState => heavyComputation);

两种写法在首次渲染时相同——都会得到你指定的初始值。

• 写法一：  会在每次渲染时执行一次即使结果已经被丢弃；但仅第一次真正需要时才产生效果。其实，
• 写法二： React 在首次渲染时调用一次接下来后续渲染直接跳过；适合昂贵计算或大量数据生成场景。

再看**痛点**。当你需要生成千级甚至百万级的数据时如果使用写法一，你可能无意识地导致每次输入都触发巨量循环，却看不到明显卡顿；而写法二则能避免这类性能灾难。按理说，

setState 异步更新：为什么“加了三次”只加了一次？

至于代码示例，

function App {
const = useState;怎么说呢，const addCount = => {
setCount;setCount，setCount;console.log，// 打印的是旧值
};return (
<>

再看{`当前计数，${count}`}
+1 x3 
);}

点击按钮后你会发现页面上的计数从 0 变成1 。日志里仍然是旧值0，这背后的原因是:

说到背后的机制。批量更新 & 闭包陷阱

• ☔ A.  React 不立即修改,而把所有更新放入队列，在事件循环结束后统一处理；老实说，这能减少多余重绘次数。若每一次都触发单独重绘，对鼠标拖拽等高频事件来说性能会急剧下降。不过，
• ☔ B.  每一次 render 都创建新的作用域。此处 count 为固定常量。addCount 捕获的是 render 时刻 count 的副本，而非最新状态；所有三次调用都以一样旧值为基础进行计算。最终 React 合并这些相同目标导致仅一次重绘，而且新 state 为旧 count+1=1。

说到函数式更新，逃离闭包陷阱的正确姿势

* 当你的下一份业务逻辑需要多次基于最新 state 更新时应使用 **函数式更新**：

setCount;setCount，setCount;不过，console.log;话说回来，// still old value until next render
// After re-render count will be old+3

/* 演示代码 */

函数式更新原理

• React 将传入 `prev => ...` 存进队列。而非立即计算新值，说起来，
• 队列执行顺序保证前一次返回的新 state 成为下一个 `prev` 参数。从而保证链式累加不受闭包影响。
• 最终一次返回结果成为最终 state。