什么是乐观更新（Optimistic Updates），如何安全地实现它们？

Question

Accepted Answer

**乐观更新**会立即更新 UI，*假设*服务器请求会成功，而不是等待响应。这使应用感觉瞬间响应——但必须处理请求实际失败的情况，通过**回滚**来恢复。

## 对比

```text
Pessimistic (normal): click → show spinner → wait for server → THEN update UI (feels slow)
Optimistic:           click → update UI INSTANTLY → send request →
                      if it fails, ROLL BACK the change (feels instant)
```

## 对用户体验的重要性

对于高可信度的操作（点赞文章、切换待办事项、发送聊天消息），请求几乎总是成功的，所以等待往返只会增加感知延迟。乐观更新使这些操作感觉立即完成。

## 安全地实现它（回滚至关重要）

```jsx
async function toggleLike(post) {
  const previous = post.liked;                 // 1. SNAPSHOT the old state for rollback
  setPost({ ...post, liked: !post.liked });    // 2. update UI optimistically

try {
    await api.toggleLike(post.id);             // 3. fire the request
  } catch (err) {
    setPost({ ...post, liked: previous });     // 4. ROLL BACK on failure
    showError("Couldn't update — please retry"); // 5. tell the user
  }
}
```

安全的关键是：**在进行乐观更改前快照保存之前的状态**，如果请求失败则恢复它。跳过回滚会让 UI 对服务器状态撒谎——这是乐观更新可能引入的危险 bug。

## 使用 React Query（内置支持）

```jsx
useMutation({
  mutationFn: toggleLike,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ["post"] });
    const previous = queryClient.getQueryData(["post"]); // snapshot
    queryClient.setQueryData(["post"], newData);          // optimistic update
    return { previous };                                   // pass snapshot to onError
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(["post"], context.previous);  // rollback
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // reconcile with server
});
```

React Query 将该模式规范化：`onMutate`（快照 + 乐观更新）、`onError`（回滚）、`onSettled`（重新获取以确认事实）。

## 何时使用 / 避免

```text
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
```

## 为什么这很重要

乐观更新是一种强大的用户体验技术，通过不等待网络来使应用感觉瞬间响应——但只有在实现回滚（快照后恢复）并呈现错误时，它们才是*安全*的。

该模式（快照 → 更新 → 失败时回滚 → 协调）是必需知识，理解何时适当（成功可能性高、低风险操作）与何时危险（支付操作）是将精心打磨、值得信赖的 UI 与无声地误代表服务器状态的 UI 区分开来的关键。