React useOptimistic在乐观更新中的应用

乐观更新是一种用户体验优化模式。其核心思想是：当用户执行一个可能耗时的操作（如提交表单、点赞、删除列表项）时，立即在界面上反映出操作成功的结果，同时在后台发送网络请求。如果后台请求成功，界面保持不变；如果请求失败，则回滚到之前的状态并给出错误提示。这种方式让用户感觉应用响应迅速，避免了等待加载的焦虑感。

React 18 引入了 useOptimistic 钩子（目前在 Next.js 14+ 等框架的 Canary/RC 版本中可用），旨在以声明式、简洁的方式处理乐观更新的状态管理。本文将手把手教你如何在实际项目中应用它。

阶段一：理解 useOptimistic 的核心逻辑

在动手之前，先明确 useOptimistic 是如何工作的。

它的基本签名如下：

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

1. state：你的 “真实”状态。这通常来源于 useState、useReducer 或通过 fetch 等方式获取的服务器状态。
2. updateFn：一个纯函数，接收当前的 state 和一个 optimisticValue 参数，返回一个 临时的乐观状态。它的作用是，将用户期望的即时变化应用到当前状态上。
3. optimisticState：组件渲染时使用的状态。它优先显示乐观更新的结果。在没有进行乐观更新时，它等于原始 state；在有乐观更新进行中时，它等于 updateFn 计算出的临时状态。
4. addOptimistic：一个函数，用于触发乐观更新。你将期望的变更（optimisticValue）传递给它。

工作流程：

1. 用户触发动作。
2. 你调用 addOptimistic(optimisticValue)，UI 瞬间基于 optimisticState 更新。
3. 你同时发起一个 异步操作（如 fetch）。
4. 异步操作成功：你使用返回的真实数据更新 state（例如，调用 setState 或重新验证数据）。optimisticState 会自动同步到新的 state，乐观更新完成。
5. 异步操作失败：你需要捕获错误，并 回滚。一个常见的做法是，在异步操作失败时，不更新 state，并触发一个状态重置（例如，通过 useState 的重置函数或重新获取服务器数据），使 optimisticState 恢复到原始值。

阶段二：构建一个基础示例

假设我们有一个待办事项列表，每条待办项都有一个“完成”按钮。

第一步：准备项目和依赖

确保你的项目使用的是支持 React 18 Canary/RC 版本的环境。通常需要在 package.json 中手动指定或使用像 Next.js 14 这样内置了实验性 React 支持的框架。

第二步：定义状态和乐观更新函数

首先，我们管理一个待办事项列表的真实状态。

// 一个简单的待办项数据结构
const initialTodos = [
  { id: 1, text: '学习 React Hooks', completed: false },
  { id: 2, text: '写一篇技术博客', completed: false },
];

接下来，在组件内部，我们使用 useState 管理这个列表，并为 useOptimistic 准备更新函数。

import { useState, useOptimistic } from 'react'; // 注意：useOptimistic 仍在 React 实验频道

export function TodoList() {
  const [todos, setTodos] = useState(initialTodos);

  // 定义乐观更新的函数
  // currentState: 当前的真实 todos 状态
  // todoIdToToggle: 我们期望切换完成状态的那个待办项 ID
  const updateFn = (currentState, todoIdToToggle) => {
    // 遍历列表，找到目标项，翻转其 completed 字段
    return currentState.map(todo =>
      todo.id === todoIdToToggle
        ? { ...todo, completed: !todo.completed }
        : todo
    );
  };

  // 使用 useOptimistic
  const [optimisticTodos, addOptimistic] = useOptimistic(todos, updateFn);

  // ... 其余代码
}

第三步：实现切换完成状态的处理函数

这是关键部分。我们需要定义一个函数，当用户点击“完成”按钮时调用。这个函数需要做两件事：

1. 立即触发乐观更新。
2. 发起真实的异步请求。

  // 处理切换待办项完成状态
  const handleToggleTodo = async (todoId) => {
    // 1. 触发乐观更新，UI 立即响应
    addOptimistic(todoId);

    // 2. 发起真实的异步请求
    try {
      const response = await fetch(`/api/todos/${todoId}/toggle`, {
        method: 'PATCH',
      });

      if (!response.ok) {
        throw new Error('更新失败');
      }

      // 3. 请求成功：用服务器返回的真实数据更新状态
      // 假设 API 返回了更新后的单个待办项
      const updatedTodo = await response.json();
      setTodos(currentTodos =>
        currentTodos.map(todo => (todo.id === todoId ? updatedTodo : todo))
      );
    } catch (error) {
      // 4. 请求失败：需要回滚
      // 最简单的回滚方式：重新从服务器获取完整列表
      console.error('更新待办项失败:', error);
      // 假设我们有一个重新获取列表的函数
      await refetchTodos();
      // 或者，可以显示一个错误通知
      alert('操作失败，已恢复原状');
    }
  };

