你是否点击过喜欢按钮，然后看到它在服务器思考的时候卡顿了一秒钟？这小小的延迟让你的应用感觉迟缓。React 19 发布了useOptimistic为了精确修复那个——界面变化之前服务器响应，如果出现故障会自动恢复。
🧩 概述
学习React的useOptimistic 通过构建即时心形切换钩子。点击心形，立即看到它变红，并让 React 在后台处理服务器。如果请求失败，心形会自动恢复——无需手动回滚代码.
✅ 要求
- 并排渲染两张卡片：一张标记为"成功切换"，另一张标记为"错误切换"
- 两张卡片初始时心形都处于中立（未点赞）状态。
- 点击成功切换卡片必须：
- 立即将心形变红，在服务器响应之前。
- 在服务器确认变更后保持心形为红色
- 。点击错误切换卡片必须：
- 立即将心变红，在服务器响应之前。
- 在服务器返回错误响应后，将心恢复为中立状态
- 。使用
useOptimistic钩子与startTransition一起管理乐观状态
。 💡 注意
-
addOptimistic必须在内部调用startTransition— 否则 React 会发出警告，尽管 UI 仍然会更新. - 透传状态只需要是一个
boolean（仅是值）。data的其余部分可以保持静态. -
toggleFavoriteError总是会抛出异常。带有console.error的 try/catch 在开发环境中防止出现红色错误覆盖层，而不会影响乐观回滚。 - starter 中的 data-testid 属性已经连接到测试 — 不要重命名或删除它们.
🧪 测试
- 渲染应用标题
- 渲染带标签的卡片
- 初始状态不是喜欢的状态
- 立即乐观切换心形并在成功时持久化
- 服务器错误时恢复心形
如果你一直在编写setState(optimisticValue)，那么try/catch通过手动回滚，useOptimistic会删除所有那些样板代码。试试看，感受一下你的UI可以有多流畅.