Optimistic UI
乐观更新
WebMobileDesktop上手难度: 进阶
不等服务器回应，先把界面改成「已经成功了」，失败了再回滚。
Live Demo
真的可以点海岸线的一天
未点赞
你刚才看到的这个：小红书点完赞图标瞬间点亮、微信发完消息立刻出现在列表里（发送中标记）、勾选 Todo 立刻划掉。
它到底是什么
Optimistic UI 是体验的质变点：点「点赞」后图标立刻变实心，而不是转两秒圈。代价是必须处理失败回滚——你需要准备好「怎么撤销这次乐观更新」。
乐观更新optimistic uioptimistic update先做后问即时反馈
Anatomy · 它由什么组成
Instant Apply立即生效
UI 先改
Pending Marker处理中标记
半透明或小转圈
Rollback回滚
失败时还原
Error Toast错误提示
说明发生了什么
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 操作成功率高（>95%） | 用 |
| 失败可以回滚且回滚成本低 | 用 |
| 用户会因为等待而感到卡顿 | 用 |
| 操作不可逆（转账、支付） | 不用 |
| 失败率较高 | 视情况 |
转账、支付这类不可逆操作必须等服务器确认。
失败回滚要有提示：静默回滚会让用户以为「我的操作丢了」。
Similar Patterns
别搞混一句话区分：不等服务器回应，先把界面改成「已经成功了」，失败了再回滚。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
点点赞后立即点亮图标，若接口失败则回滚成未点赞并用 Toast 提示「操作失败，请重试」。
不要只对 AI 说
Bad → Better不要这样对 AI 说
先更新界面，失败再回滚。
改成这样说
实现 Optimistic UI：先 mutate 本地 state 并记录 prevState，请求期间元素标记 pending 防重复点击，失败时还原 state + Toast「操作失败」+「重试」按钮，回滚必须对用户可见不能静默。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。