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

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

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

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

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

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

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

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

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

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

参考:React 中文文档

相关推荐
sen_shan18 分钟前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君42 分钟前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
ElasticPDF-新国产PDF编辑器1 小时前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
吃没吃1 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam1 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2761 小时前
Android Retrofit用法详解
前端
鸭梨大大大1 小时前
Spring Web MVC入门
前端·spring·mvc
你的人类朋友1 小时前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js
吃没吃1 小时前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH2761 小时前
Android Room用法详解
前端