第四步：在 JSX 中使用状态并绑定事件

  return (
    <ul>
      {optimisticTodos.map(todo => (
        <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
          {todo.text}
          <button onClick={() => handleToggleTodo(todo.id)}>
            {todo.completed ? '标记未完成' : '标记完成'}
          </button>
        </li>
      ))}
    </ul>
  );

代码逻辑梳理：

1. 用户点击按钮，触发 handleToggleTodo。
2. addOptimistic(todoId) 被调用，optimisticTodos 立即变为 updateFn(todos, todoId) 计算的结果，UI 瞬间更新（例如，文字出现删除线）。
3. fetch 请求开始。在此期间，用户看到的是乐观后的状态。
4. 如果 fetch 成功，我们用服务器返回的真实数据调用 setTodos，state 更新，optimisticState 与之同步，过渡平滑。
5. 如果 fetch 失败，我们调用 refetchTodos（或重置状态）。当 todos（原始状态）被重置为失败前的值时，optimisticTodos 也会自动回滚，因为没有进行中的乐观更新了。

阶段三：处理更复杂场景与边界情况

1. 与表单提交结合

乐观更新常用于表单提交。例如，提交评论后立即将其添加到列表底部。

  const [comments, setComments] = useState([]);
  const [optimisticComments, addOptimisticComment] = useOptimistic(comments, (currentComments, newComment) => {
    // 将新评论添加到列表开头，并标记为“提交中”
    return [{ ...newComment, status: 'optimistic' }, ...currentComments];
  });

  const handleAddComment = async (formData) => {
    const newComment = {
      id: Date.now(), // 临时 ID
      text: formData.get('text'),
      status: 'optimistic',
    };

    // 乐观更新：立即将新评论显示出来
    addOptimisticComment(newComment);

    try {
      const response = await fetch('/api/comments', {
        method: 'POST',
        body: JSON.stringify({ text: formData.get('text') }),
      });
      const savedComment = await response.json();

      // 成功：用服务器返回的评论（包含真实 ID）替换掉乐观评论
      setComments(current => [savedComment, ...current.filter(c => c.id !== newComment.id)]);
    } catch (error) {
      // 失败：移除乐观评论
      setComments(current => current.filter(c => c.id !== newComment.id));
      // 显示错误
    }
  };

2. 管理多个并发的乐观更新

useOptimistic 可以处理多个同时进行的乐观更新。updateFn 会被多次调用，每次传入最新的 optimisticValue，并基于当前累积的乐观状态计算新的临时状态。你不需要手动管理队列。

3. 提供回滚机制

如示例所示，回滚的实现依赖于对“真实状态”的重置。常见的策略包括：

• 重新执行数据获取（refetch）。
• 使用 useReducer 并在 catch 块中 dispatch 一个重置 action。
• 将初始状态或上次成功的状态存储在一个 ref 中，用于重置。

4. 处理网络延迟和竞态条件

在乐观更新进行中时，用户可能会触发其他操作。你需要确保你的异步逻辑能正确处理这种情况。通常，依赖于 React 的状态更新是异步且批处理的特性，以及你在 setTodos 中使用的函数式更新（如 currentTodos => ...），可以避免大部分竞态问题。但对于非常复杂的场景，可能需要考虑使用状态管理库（如 Redux Toolkit 的 createAsyncThunk 或 TanStack Query）进行更精细的控制。

阶段四：最佳实践与注意事项

1. 错误处理必须严谨：乐观更新的核心风险是“乐观”失败。务必在异步操作的 catch 或 finally 块中实现可靠的回滚逻辑。单纯不处理错误会导致界面状态与服务器数据永久不一致。

2. 用户体验一致性：乐观更新后的界面应清晰地指示“操作已接收，正在处理”。例如，可以为乐观更新的项目添加一个轻微的半透明效果或一个微小的加载图标。当真实数据返回或发生错误回滚时，动画过渡应平滑。

3. 与数据获取库集成：如果你使用 TanStack Query、SWR 等数据获取库，它们自身也提供了乐观更新的机制（如 onMutate 和 onSettled 回调）。通常建议优先使用这些库内置的功能，因为它们与缓存和重新验证机制结合得更紧密。useOptimistic 更适用于没有使用这类库，或者需要更底层控制的场景。

4. 测试乐观更新：编写测试时，需要模拟网络请求的延迟和失败，以确保乐观更新和回滚逻辑在各种情况下都能正常工作。可以使用 Mock Service Worker (msw) 等工具来拦截和模拟 API 调用。

5. 性能考量：updateFn 应该是一个纯函数且计算轻量，因为它可能会在每次 addOptimistic 调用时运行。对于极大的列表，确保你的更新逻辑是高效的。

useOptimistic 钩子为 React 开发者提供了一个专注于乐观更新状态管理的原生工具。通过将乐观更新的逻辑从复杂的异步流程中解耦出来，它使得实现流畅、即时的用户交互变得更加直观和可维护。理解其 state -> optimisticState 的映射机制以及与异步操作结合的生命周期，是成功应用它的关键。