---

前言

在React的并發模式下，useDeferredValue和useTransition是兩個強大的Hook，它們通過延遲非緊急的UI更新來提升用戶體驗，特別是在處理復雜渲染或高開銷任務時。本文將對比這兩個Hook的核心差異，并通過實際案例展示它們的典型應用場景。

---

一、核心差異對比

特性	useDeferredValue	useTransition
核心作用	延遲單個值的更新，標記為低優先級	延遲一段邏輯的執行，標記為低優先級
返回值	返回延遲后的值（deferredValue）	返回[isPending, startTransition]數組
觸發時機	在組件更新時，優先使用舊值渲染，后臺再渲染新值	通過startTransition包裹的邏輯會被標記為低優先級
適用場景	高頻更新的輸入框、實時搜索、滾動列表等	路由切換、復雜計算、非緊急狀態更新（如分頁加載）
性能影響	減少頻繁渲染對主線程的阻塞，提升輸入流暢性	避免關鍵任務被阻塞，保持UI響應性
與Suspense集成	延遲更新不會觸發Suspense的fallback，保持舊版本顯示	延遲邏輯不會觸發Suspense的fallback
底層機制	基于并發渲染的優先級調度，動態調整延遲	基于并發渲染的優先級調度，允許中斷低優先級任務

---

二、代碼示例對比

1. useDeferredValue：延遲搜索結果更新

	import { useState, useDeferredValue, useMemo } from 'react';import { Input, List } from 'antd';import mockjs from 'mockjs';interface Item {id: string;name: string;address: string;}export default function SearchPage() {const [inputValue, setInputValue] = useState('');const [list] = useState<Item[]>(() => {return mockjs.mock({'list|10000': [{'id|+1': 1,name: '@natural',address: '@county(true)',},],}).list;});const deferredQuery = useDeferredValue(inputValue);const isStale = deferredQuery !== inputValue;const filteredItems = useMemo(() => {return list.filter(item =>item.name.toString().includes(deferredQuery),);}, [deferredQuery, list]);return (<div><Inputvalue={inputValue}onChange={(e) => setInputValue(e.target.value)}placeholder="輸入搜索內容"/><Liststyle={{opacity: isStale ? '0.2' : '1',transition: 'all 1s',}}renderItem={(item) => (<List.Item><List.Item.Metatitle={item.name}description={item.address}/></List.Item>)}dataSource={filteredItems}/></div>);}

關鍵點：

• 輸入框的inputValue會立即更新，但deferredQuery會延遲更新。
• 列表過濾僅在deferredQuery變化時觸發，避免頻繁渲染。
• 當設備性能較好時，延遲幾乎無感知；當設備性能較差時，列表會在用戶停止輸入后更新。

---

2. useTransition：延遲路由切換

	import { useState, useTransition } from 'react';import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';function PageA() {return <div>Page A Content</div>;} function PageB() {return <div>Page B Content</div>;}function App() {const [currentPage, setCurrentPage] = useState('A');const [isPending, startTransition] = useTransition();const handleNavigation = (page) => {startTransition(() => {setCurrentPage(page);});};return (<Router><div><nav><Link to="/page-a" onClick={() => handleNavigation('A')}>Page A</Link><Link to="/page-b" onClick={() => handleNavigation('B')}>Page B</Link></nav>{isPending && <p>Loading...</p>}<Routes><Route path="/page-a" element={<PageA />} /><Route path="/page-b" element={<PageB />} /></Routes></div></Router>);}export default App;

關鍵點：

• 路由切換通過startTransition包裹，標記為低優先級任務。
• isPending狀態顯示加載提示，避免用戶感到卡頓。
• 高優先級任務（如用戶輸入）會優先執行，低優先級任務（如路由切換）會被延遲。

---

三、應用場景總結

