React useOptimistic 如何实现乐观更新？

Question

仓乃文 · Accepted Answer

乐观更新是指用户操作后立即更新 UI 显示预期结果，不等服务器响应。useOptimistic 在请求期间显示乐观值，请求完成后自动回退到真实值，提升用户感知速度。点赞场景： ```javascript function LikeButton({ initialLiked, onToggle }) { const [liked, setLiked] = useState(initialLiked); const [optimisticLiked, addOptimistic] = useOptimistic(liked); const handleClick = async () => { addOptimistic(!liked); // 立即显示乐观状态 const result = await onToggle(!liked); // 发送请求 setLiked(result.liked); // 请求完成后更新真实状态 }; return ( ); } ``` 列表添加场景： ```javascript function TodoList({ todos, onAdd }) { const [optimisticTodos, addOptimistic] = useOptimistic( todos, (currentTodos, newTodo) => [...currentTodos, { ...newTodo, id: "temp", saving: true }] ); const handleAdd = async (text) => { addOptimistic({ text, saving: true }); // 立即显示带 saving 标记 await onAdd(text); // 等服务器确认 }; } ``` 补充说明： - optimisticLiked !== liked 可以判断是否处于乐观状态，用于显示 loading - 请求失败时不需要手动回退，useOptimistic 会自动恢复到真实值 - 第二个参数是合并函数，定义乐观值如何与当前状态合并 - 适合点赞、收藏、发送消息等用户期望立即看到结果的场景