哨卫的前端之旅

核心概念

当用户执行某个异步操作（如点赞、评论等）时，不等待服务器响应就立即更新 UI，假设操作会成功。如果操作失败，再回滚到之前的状态。官方文档：useOptimistic

使用场景

点赞/取消点赞 - 立即显示点赞状态变化
评论发布 - 立即在列表中显示新评论
数据编辑 - 提交表单后立即显示编辑结果
删除操作 - 立即从列表中移除项目

实现原理

const [likes, setLikes] = useState(initialLikes);
const [isLiking, setIsLiking] = useState(false);

const handleLike = async () => {
  // 1. 乐观更新UI
  const newLikes = likes + 1;
  setLikes(newLikes);
  setIsLiking(true);

  try {
    // 2. 发送请求
    await likePost(postId);
  } catch (error) {
    // 3. 失败时回滚
    setLikes(likes);
    toast.error('点赞失败');
  } finally {
    setIsLiking(false);
  }
};

交互式 Demo

🚀 useOptimistic 核心概念

最简单的 useOptimistic Demo

👀 你看到的（乐观状态）

🤍 42 点赞

💾 服务器的（真实状态）

🤍 42 点赞

模拟API失败（观察自动回滚）

💡 useOptimistic 核心原理

1立即响应：点击后UI瞬间更新，无需等待API

2后台同步：API请求在后台执行

3成功确认：API成功 → 更新真实状态 → 乐观状态被替换

4失败回滚：API失败 → 真实状态不变 → 乐观状态自动清除

核心代码（就这么简单！）:

const [optimisticPost, addOptimisticLike] = useOptimistic(
  post, // 真实状态
  (current, update) => ({ ...current, ...update }) // 更新函数
);

// 立即更新UI
addOptimisticLike({ isLiked: true, likes: 43 });

// API成功 → setPost() → 乐观状态被真实状态替换
// API失败 → 不调用setPost() → 乐观状态自动回滚