React 19 新特性之useOptimistic

需求产生的背景

useOptimistic 可以让我们在与服务端通信时，先“乐观地”更新界面，让用户立刻看到更新后的结果，而不是等服务器返回结果才更新。

• 比如：你点击“点赞”按钮后，页面上的点赞数量马上+1，给用户带来流畅的交互体验。
• 如果服务器最终返回的结果失败，那么我们再把数据“回滚”到之前的状态，告诉用户失败了。

这类场景就叫做“乐观更新”(Optimistic UI Updates)，它能显著提升用户体验，让用户感觉应用响应很快。

为什么要有一个专门的 Hook？

在没有 useOptimistic 之前，我们可能会在点击按钮后手动去 setState，把数据先加 1，然后等到接口返回以后，再根据结果去做处理（成功就保持，失败就再减 1）。这样虽然能实现，但逻辑通常比较分散，需要我们来回处理多个函数之间的通信和状态回退，一不小心就会写得很乱。

useOptimistic 作为一个专门的 Hook，让这件事情更加“声明式”——你只需要告诉它：“如果用户做了某个操作，我想先这么改界面，如果真的失败了，我要还原。” 这样就能把核心逻辑写得更清晰。

与 useState 的差异

1. 原子更新：在并发模式下，不同的更新可能交织进行，useOptimistic 可以通过 reducer 的方式更好地合并更新，而不必像 useState 那样手动写回调函数去获取最新值。
2. 场景聚焦：useState 通用、简单，而 useOptimistic 更针对乐观更新场景，减少了手动管理“回滚”逻辑的心智负担。
3. 内置的乐观逻辑：useOptimistic 是内置对“先修改再回退”这一逻辑的支持，而 useState 中，这通常需要用户自己管理一次“替换”、“还原”的逻辑。

参考链接

感谢以下资源的帮助和启发：

1.【React 19】useOptimistic で楽観的に UI を更新 - Qiita【React 19】useOptimistic で楽観的に UI を更新 - Qiitaはじめにこの記事では、React 19 で新たに追加された useOptimistic という hook による楽観的更新処理について、useOptimistic を利用するケース、利用しないケー…

2.useOptimistic – React 中文文档useOptimistic – React 中文文档The library for web and native user interfaces