React 19 新特性：`useOptimistic` Hook 完整指南

React 19 新特性useOptimisticHook 完整指南在 React 19 中官方引入了一个全新的 Hook ——useOptimistic用于处理乐观 UI 更新Optimistic UI。它能够让你的应用在用户操作时立即更新 UI而无需等待异步操作完成从而提供更流畅的交互体验。本文将深入讲解useOptimistic的用法并提供示例代码。什么是乐观更新乐观更新是一种常见的 UI 技术用户触发操作例如点赞、收藏、发送消息UI立即反应不等待服务器响应异步请求成功时保持 UI 状态异步请求失败时回退或提示错误传统实现方式通常需要手动管理临时状态和回退逻辑而useOptimistic帮助我们更优雅地管理这一流程。useOptimistic基本语法const[optimisticValue,updateOptimistic]useOptimistic(initialValue,reducer);initialValue初始状态值reducer(current, action)一个 reducer 函数用于根据 action 更新乐观状态optimisticValue当前乐观状态updateOptimistic(action)触发乐观状态更新示例简单计数器import { useOptimistic } from react; function Counter() { const [count, updateCount] useOptimistic(0, (current, action) current action); return ( div p计数: {count}/p button onClick{() updateCount(1)}1/button /div ); }点击按钮时UI 会立即增加数字而不依赖任何异步请求。与异步请求结合乐观更新的最大价值在于异步操作。例如我们模拟一个“点赞按钮”并假设请求有 50% 概率失败import { useState, useTransition, useOptimistic } from react; export default function LikeButton() { const [likes, setLikes] useState(0); const [optimisticLikes, addOptimisticLikes] useOptimistic(likes, (current, action) current action); const [isPending, startTransition] useTransition(); const [error, setError] useState(); const handleLike () { setError(); addOptimisticLikes(1); // 乐观更新 startTransition(async () { try { await new Promise(r setTimeout(r, 1000)); // 模拟延迟 const success Math.random() 0.5; // 50% 概率失败 if (!success) throw new Error(服务器请求失败); setLikes(prev prev 1); // 成功更新真实状态 } catch (err) { setError(err.message); addOptimisticLikes(-1); // 回退乐观值 } }); }; return ( div style{{ fontFamily: sans-serif, padding: 20 }} p点赞数: {optimisticLikes}/p button onClick{handleLike} disabled{isPending} {isPending ? 处理中... : 点赞} /button {error p style{{ color: red }}⚠️ {error}/p} /div ); }核心注意点乐观状态与真实状态分离optimisticValue是暂时的 UI 状态setState才是最终真实状态失败回退需要手动处理React 不知道服务器请求是否失败必须在 catch 中使用 reducer 回退乐观值支持多次并发更新useOptimistic内部会管理队列多个乐观更新不会互相覆盖与useTransition搭配使用可以控制异步更新的优先级提供加载状态isPending优化 UX完整Demoimport React, { useState, useOptimistic, useCallback, useTransition, } from react; // 类型定义 interface LikeButtonProps { id: string; initialLikes: number; } interface ApiResponse { likes: number; success: boolean; } function LikeButton({ id, initialLikes }: LikeButtonProps) { // 实际状态 const [likes, setLikes] useStatenumber(initialLikes); // 乐观更新状态 const [optimisticLikes, addOptimisticLike] useOptimistic( likes, (currentLikes: number, action: { type: like | unlike | reset }) { switch (action.type) { case like: return currentLikes 1; case unlike: return Math.max(0, currentLikes - 1); case reset: return initialLikes; default: return currentLikes; } }, ); const [error, setError] useStatestring | null(null); const [isLoading, setIsLoading] useStateboolean(false); // ✅ 必须使用 useTransition const [isPending, startTransition] useTransition(); // 模拟 API 调用 const simulateApiCall async ( action: like | unlike | reset, currentLikes: number, ): PromiseApiResponse { console.log(Starting API call:, action); await new Promise((resolve) setTimeout(resolve, 2000)); if (Math.random() 0.2) { console.log(API call failed); throw new Error(网络请求失败请重试); } switch (action) { case like: return { likes: currentLikes 1, success: true }; case unlike: return { likes: Math.max(0, currentLikes - 1), success: true }; case reset: return { likes: initialLikes, success: true }; } }; // // ✅ 修复用 startTransition 包裹乐观更新 // const handleLike useCallback(async () { console.log( Handle Like clicked ); setError(null); setIsLoading(true); const previousLikes likes; // 关键把乐观更新放在 startTransition 中 startTransition(() { console.log(1. Optimistic update inside transition); addOptimisticLike({ type: like }); }); startTransition(async () { try { console.log(2. Starting API call...); const result await simulateApiCall(like, previousLikes); console.log(3. API success, updating real state); setLikes(result.likes); } catch (err) { console.log(4. API failed, rolling back); // 回滚同样要在 transition 中 setLikes(previousLikes); setError(err instanceof Error ? err.message : 未知错误); } finally { setIsLoading(false); } }); }, [likes]); const handleUnlike useCallback(async () { setError(null); setIsLoading(true); const previousLikes likes; startTransition(() { addOptimisticLike({ type: unlike }); }); startTransition(async () { try { const result await simulateApiCall(unlike, previousLikes); setLikes(result.likes); } catch (err) { setLikes(previousLikes); setError(err instanceof Error ? err.message : 未知错误); } finally { setIsLoading(false); } }); }, [likes]); const handleReset useCallback(async () { setError(null); setIsLoading(true); const previousLikes likes; startTransition(() { addOptimisticLike({ type: reset }); }); try { const result await simulateApiCall(reset, previousLikes); setLikes(result.likes); } catch (err) { startTransition(() { setLikes(previousLikes); }); setError(err instanceof Error ? err.message : 未知错误); } finally { setIsLoading(false); } }, [likes, initialLikes]); const clearError () setError(null); return ( div style{{ padding: 30px, border: 2px solid #e0e0e0, borderRadius: 12px, maxWidth: 600px, margin: 0 auto, fontFamily: system-ui, -apple-system, sans-serif, }} h2 style{{ textAlign: center, color: #333, marginBottom: 30px }} useOptimistic 完整示例React 19.2 修复版 /h2 {/* 状态对比区域 */} div style{{ display: flex, justifyContent: space-around, margin: 30px 0, padding: 20px, backgroundColor: #f8f9fa, borderRadius: 8px, }} div style{{ textAlign: center }} h3 style{{ color: #2196f3, marginBottom: 10px, fontSize: 14px }} 实际状态 (Real State) /h3 div style{{ fontSize: 48px, fontWeight: bold, color: #333 }} {likes} /div p style{{ color: #666, marginTop: 5px, fontSize: 12px }} 来自服务器的真实数据 /p /div div style{{ textAlign: center }} h3 style{{ color: #ff9800, marginBottom: 10px, fontSize: 14px }} 乐观状态 (Optimistic State) /h3 div style{{ fontSize: 48px, fontWeight: bold, color: optimisticLikes ! likes ? #ff9800 : #4caf50, transition: color 0.3s, }} {optimisticLikes} /div p style{{ color: #666, marginTop: 5px, fontSize: 12px }} 立即更新的 UI 状态 /p /div /div {/* 状态指示器 */} {optimisticLikes ! likes !error ( div style{{ padding: 15px, backgroundColor: #fff3e0, borderRadius: 8px, marginBottom: 20px, textAlign: center, }} span style{{ color: #ff9800, fontWeight: bold }} ⚡ 乐观更新中... 等待服务器响应 /span /div )} {/* 操作按钮区域 */} div style{{ display: flex, justifyContent: center, gap: 15px, margin: 30px 0, }} button onClick{handleLike} disabled{isLoading} style{{ padding: 15px 30px, fontSize: 16px, fontWeight: bold, cursor: isLoading ? not-allowed : pointer, backgroundColor: isLoading ? #ccc : #2196f3, color: white, border: none, borderRadius: 8px, }} {isLoading ? ⏳ 处理中... : 点赞} /button button onClick{handleUnlike} disabled{isLoading || likes 0} style{{ padding: 15px 30px, fontSize: 16px, fontWeight: bold, cursor: isLoading || likes 0 ? not-allowed : pointer, backgroundColor: isLoading || likes 0 ? #ccc : #f44336, color: white, border: none, borderRadius: 8px, }} {isLoading ? ⏳ 处理中... : 取消点赞} /button button onClick{handleReset} disabled{isLoading} style{{ padding: 15px 30px, fontSize: 16px, fontWeight: bold, cursor: isLoading ? not-allowed : pointer, backgroundColor: isLoading ? #ccc : #9c27b0, color: white, border: none, borderRadius: 8px, }} {isLoading ? ⏳ 处理中... : 重置} /button /div {/* 错误提示 */} {error ( div style{{ padding: 15px, backgroundColor: #ffebee, borderRadius: 8px, marginBottom: 20px, textAlign: center, }} span style{{ color: #c62828, fontWeight: bold }} ❌ {error} /span /div )} {/* 说明 */} div style{{ marginTop: 20px, padding: 15px, backgroundColor: #e3f2fd, borderRadius: 8px, }} p style{{ margin: 0, color: #333, fontSize: 14px }} strong React 19.2 更新/stronguseOptimistic 必须在 useTransition 中使用 /p /div /div ); } export default LikeButton;总结useOptimistic是 React 19 提供的乐观 UI 管理工具它可以立即更新 UI合并多个乐观更新与异步操作无缝配合适合以下场景点赞 / 收藏 / 评论表单提交预览实时数据交互如聊天、投票乐观更新不仅提高了响应速度还让应用体验更加流畅。小贴士异步操作失败时务必回退乐观值多次乐观更新时确保 reducer 是幂等的可以结合useTransition显示加载状态或禁用按钮React 19 的useOptimistic提供了一种优雅的方式管理乐观 UI是前端异步交互的利器。