在 AI 编程时代，我们经常面临一个挑战：如何让 AI 生成的代码符合团队的技术栈和编码规范？Cursor 的规则功能正是为了解决这一痛点而设计。本文将基于官方文档，为你全面解析 Cursor 规则的

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

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

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

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

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

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

• 悲观更新流程：

  1. 用户点击“点赞”按钮。
  2. 应用向服务器发送“点赞”API 请求。
  3. 应用显示一个“加载中”的旋转图标。
  4. 服务器处理请求，返回“成功”响应。
  5. 应用收到响应后，将按钮变成“已赞”状态（比如变成红色）。
  • 缺点： 用户会感知到明显的延迟（从点击到图标变化）。

• 乐观更新流程：

  1. 用户点击“点赞”按钮。
  2. 立即将按钮变成“已赞”状态，给用户即时的反馈。
  3. 同时，在后台向服务器发送“点赞”API 请求。
  4. 如果请求成功：皆大欢喜，UI 状态和服务器状态一致。
  5. 如果请求失败（比如网络问题）：应用将按钮回滚到“未赞”状态，并可能显示一个提示，如“操作失败，请重试”。
  • 优点： 用户体验极其流畅，感觉应用响应飞快。

乐观更新的核心步骤

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

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

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

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

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

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

技术实现

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

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

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

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

🛠️ 核心实现步骤

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

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

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

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 或移动应用时，对于合适的场景，它是一个非常值得采用的最佳实践。