我給你用最簡單、最直白、面試必過、一看就懂的方式，徹底講透 React 的 useDeferredValue + useTransition！

一句話核心結(jié)論

這兩個(gè) React 18 新 Hook，專門解決：
大量數(shù)據(jù)渲染、復(fù)雜計(jì)算 → 導(dǎo)致頁面卡頓、輸入框延遲 的問題！

它們的作用：
讓高優(yōu)先級操作（輸入、點(diǎn)擊）不卡頓，低優(yōu)先級操作（大數(shù)據(jù)渲染、復(fù)雜計(jì)算）延后執(zhí)行。

先看場景（你一定遇到過）

const [text, setText] = useState('')
const list = filterBigList(text) // 超級耗性能，2萬條數(shù)據(jù)

return (
  <>
    <input value={text} onChange={(e) => setText(e.target.value)} />
    <div>{list.map(item => <div>{item}</div>)}</div>
  </>
)

問題：
輸入框打字 → 觸發(fā)大數(shù)據(jù)過濾 → 頁面卡死、延遲、掉幀

原因：
輸入和渲染是同步高優(yōu)先級，一起執(zhí)行，UI 被阻塞。

一、useTransition（最常用）

作用

把 非緊急、耗性能的更新 標(biāo)記為 低優(yōu)先級更新
高優(yōu)先級（輸入）可以插隊(duì)，頁面永遠(yuǎn)不卡！

核心 API

const [isPending, startTransition] = useTransition()

• isPending：低優(yōu)先級任務(wù)是否在等待（可展示 loading）
• startTransition：把里面的更新降級為低優(yōu)先級

代碼演示（立刻不卡）

const [text, setText] = useState('')
const [list, setList] = useState([])

const [isPending, startTransition] = useTransition()

const onChange = (e) => {
  // 1. 高優(yōu)先級：立即更新輸入框
  setText(e.target.value)

  // 2. 低優(yōu)先級：延遲執(zhí)行大數(shù)據(jù)渲染
  startTransition(() => {
    setList(filterBigList(e.target.value))
  })
}

效果

輸入框永遠(yuǎn)流暢！
大數(shù)據(jù)列表延遲一點(diǎn)點(diǎn)，完全不影響體驗(yàn)

二、useDeferredValue

作用

延遲一個(gè)值，等主線程空閑了，再更新這個(gè)值
適合：值來自父組件、無法用 startTransition 包裹

核心 API

const deferredValue = useDeferredValue(value)

代碼演示

const [text, setText] = useState('')

// 讓 text 延遲更新
const deferredText = useDeferredValue(text)

// 只有 deferredText 變了才執(zhí)行耗性能操作
const list = useMemo(() => {
  return filterBigList(deferredText)
}, [deferredText])

效果

和 useTransition 一模一樣！
輸入流暢，大數(shù)據(jù)延遲渲染

三、兩者區(qū)別（超級好記）

一句話區(qū)分：

• 控制更新函數(shù) → useTransition
• 控制一個(gè)值 → useDeferredValue

四、底層原理（面試必問）

React 18 并發(fā)渲染 能力：

1. 把更新分為 高優(yōu)先級 / 低優(yōu)先級
2. 高優(yōu)先級（輸入、點(diǎn)擊）可中斷低優(yōu)先級
3. 低優(yōu)先級渲染會被暫停、插隊(duì)、恢復(fù)
4. 保證 UI 永遠(yuǎn)流暢

五、超級總結(jié)（背這個(gè)就夠）

useTransition

• 標(biāo)記低優(yōu)先級更新
• 不阻塞輸入、點(diǎn)擊
• 用法：startTransition(() => { 耗性能更新 })

useDeferredValue

• 延遲一個(gè)值
• 等空閑再更新
• 用法：const deferredVal = useDeferredValue(val)

共同目的

讓耗性能的頁面，不卡頓、不掉幀、保持流暢！

終極一句話

高優(yōu)先級先走，低優(yōu)先級等空閑 → 這就是 useTransition / useDeferredValue！

到此這篇關(guān)于react useDeferredvalue和useTransition的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react useDeferredvalue和useTransition內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論