React 19 的 useOptimistic 修好了即时 UI,再配上 useActionState 却搞坏了重置按钮
来源:dev.to — 2026-08-04
📋 概述
作者承接上一篇讲 useActionState 的文章,本篇聚焦 useOptimistic。有些交互根本不想等网络:评论发布、点赞、勾选待办,用户期望动作一发生立刻看到结果。useOptimistic 正是填补这个缺口,且只要接得对,无需手写任何回滚逻辑。但他亲手搭了一个把 useOptimistic 与 useActionState 结合的实例,暴露了自己之前没意识到的两个错误。旧的“假即时”手法(本地布尔值先行)在没有 catch 时会永久骗用户,双击更是让两个本地布尔和两次网络请求在无顺序保证下赛跑——他曾在关注按钮上为此花了一晚上修计数偶尔漂移 1 的问题。
🔑 核心要点
useOptimistic 填补“动作即结果” 的即时反馈缺口,无需手写回滚逻辑
旧的本地布尔先行法缺 catch 时永久对用户撒谎 ,双击则让状态与网络在无顺序下赛跑
真正的错因不是笔误,而是没人管理“展示值与确认值”的关系
把 useOptimistic 与 useActionState 组合 时接错线,反而弄坏了重置按钮
💡 金句
The state wasn't wrong because of a typo. It was wrong because nothing was actually managing the relationship between what I was showing and what was confirmed.
👍 0
❤️ 点赞
👎 0
沉底
← 返回 Dev.to 首页