React 18 之 useTransition
useTransition
先看看 useTransition
想象这样的场景,页面有个 input,用户输入后会去请求 API 获取数据。如果没有额外做一些优化会发生这样的情况,
- 多个搜索调用被执行,造成浪费。
- 如果用户输入的太快太多,页面可能会出现卡死。
为了解决这一问题,在单线程上运行的 React 必须对这些事件和功能进行组合、重新排序和优先处理,以便给用户更友好的体验。
React 18 提供了一个新API:useTransition。"组合"使用这些API,我们将可以从一个全新的维度去优化用户体验——网速快性能高的设备的页面渲染将更快,网速慢性能差的设备的页面体验将更好。
import { useTransition } from'react';
const [isPending, startTransition] = useTransition();
const callback = () => {
setInputValue(input);
startTransition(() => {
setSearchQuery(input);
});
}
{isPending && <Spinner />
看起来有点像给搜索加了个 debounce。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库