React 18 并发模式实战：useTransition 与 useDeferredValue

# React 18 并发模式实战 ## 核心概念 React 18 引入了并发渲染机制，允许 React 中断低优先级的渲染任务，优先处理用户交互。 ## useTransition：标记低优先级更新 ```jsx import { useState, useTransition } from 'react'; function SearchPage() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const [isPending, startTransition] = useTransition(); function handleChange(e) { // 输入框更新是高优先级 setQuery(e.target.value); // 搜索结果更新是低优先级 startTransition(() => { const filtered = heavyFilter(e.target.value); setResults(filtered); }); } return ( {isPending && 加载中...} ); } ``` ## useDeferredValue：延迟值更新 ```jsx import { useState, useDeferredValue, memo } from 'react'; function ProductList() { const [filter, setFilter] = useState(''); const deferredFilter = useDeferredValue(filter); return ( setFilter(e.target.value)} placeholder="搜索产品..." /> ); } const SlowList = memo(function SlowList({ filter }) { const items = generateProducts(10000).filter( (p) => p.name.includes(filter) ); return ( {items.map((item) => ( {item.name} ))} ); }); ``` ## useTransition vs useDeferredValue | 特性 | useTransition | useDeferredValue | |------|--------------|-----------------| | 控制粒度 | 状态更新函数 | 值 | | 使用场景 | 能访问 setState 时 | 只有 props/value 时 | | isPending | 有 | 无 | ## 最佳实践 1. 耗时渲染（长列表、复杂图表）用 `startTransition` 包裹 2. 组件接收上层 props 时用 `useDeferredValue` 3. 配合 `memo` 使用才能真正跳过渲染