React 的状态管理看似简单，却常让新手陷入一系列痛点：为什么 setState 后 console.log 打印的是旧值？连续三次加一只增加一次？初始数据构造耗时却被重复执行？

一、用 useState 管理源数据与输入过滤器

入口文件 src/main.jsx 挂载的是 src/App.jsx。在第一次渲染时组件会生成一万条使用者记录：

const = useState => heavyComputation);// 惰性初始化
const = useState;// 使用者输入
const filteredUsers = useMemo(
=> users.filter),);

这里出现了两种状态

小技巧： 当你可以通过已有 state 或 props 推导出某个值时就不要再把它放进 state；否则会导致同步维护困难、易出现不一致。

二、useState 并不是“可变变量”——它返回的是快照

痛点：在事件处理函数里调用 setCount 后立即 console.log 看见旧值，感觉像 setState 异步失效。

function addOne {
setCount;console.log，// 打印的是当前渲染中的 count
}

至于原因是，每一次渲染都会拿到当次渲染的一份状态快照；怎么说呢，事件处理函数是在该快照下创建的。调用 setCount 并不会立刻修改当前作用域里的 count，而是请求 React 在下一次渲染时使用新的值。

记住这句话： "state 在一次渲染中是固定的，setter 用来安排后续渲染。"

三、连续更新为何只累加一次？——函数式更新的关键性

痛点：连续写三次 <+> 按钮，只能让计数器增加一次。

// 错误写法
setCount;setCount，setCount;按理说，// 正确写法
setCount;setCount，老实说，setCount;

AWS 的队列机制会把每个 updater 按顺序执行，每一步都会拿到前一步更新后的结果。最终计数器会按预期递增三次而不是被覆盖成同一个值。

• 仅依赖当前快照：直接传新值即可，例如 {open? setOpen : setOpen}.
• 依赖前一步结果：使用函数式更新，例如计数器、数组追加、对象合并等。

数组/对象状态不可变更新示例：

// 给使用者列表追加一项
setUsers(prev => );
如果直接改为 `prev.push`。React 将无法检测引用变化，从而导致 UI 不刷新，也更难调试。

四、惰性初始化解决昂贵初始计算问题

`heavyComputation` 用来生成一万条记录并记录耗时。两种写法执行时机完全不同：

// 每次渲染都会先执行 heavyComputation
const = useState);

// 惰性初始化：仅在组件首次挂载时调用 const = useState => heavyComputation);

• #① 重复执行风险：`heavyComputation` 会在每一次 input 改变导致重渲染时 跑，即使 React 并未重新赋值给 state。
• #② 惰性好处：` => heavyComputation` 在组件第一次挂载时才会运行，一旦 state 初始化完成就不会再触发；适合读取缓存、大量静态数据或昂贵计算场景。
• #③ 开发模式注意：`StrictMode` 会额外调用初始化函数以检测副作用；`heavyComputation` 的日志可能出现两次。务必保持初始化函数纯粹，不做请求或订阅等副作用；把这些逻辑放在 `useEffect` 中处理。
• #④ 避免副作用错误：`heavyComputation` 必须纯粹，否则每次挂载都会产生副作用影响全局状态。

五、Fragment 与 DocumentFragment：名字相近但职责截然不同

return ( <>

当前计数的观点是，{count}

+ ) javascript // 浏览器原生 DocumentFragment const fragment = document.createDocumentFragment;data.forEach(task => { const li = document.createElement;li.textContent = task;fragment.appendChild;})，list.appendChild;

六、三大实践让 React 状态不再神秘

1. 源数据+派生数据——仅把真正需要持久化的数据放进 state，其余可用 useMemo 或普通计算得来。
• 快照+函数式更新——理解 state 为一次渲染快照，必要时使用 setter 来保证基于上一次结果的正确累加或合并。其实，
• 惰性初始化+无副作用——昂贵初始计算采用惰性方式。只在首次挂载时运行，并保持纯粹，无需担心多次执行带来的性能浪费或副作用泄漏。
*这篇文章基于 React v18+ 与 Vite 开发环境编写，如遇版本差异请参考官方文档获取最新细节。*

参考文献

• React 官方博客 - State as a Snapshot
• React 官方博客 - Queueing a Series of State Updates
• 官方 docs - useState

"