React 中的乐观更新：从手写回滚到 useOptimistic

function CommentList() {
  const [comments, setComments] = useState(initialComments)

  function handleDelete(id) {
    // 1️⃣ 保存旧状态
    const prevComments = comments

    // 2️⃣ 立即更新 UI（乐观更新）
    setComments(comments.filter(c => c.id !== id))

    // 3️⃣ 发请求
    deleteCommentApi(id)
      .then(() => {
        // 成功：什么都不用做
      })
      .catch(() => {
        // 4️⃣ 失败：回滚
        setComments(prevComments)
        alert('删除失败，已恢复')
      })
  }

  return (
    <>
      {comments.map(c => (
        <div key={c.id}>
          {c.text}
          <button onClick={() => handleDelete(c.id)}>删除</button>
        </div>
      ))}
    </>
  )
}

目前我们这种写法已经能够实现单次操作的、简单场景的乐观更新，但是如果面对连续点击，复杂交互，无法处理多个乐观更新同时更新。

比如，我现在连续删除了A和B，结果A的返回值是失败，B的返回值是成功，那么目前回滚会变成什么呢。

这样结果就是B已经成功删除了，A没有成功删除，结果B被回滚回去了。

因此react提供了useOptimistic 能帮助我们更好实现乐观更新。他能够很好维护每一次乐观更新。

如何使用`useOptimistic`

javascript 复制代码

const [optimisticState, setOptimistic] = useOptimistic(value, reducer?);

输入

value: 当没有待处理的操作时返回的值

reducer(currentState, action):reducer可传也可不传这个参数用来描述触发一次乐观更新状态应该如何变化，用于一些复杂的计算

输出返回两个值

optimisticState（当前乐观状态）也就是我们显示在页面的值
- 在没有进行中的 Action 时，它等于你传入的原始 value
- 当存在进行中的 Action 时，它等于：
  - reducer 计算后的状态
  - 如果没有提供 reducer，则等于传给 set 函数的值
setOptimistic（更新函数）更新页面值的函数
- 用于在 Action 内部 更新乐观状态
- 通过它可以临时将 UI 更新为一个"预期成功"的状态

案例

我们依然使用上面描述的删除评论的一个案例

javascript 复制代码

import { useOptimistic, useState } from 'react';

function CommentList() {
  const [comments, setComments] = useState(initialComments);

  const [optimisticComments, setOptimisticComments] = useOptimistic(
    comments,
    (state, commentId) =>
      state.filter(comment => comment.id !== commentId)  //这里通过 filter 直接从列表中移除该评论
  );

  async function handleDelete(id) {
    // 1️⃣ 立刻更新 UI（乐观）
    setOptimisticComments(id);

    try {
      // 2️⃣ 请求接口
      await fakeDeleteApi(id);

      // 3️⃣ 接口成功，正式更新真实状态
      setComments(prev =>
        prev.filter(comment => comment.id !== id)
      );
    } catch (e) {
      // 4️⃣ 接口失败，回滚（useOptimistic 自动恢复）
      alert('删除失败，请重试');
    }
  }

  return (
    <ul>
      {optimisticComments.map(comment => (
        <li key={comment.id}>
          {comment.content}
          <button onClick={() => handleDelete(comment.id)}>
            删除
          </button>
        </li>
      ))}
    </ul>
  );
}

总结

乐观更新的本质，是在用户操作发生的第一时间更新 UI ，而不是等待接口返回结果。

它通过先假设成功、失败再回滚 的方式，用可控的回滚成本 ，换取更流畅、更即时的用户交互体验。

以上如有错误可以评论，万分感谢！！！

Reference

useOptimistic -- React 中文文档