wehub-skill-sync
60 lines
1.8 KiB
Markdown
60 lines
1.8 KiB
Markdown
---
|
|
title: 使用 useDeferredValue 处理昂贵的派生渲染
|
|
impact: MEDIUM
|
|
impactDescription: 在繁重计算期间保持输入响应
|
|
tags: rerender, useDeferredValue, optimization, concurrent
|
|
---
|
|
|
|
## 使用 useDeferredValue 处理昂贵的派生渲染
|
|
|
|
当用户输入触发昂贵的计算或渲染时，使用 `useDeferredValue` 来保持输入响应。被延后的值会滞后，让 React 优先处理输入更新，并在空闲时再渲染昂贵的结果。
|
|
|
|
**错误做法（过滤时输入感觉卡顿）：**
|
|
|
|
```tsx
|
|
function Search({ items }: { items: Item[] }) {
|
|
const [query, setQuery] = useState('')
|
|
const filtered = items.filter(item => fuzzyMatch(item, query))
|
|
|
|
return (
|
|
<>
|
|
<input value={query} onChange={e => setQuery(e.target.value)} />
|
|
<ResultsList results={filtered} />
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
**正确做法（输入保持流畅，结果就绪后渲染）：**
|
|
|
|
```tsx
|
|
function Search({ items }: { items: Item[] }) {
|
|
const [query, setQuery] = useState('')
|
|
const deferredQuery = useDeferredValue(query)
|
|
const filtered = useMemo(
|
|
() => items.filter(item => fuzzyMatch(item, deferredQuery)),
|
|
[items, deferredQuery]
|
|
)
|
|
const isStale = query !== deferredQuery
|
|
|
|
return (
|
|
<>
|
|
<input value={query} onChange={e => setQuery(e.target.value)} />
|
|
<div style={{ opacity: isStale ? 0.7 : 1 }}>
|
|
<ResultsList results={filtered} />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
**适用场景：**
|
|
|
|
- 过滤/搜索大型列表
|
|
- 响应输入变化的昂贵可视化（图表、图形）
|
|
- 任何会导致明显渲染延迟的派生状态
|
|
|
|
**注意：** 将昂贵的计算用 `useMemo` 包裹，并把被延后的值作为依赖项，否则它仍然会在每次渲染时执行。
|
|
|
|
参考文档：[React useDeferredValue](https://react.dev/reference/react/useDeferredValue)
|