浅谈React useTransition并发特性
更新时间：2026年05月13日 08:16:11 作者：兆子龙
本文主要介绍了React的useTransition Hook,它可以帮助开发者将某些状态更新标记为“非紧急”,从而优化用户体验,并提供了注意事项和性能优化建议,感兴趣的可以了解一下
一、为什么需要 useTransition
在 React 中，所有状态更新默认都是紧急的，会立即阻塞 UI。
function SearchPage() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
const handleChange = (e) => {
const value = e.target.value;
setQuery(value); // 紧急更新
// 耗时的过滤操作
const filtered = hugeList.filter(item =>
item.name.includes(value)
);
setResults(filtered); // 也是紧急更新，会卡顿
};
return (
<>
<input value={query} onChange={handleChange} />
<Results data={results} />
</>
);
}问题：输入时会卡顿，因为每次输入都要等待过滤完成。
二、useTransition 的解决方案
useTransition 可以将某些更新标记为"非紧急"，让 React 优先处理用户交互。
import { useState, useTransition } from 'react';
function SearchPage() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
const [isPending, startTransition] = useTransition();
const handleChange = (e) => {
const value = e.target.value;
setQuery(value); // 紧急更新，立即响应
startTransition(() => {
// 非紧急更新，可以被打断
const filtered = hugeList.filter(item =>
item.name.includes(value)
);
setResults(filtered);
});
};
return (
<>
<input value={query} onChange={handleChange} />
{isPending && <Spinner />}
<Results data={results} />
</>
);
}
效果：输入流畅，过滤操作在后台进行。
三、核心概念
返回值
const [isPending, startTransition] = useTransition();
isPending: 是否有待处理的 transitionstartTransition: 将更新标记为 transition
紧急 vs 非紧急更新
// 紧急更新：立即执行，不可打断
setQuery(value);
// 非紧急更新：可以被打断，延迟执行
startTransition(() => {
setResults(filtered);
});
四、实战场景
场景 1：搜索过滤
function ProductList() {
const [searchTerm, setSearchTerm] = useState('');
const [filteredProducts, setFilteredProducts] = useState(products);
const [isPending, startTransition] = useTransition();
const handleSearch = (value) => {
setSearchTerm(value);
startTransition(() => {
const filtered = products.filter(p =>
p.name.toLowerCase().includes(value.toLowerCase())
);
setFilteredProducts(filtered);
});
};
return (
<>
<input
value={searchTerm}
onChange={e => handleSearch(e.target.value)}
placeholder="搜索商品..."
/>
{isPending && <div className="loading">搜索中...</div>}
<div className="products">
{filteredProducts.map(p => (
<ProductCard key={p.id} {...p} />
))}
</div>
</>
);
}
场景 2：Tab 切换
function TabContainer() {
const [tab, setTab] = useState('home');
const [isPending, startTransition] = useTransition();
const handleTabChange = (newTab) => {
startTransition(() => {
setTab(newTab); // 切换 tab 是非紧急的
});
};
return (
<>
<div className="tabs">
<button
onClick={() => handleTabChange('home')}
className={tab === 'home' ? 'active' : ''}
>
首页
</button>
<button
onClick={() => handleTabChange('profile')}
className={tab === 'profile' ? 'active' : ''}
>
个人中心
</button>
</div>
{isPending && <LoadingBar />}
<div className="tab-content">
{tab === 'home' && <HomePage />}
{tab === 'profile' && <ProfilePage />}
</div>
</>
);
}
场景 3：路由切换
function App() {
const [page, setPage] = useState('home');
const [isPending, startTransition] = useTransition();
const navigate = (newPage) => {
startTransition(() => {
setPage(newPage);
});
};
return (
<>
<nav>
<button onClick={() => navigate('home')}>首页</button>
<button onClick={() => navigate('about')}>关于</button>
<button onClick={() => navigate('contact')}>联系</button>
</nav>
{isPending && <TopLoadingBar />}
<main>
{page === 'home' && <Home />}
{page === 'about' && <About />}
{page === 'contact' && <Contact />}
</main>
</>
);
}
五、与 useDeferredValue 对比
// useTransition：主动标记更新
const [isPending, startTransition] = useTransition();
startTransition(() => {
setValue(newValue);
});
// useDeferredValue：被动延迟值
const deferredValue = useDeferredValue(value);
| 特性 | useTransition | useDeferredValue |
|---|---|---|
| 使用方式 | 包裹更新函数 | 包裹值 |
| 控制权 | 主动控制 | 被动延迟 |
| isPending | 有 | 无 |
| 适用场景 | 控制更新时机 | 延迟渲染 |
六、注意事项
1. 只能在 transition 中更新 state
// ✅ 正确
startTransition(() => {
setState(newValue);
});
// ❌ 错误：不能包含异步操作
startTransition(async () => {
const data = await fetchData();
setState(data);
});
2. 异步操作需要特殊处理
const handleClick = async () => {
const data = await fetchData();
startTransition(() => {
setState(data); // 只有 setState 在 transition 中
});
};
3. 不要过度使用
// ❌ 不需要：简单的状态更新
startTransition(() => {
setCount(count + 1);
});
// ✅ 需要：耗时的计算或渲染
startTransition(() => {
setResults(expensiveFilter(data));
});
七、性能优化
配合 memo 使用
const ExpensiveList = memo(({ items }) => {
return items.map(item => <ExpensiveItem key={item.id} {...item} />);
});
function App() {
const [query, setQuery] = useState('');
const [items, setItems] = useState(allItems);
const [isPending, startTransition] = useTransition();
const handleSearch = (value) => {
setQuery(value);
startTransition(() => {
setItems(allItems.filter(i => i.name.includes(value)));
});
};
return (
<>
<input value={query} onChange={e => handleSearch(e.target.value)} />
{isPending && <Spinner />}
<ExpensiveList items={items} />
</>
);
}
八、与 Suspense 配合
function App() {
const [tab, setTab] = useState('home');
const [isPending, startTransition] = useTransition();
return (
<>
<Tabs value={tab} onChange={(t) => {
startTransition(() => setTab(t));
}} />
<Suspense fallback={<Skeleton />}>
{isPending && <InlineSpinner />}
{tab === 'home' && <Home />}
{tab === 'posts' && <Posts />}
</Suspense>
</>
);
}
到此这篇关于浅谈React useTransition并发特性的文章就介绍到这了,更多相关React useTransition并发内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
React Context是React提供给开发者的一种常用的状态管理机制，本文主要来和大家讲讲为什么需要Context，又是如何使用Context的，感兴趣的可以了解一下2023-05-05
本文主要介绍了React如何通过useContext特性实现组件数据传递，文中有相关的代码示例供大家参考，对我们学习React有一定的帮助,需要的朋友可以参考下2023-06-06
本文主要介绍了React Vite中动态批量导入路由的和实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-10-10
react koa rematch 如何打造一套服务端渲染架子
这篇文章主要介绍了react koa rematch 如何打造一套服务端渲染架子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
在当今移动应用开发的浪潮中,React Native以其跨平台、高效开发的特点脱颖而出,成为众多开发者首选的框架之一,这篇文章主要介绍了React Native实际项目中的经验和踩坑记录的相关资料,需要的朋友可以参考下2026-03-03
本篇文章主要介绍了手动用webpack搭第一个 ReactApp的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
useEffect()是react中的hook函数,作用是用于创建由渲染本身引起的操作,介绍了依赖项数组不同的区别,对react useEffect()使用相关知识感兴趣的朋友一起看看吧2024-05-05
在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks（版本：>=16.8），使开发者在非class的情况下使用更多react特性2023-03-03
本篇文章主要介绍了react开发教程之React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
react app rewrited替代品craco使用示例
这篇文章主要为大家介绍了react app rewrited替代品craco使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论