場景	推薦Hook	原因
高頻更新的輸入框	useDeferredValue	延遲搜索結果更新，保持輸入流暢性，避免頻繁渲染。
實時搜索與過濾	useDeferredValue	延遲更新搜索結果列表，避免頻繁渲染導致卡頓，提升用戶體驗。
復雜數據渲染	useDeferredValue	延遲渲染大數據量列表或復雜組件樹，避免頻繁更新導致卡頓。
路由切換	useTransition	預加載下一頁數據時保持當前頁響應，避免用戶感到卡頓。
復雜計算任務	useTransition	延遲處理復雜計算任務，優先處理用戶交互，提升UI響應性。
非緊急狀態更新	useTransition	延遲更新非緊急狀態（如分頁加載），避免阻塞關鍵任務。

---

四、注意事項

1. 避免濫用：

   • 僅對用戶可感知的非緊急更新使用（如搜索建議、后臺數據加載）。
   • 避免對即時反饋的操作（如按鈕點擊、表單提交）使用，否則會延遲必要反饋，破壞用戶體驗。

2. 狀態管理：

   • 在startTransition中同時更新多個狀態時，React可能無法正確批處理。建議將多個狀態包裹在一個對象中處理，或使用useReducer管理復雜狀態。

3. 副作用處理：

   • 不要在startTransition中執行網絡請求、定時器等副作用。副作用應在useEffect或事件處理函數中執行。

4. 與Suspense集成：

   • 若在startTransition中觸發了Suspense回退（如懶加載組件），過渡期間會顯示fallback UI。可以通過isPending狀態自定義加載提示，避免重復加載效果沖突。

5. 性能優化：

   • 精準定位性能瓶頸，優先優化渲染邏輯，再考慮延遲更新。
   • 延遲值盡量為原始類型或穩定對象，避免不必要的后臺渲染。

---

五、原理剖析

1. 核心機制對比

• useDeferredValue

  • 作用：延遲單個值的更新，將其標記為低優先級。
  • 原理：React 會優先使用舊值渲染，在后臺渲染新值。當高優先級任務（如用戶輸入）完成時，再更新為新值。
  • 底層：基于并發渲染的優先級調度，動態調整延遲。

• useTransition

  • 作用：延遲一段邏輯的執行，將其標記為低優先級。
  • 原理：通過 startTransition 包裹的邏輯會被標記為低優先級，React 會優先處理高優先級任務（如用戶輸入），延遲處理低優先級任務。
  • 底層：基于并發渲染的優先級調度，允許中斷低優先級任務。

2. 關鍵差異

• 觸發方式

  • useDeferredValue：延遲單個值的更新，返回延遲后的值。
  • useTransition：通過 startTransition 包裹邏輯，返回 [isPending, startTransition] 數組。

• 適用場景

  • useDeferredValue：適用于高頻更新的輸入框、實時搜索、滾動列表等。
  • useTransition：適用于路由切換、復雜計算、非緊急狀態更新（如分頁加載）。

• 性能影響

  • useDeferredValue：減少頻繁渲染對主線程的阻塞，提升輸入流暢性。
  • useTransition：避免關鍵任務被阻塞，保持 UI 響應性。

3. 代碼實現原理

• useDeferredValue

  • React 在更新時，會首先嘗試使用舊值重新渲染，然后在后臺嘗試使用新值進行另一次渲染。
  • 如果組件未使用 React.memo，優化可能無效，因為子組件會頻繁重新渲染。

• useTransition

  • startTransition 包裹的邏輯會被標記為低優先級，React 會優先處理高優先級任務。
  • isPending 狀態表示是否有待處理的低優先級任務。

總結

useDeferredValue和useTransition是React并發模式下優化渲染性能的重要工具。useDeferredValue適用于延遲單個值的更新，而useTransition適用于延遲一段邏輯的執行。通過合理使用這兩個Hook，可以顯著提升用戶體驗，特別是在處理高頻更新或復雜渲染任務時。然而，開發者必須小心處理并發渲染帶來的復雜性，確保應用的穩定性和可預測性。