Functional Updates 函数式更新

最后更新：2026-10-28

给 setState 传函数（如 setCount(c => c + 1)）表示「基于最新前值计算下一次状态」。同一事件里连续多次更新，或在定时器等异步闭包中使用状态时，必须用这种写法避免拿到过期旧值。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

setCount((prev) => prev + 1)  // ✅ 基于最新值，连续调用安全
setCount(count + 1)           // ❌ 闭包旧值，批量更新时会丢失

updater（更新函数）	接收「最新的状态值」返回「下一个状态值」的纯函数；不能有副作用，React 可能多次调用它。

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

两个计数各配一个按钮：点「函数式 +3」数字准确加三；点「直接值」按钮因为批量更新相互覆盖，数字每次只加一——两种写法的差异一目了然。

⚠️ 注意 同一轮事件处理里的多次 set 会批量合并：直接传值时只有最后一次生效，函数式更新则每次都在前值上叠加。

💡 提示 setTimeout、Promise 回调等异步代码里闭包中的 state 必然过期，一律用函数式更新。

ℹ️ 说明 updater 必须是纯函数：React 在并发模式下可能调用它多次来验证结果，有副作用就会出错。

更多案例整理中，敬请期待。

Q setCount(count + 1) 和 setCount(c => c + 1) 有什么区别？

A 前者用的是当次渲染闭包里的旧值，批量更新时会互相覆盖；后者把更新排成队列依次基于最新前值计算，结果总是正确。

Q 为什么连续三次 setState 只加了一次？

A 三次 setCount(count + 1) 读到的是同一个旧值，React 批量合并后等于只执行最后一次。改用 setCount(c => c + 1) 三次即可加三。

Q setTimeout 里更新 state 为什么值不对？

A 定时器回调闭包捕获的是创建时刻的旧 state。用函数式更新 setX(prev => ...)，或在依赖变化时重建定时器。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。