处理关于 React lazy 白屏的两种方案

这篇文章是今天在阅读 React 官方文档的时候看到的一个关于 处理 lazy 体验问题的小技巧,在这里记录一下

当我们使用 React.lazy 去懒加载一个路由组件,在不做任何其他处理的情况下从其他页面首次进入到这个懒加载的路由页面时,肯定会出现白屏的现象。

以前针对这种问题的处理方案无非就是使用Suspense 进行组件包裹,然后在其 fallback 属性上传入一个 Loading 组件。

javascript 复制代码
<Suspense fallback={<Loading />}>
	// ...省略
</Suspense>

但是这种方案,在跳转的时候会出现的 Loading 的效果,如果 Loading 处理的不好的话那么体验其实很差。比如你从一个页面在进入懒加载页面之前,突然从当前页面直接进入一个只有 Loading的页面,再出现懒加载的页面。

React 官方针对这种问题是使用 startTransition 来降低路由跳转的任务优先级。

javascript 复制代码
startTransition(() => {
	// 路由跳转
})

这么做的好处就是,当你触发了路由跳转的事件之后,由于路由跳转的优先级被降低了,所以会继续在当前页面等待懒加载资源的加载,然后才触发页面跳转。

当然这么做也有坏处,就是点击了之后可能会由于资源加载时间较长被用户误认为是服务出问题了,这个就看各自的取舍了,毕竟老板和产品的意图不是我们能决定的。

参考:React 中文文档

相关推荐
同志3271321 分钟前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟22 分钟前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境22 分钟前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
CJWbiu25 分钟前
Github Action + docker 实现自动化部署
前端·自动化运维
关山26 分钟前
在TS中如何在子进程中动态实例化一个类
前端
吃瓜群众i27 分钟前
兼容IE8浏览器的8个实用知识点
前端·javascript
前端烨30 分钟前
vue3子传父——v-model辅助值传递
前端·vue3·组件传值
猫头虎1 小时前
如何解决IDE项目启动报错 error:0308010C:digital envelope routines::unsupported 问题
javascript·ide·vue.js·typescript·node.js·编辑器·vim
Mintopia1 小时前
Three.js 在数字孪生中的应用场景教学
前端·javascript·three.js
da-peng-song1 小时前
ArcGIS arcpy代码工具——根据属性结构表创建shape图层
javascript·python·arcgis