乐观更新 - 技术栈

"乐观更新"这个概念在现代应用开发，特别是前端和移动端开发中是非常流行的技术模式。

乐观更新 的核心思想是：在向服务器发送请求的同时，立即在用户界面上更新数据，假设请求最终会成功。 如果之后请求失败，再回滚 UI 上的更改，并告知用户。

这就像是"先斩后奏"------对用户的操作抱持"乐观"态度，认为大概率会成功，从而优先提供极快的视觉反馈。

与之相对的是 悲观更新：先发送请求到服务器，等待服务器返回成功的响应后，再更新用户界面。

一个简单的例子：点赞功能

假设一个社交媒体的点赞按钮：

悲观更新流程：
1. 用户点击"点赞"按钮。
2. 应用向服务器发送"点赞"API 请求。
3. 应用显示一个"加载中"的旋转图标。
4. 服务器处理请求，返回"成功"响应。
5. 应用收到响应后，将按钮变成"已赞"状态（比如变成红色）。
- 缺点： 用户会感知到明显的延迟（从点击到图标变化）。
乐观更新流程：
1. 用户点击"点赞"按钮。
2. 立即将按钮变成"已赞"状态，给用户即时的反馈。
3. 同时，在后台向服务器发送"点赞"API 请求。
4. 如果请求成功：皆大欢喜，UI 状态和服务器状态一致。
5. 如果请求失败 （比如网络问题）：应用将按钮回滚到"未赞"状态，并可能显示一个提示，如"操作失败，请重试"。
- 优点： 用户体验极其流畅，感觉应用响应飞快。

乐观更新的核心步骤

一个健壮的乐观更新实现通常包含以下步骤：

快照当前状态：在更新 UI 之前，先保存当前的数据状态（例如，文章之前的点赞数）。这是为了回滚做准备。
乐观更新 UI：立即用"预期的成功结果"来更新用户界面。
发送异步请求：向服务器发送真正的请求。
处理响应 ：
- 成功：无需额外操作，或者可以 silently（静默地）用服务器返回的最新数据同步一下 UI（确保完全一致）。
- 失败：
  - 回滚 UI：使用第 1 步保存的快照，将 UI 恢复到更新前的状态。
  - 通知用户：清晰地向用户告知错误，提示他们操作未成功。

为什么要使用乐观更新？（优点）

卓越的用户体验：消除了网络延迟带来的等待感，让应用感觉瞬间响应，非常"爽滑"。
感知性能提升：即使用户的网络很慢，UI 的更新也是立即的，大大提升了应用的感知性能。
符合用户心理预期：用户进行操作时期望立即看到结果，乐观更新完美地满足了这种预期。

乐观更新的挑战和注意事项（缺点）

复杂性更高：相比悲观更新，你需要编写额外的代码来处理回滚逻辑和错误状态。
可能的数据不一致：在极少数情况下，如果请求失败且回滚逻辑没有处理好，可能会导致 UI 显示的状态与服务器实际状态不一致。
并非适用于所有场景 ：
- 非常适合 ：点赞、关注、收藏、排序、简单的表单提交等非关键性 或幂等（多次执行结果相同）的操作。
- 不适合 ：
  - 金融交易（如转账）：绝对不能假设它会成功。
  - 创建具有重要唯一性约束的数据（如注册新用户）：你需要立刻知道用户名是否已被占用。
  - 顺序敏感的操作：如果操作顺序很重要，乐观更新可能会使逻辑变得复杂。

技术实现

在现代前端生态中，有许多工具可以简化乐观更新的实现：

React 19：引入的 useOptimisticHook 为实现乐观更新提供了官方支持。
React Query / TanStack Query ：提供了内置的 onMutate， onError， onSettled 等回调函数，可以非常方便地实现乐观更新。
SWR ：可以通过 mutate 函数手动控制缓存，结合 optimisticData 选项实现乐观更新。
Redux ：可以配合像 Redux Toolkit 的 createAsyncThunk 或在 extraReducers 中手动管理"pending", "fulfilled", "rejected" 状态来实现。

useOptimistic 实现

下面以 useOptimistic 为例，介绍如何使用 useOptimistic 实现点赞功能的乐观更新。

useOptimistic允许你在异步操作（如网络请求）实际完成之前，就"乐观地"更新用户界面，假设操作会成功。如果最终操作失败，界面会自动回滚到更新前的状态。其基本语法如下：

ts 复制代码

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

state: 当前的实际状态。
updateFn: 一个函数，格式为 (currentState, optimisticValue) => newState。它定义了如何根据"乐观值"生成新的乐观状态。
返回值：
- optimisticState: 当前应显示的乐观状态。无乐观更新时等于 state，有乐观更新时是 updateFn 的结果。
- addOptimistic: 触发乐观更新的函数，调用时会传入 optimisticValue。

🛠️ 核心实现步骤

一个完整的乐观更新流程通常包括以下步骤：

触发更新：用户进行操作（如点击按钮）。
乐观更新UI ：立即调用 addOptimistic 函数，传入新数据。界面会基于 updateFn 快速显示预期结果。
执行异步操作 ：发送实际的数据请求（如 fetch）。
处理最终结果 ：
- 成功：通常需要更新实际的状态（如通过 setState），使乐观状态与后端数据同步。
- 失败：在请求失败时，需要手动捕获错误并回滚状态 。useOptimistic 本身不自动处理请求失败的回滚，这需要开发者实现。

点击点赞后立即增加数字，无需等待网络请求。

ts 复制代码

function LikeButton({ id, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  // 定义乐观更新：当前点赞数 + 传入的增量
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (currentLikes, addedLikes) => currentLikes + addedLikes
  );

  async function handleLike() {
    // 1. 立即乐观更新UI
    addOptimisticLike(1);
    try {
      // 2. 执行异步操作
      const response = await fetch(`/api/like/${id}`, { method: 'POST' });
      const newLikes = await response.json();
      // 3. 成功：更新实际状态
      setLikes(newLikes);
    } catch (error) {
      // 4. 失败：回滚实际状态，界面也会相应回退
      // 5. 清晰地向用户告知错误，提示他们操作未成功
      setLikes(likes);
    }
  }

  return (
    <button onClick={handleLike}>
      Likes: {optimisticLikes} {/* 始终显示乐观状态 */}
    </button>
  );
}

总结

乐观更新是一种通过"假设成功，快速响应，失败回滚"来极大提升用户体验的设计模式。它用一定的实现复杂性换取了流畅度和用户满意度。在构建现代、交互性强的 Web 或移动应用时，对于合适的场景，它是一个非常值得采用的最佳实践。