写在前面

在日常开发中，useState 可能是我们使用最频繁的 Hook。但你是否遇到过以下痛点：

• setCount 连续调用三次结果只加了?
• setState 后立即 console.log,打印的是旧值？
• 组件每次渲染都执行昂贵计算，页面卡顿？
• 为了包裹一组元素而添加无用的 
  ,对性能和语义造成负担？

If you feel stuck or frustrated by se bugs or performance issues。this article is exactly what you need.

一、useState 的基本用法回顾

先快速过一遍基础，温所以知新。

import{ useState } from 'react';functionCounter{
const = useState;// 初始值为 undefined 或者传入默认数值，例如0
const = useState;consthandleClick==>{
setCount;}，return(
点击次数:{count});}

• 参数：- 初始值或惰性初始化函数。
• 返回值：- 一个数组。
• setState：- 唯一触发状态更新的方法。老实说，

看起来很简洁。但背后的机制却暗藏玄机，

二、异步更新与闭包陷阱：为什么 setCount 不能立刻生效？

一个经典翻车场景

猜猜下面这段代码点击后控制台打印什么？页面显示什么，

function App{
const = useState;const addCount==>{
setCount;其实，console.log;//①
setCount;console.log，//②
setCount;console.log，//③
};其实，return (
<>

再看当前计数。{count}
点击
);}

答案：

• 控制台打印三次 #?
• 页面最终显示计数为 #?

是不是和直觉不符？我们一步步拆解，怎么说呢，

异步调度——setState 并非同步赋值

setCount 并不会立即修改 'count' 变量。它只是向 React 内部调度中心发送一个更新请求，真正状态变更和重渲染要等当前函数执行完毕后才进行。伪代码表示这方面，// your setCount -> React internal roughly does: enqueueUpdate;// count is old value captured by closure 在addCount函数执行期间，count 始终是旧值。三次 console.log 都输出一样旧数。

闭包——为什么 count 一直是旧值？

JavaScript 函数会捕获其声明时所在作用域中的变量。addCount 在组件渲染时创建，它捕获了当时 count 的值。即使之后调用了 setCount，只要组件未重渲染。这个闭包里的 count 就不会变化。

三、批量更新与合并机制：为什么三次 + 只加了一次？

React 为了性能，会把同一次事件循环中的多次 setState 合并成一次重渲染。这就是批量更新，但很多人误解 “合并” 的含义 —— 它不是简单把三次取最终一次而是把多次放入队列统一处理。

普通更新的 “合并” 真相

• 第一次 setCount：计算出 payload 为 当前闭包里的 count +1，放入队列；
• 第二 次 同理得到相同 payload；话说回来，
• 第三 次 同上。最终队列里有三个相同 payload。话说回来，当 React 开始处理时它按顺序应用这些更新；普通直接赋值会被后一个覆盖，所以最终 state 成为 same value。看起来像只加了一次但每一次都基于同旧值计算得出相同结果。

React 自动批处理

以前只有浏览器事件中才有批处理；Promise / timeout 等异步场景则不行。React 引入 createRoot 后开启自动批处理，让所有场景都享受一次性渲染优势。

四、“函数式” 更新方法—精准基于最新状态累加

函数式 update 用法示例 ： `prev => prev + n` setCounter;

执行过程

何时使用函数式 update？

场景	推荐方式	理由
新 value 不依赖旧 state	`set` 简单直接	`state` 恒定，无需考虑 closure
new value 基于旧 state	`set`	`prev` 是最新可得 state。避免错误
连续多次 update 必须依赖前一次结果	`set`	`prev` 保证每一步都是基于最新 value

---

---

**小结**

---

---

**关键点**：

• 异步调度 – 不立即改变 variable，而是发起 update 请求。

• 闭包陷阱 – capture old values cause stale reads。

• Batching – 同循环内多 update 合并为一次 render。

• Functional Update – 保证基于最新 state 操作。

• Lazy Init – 仅首次执行昂贵 init。

• Derived State – 仅在 render 时算，不存入 state。话说回来，

• Fragment – 隐藏 DOM 层级，提高性能。

---

---

写在最终

jsx // 用好了 useState，就能写出既正确又高效的代码。

四句话这方面，

#	要点
✅	Set State 是异步发消息，不是同步改变量.
✅	依赖旧状态时用 Functional Update 保持安全.
✅	昂贵初始计算请采用 Lazy Init。以节省 CPU.
✅	想去掉多余 就用 ——层级越浅越快.

如果这篇文章帮你避开某些坑或者让你对 React 有更深理解，请点赞收藏评论，也欢迎分享你的 useState 踩坑经验，一起进步！