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

news/2024/6/20 19:01:27/文章来源:https://blog.csdn.net/qq1123642601/article/details/137173406

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

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

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

<Suspense fallback={<Loading />}>// ...省略
</Suspense>

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

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

startTransition(() => {// 路由跳转
})

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

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

参考:React 中文文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1034212.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Maven依赖管理项目构建工具

一、Maven简介 1、为什么学习Maven 1.1、Maven是一个依赖管理工具 ①jar 包的规模 随着我们使用越来越多的框架&#xff0c;或者框架封装程度越来越高&#xff0c;项目中使用的jar包也越来越多。项目中&#xff0c;一个模块里面用到上百个jar包是非常正常的。 比如下面的例…

X射线源电流电压的实际影响

在进行实际实验的时候&#xff0c;感觉X射线电流电压好像对于成像质量的影响差不多&#xff0c;分不清楚了&#xff0c;这里记录一下&#xff0c;还没探索到原因。 80kv 500uA 功率&#xff1a;40W 90kv 300uA 功率&#xff1a;27W 90kev 600uA 110v 300uA

CSS面试题---基础

1、css选择器及优先级 选择器优先级&#xff1a;内联样式>id选择器>类选择器、属性选择器、伪类选择器>标签选择器、微元素选择器 注意&#xff1a; !important优先级最高&#xff1b; 如果优先级相同&#xff0c;则最后出现的样式生效&#xff1b; 继承得到的样式优先…

Modbus转Profinet网关解决主从设备间通信数据丢失难题

在接到现场关于Modbus转Profinet网关&#xff08;XD-MDPN100&#xff09;配置时出现信不稳定或数据丢失的问题的反馈后。对于现场反馈的Modbus转Profinet网关配置问题&#xff0c;特出专项答疑。 解决Modbus转Profinet网关&#xff08;XD-MDPN100&#xff09;通信不稳定或数据丢…

VuePress基于 Vite 和 Vue 构建优秀框架

VitePress 是一个静态站点生成器 (SSG)&#xff0c;专为构建快速、以内容为中心的站点而设计。简而言之&#xff0c;VitePress 获取用 Markdown 编写的内容&#xff0c;对其应用主题&#xff0c;并生成可以轻松部署到任何地方的静态 HTML 页面。 VitePress 附带一个用于技术文档…

工控自动化行业 工业数据采集软件 让数据驱动决策

在当今的工控自动化行业&#xff0c;数据已经成为了企业决策的关键驱动力。而工业数据采集软件的出现&#xff0c;更是为企业带来了新的机遇。 工业数据采集软件平台能够高效地采集各种工业设备的数据&#xff0c;无论是传感器、仪器仪表还是生产线上的关键参数等&#xff0c;都…

乐维更改IP地址

1.1 系统IP调整 vim /etc/sysconfig/network-scripts/ifcfg-ens1921.2 Web相关服务IP变更 1.2.1 编辑/itops/nginx/html/lwjkapp/.env文件,更改ZABBIXSERVER、ZABBIXRPCURL、DB_HOST中的IP 1.2.2 进入/itops/nginx/html/lwjk_app/目录下,执行php bin/manager process-conso…

Golang 内存管理和垃圾回收底层原理(二)

一、这篇文章我们来聊聊Golang内存管理和垃圾回收&#xff0c;主要注重基本底层原理讲解&#xff0c;进一步实战待后续文章 垃圾回收&#xff0c;无论是Java 还是 Golang&#xff0c;基本的逻辑都是基于 标记-清理 的&#xff0c; 标记是指标记可能需要回收的对象&#xff0c…

Chrome浏览器 安装Vue插件vue-devtools

前言 vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同&#xff0c;Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。 1. 功能介绍 组件树浏览&#xff1a;这个功能可以让你查…

网心云邀请码:KpyV3Dk7

网心云长期有效邀请码&#xff1a;KpyV3Dk7 新用户注册福利码&#xff1a;KpyV3Dk7 通过福利码注册并登录您可获得&#xff1a;①可得1元收益②1张14天50%加成卡③绑定设备可得1~5元不等 新手解答&#xff1a; 1. 有哪些设备可以安装&#xff1f;闲置电脑、闲置手机、闲置平…

hyper-v安装 windows10虚拟机后,登录一直是锁屏界面,无法开启增强会话

按键盘等&#xff0c;一直在锁屏界面&#xff0c;进不去&#xff0c;需要点击 上述图片按钮&#xff0c;切到 “基本会话”&#xff0c; 这样可以登录了&#xff1b; 切换到 ‘基本会话’ &#xff0c;登陆后&#xff0c; 打开 设置--登录选项--要求 Microsoft 账户使用Windo…

elementUI this.$msgbox msgBox自定义 样式自定义 富文本

看这个效果是不是很炫?突出重点提示内容,对于用户交互相当的棒! 下来说说具体实现: let self = this const h = self.$createElement; this.$msgbox({title: null,message: h("p", {style: "margin-top:10px"}, [h("i", {class: "el-i…

c++|string模拟实现

目录 一、string.h 二、string.cpp 三、Test.cpp 对string的各种接口进行一个简易版的模拟实现&#xff0c;在模拟实现完之后对string的底层实现有了进一步的理解&#xff0c;了解大佬的编程写法思路。也算是对string有了一个小总结。 一、string.h 接口的声明。放在.h文件中…

用vscode仿制小米官网

html内容: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><link rel&quo…

奥比中光深度相机(二):PyQt5实现打开深度摄像头功能

文章目录 奥比中光深度相机&#xff08;二&#xff09;&#xff1a;PyQt5实现打开深度摄像头功能官方给出的调用深度相机源码环境精炼 UI界面设计逻辑代码构建槽函数连接提取视频流在界面中显示深度视频流注意关闭相机 总体代码效果演示运行main.py代码选择相机打开摄像头关闭摄…

NSSCTF Round#20 Basic 真亦假,假亦真 CSDN_To_PDF V1.2 出题笔记 (附wp+源码)

真亦假&#xff0c;假亦真 简介&#xff1a;java伪造php一句话马。实则信息泄露一扫就出&#xff0c;flag在/flag里面。 题目描述&#xff1a;开开心心签个到吧&#xff0c;祝各位师傅们好运~ 静态flag&#xff1a;NSS{Checkin_h4v3_4_g00D_tINNe!} /路由显示 <?php e…

6、Cocos Creator 2D 渲染组件:​Sprite 组件​

Sprite 组件 Sprite&#xff08;精灵&#xff09;是 2D/3D 游戏最常见的显示图像的方式&#xff0c;在节点上添加 Sprite 组件&#xff0c;就可以在场景中显示项目资源中的图片。 属性功能说明Type渲染模式&#xff0c;包括普通&#xff08;Simple&#xff09;、九宫格&#x…

源支付V7开源版2.99,修复各种提示错误

源支付V7开源版2.99&#xff0c;修复各种提示错误 加密说明&#xff1a;200拿来的&#xff0c;只有8.1这个文件加密&#xff0c;其他文件无任何加密&#xff0c;已修复各种提示错误 测试其他开源版安装提示错误&#xff0c;有几个文件是加密的 注&#xff1a;开发不易&#…

枚举---算法

1、定义 枚举算法&#xff1a;也称之为穷举算法&#xff0c;这种算法就是在解决问题的时候去使用所有的方式去解决这个问题&#xff0c;会通过推理去考虑事件发生的每一种可能&#xff0c;最后推导出结果。优点&#xff1a;简单粗暴&#xff0c;它暴力的枚举所有可能&#xff…

Linux 动静态库的制作,使用和加载

Linux 动静态库的制作,使用和加载 一.前置说明1.mylib.h2.mylib.c3.mymath.h mymath.c4.如何制作库 二.动静态库的制作1.静态库的制作1.制作2.使用一下静态库,验证是否成功打包 2.动态库的制作1.编译.c源文件文件生成.o目标文件2.打包生成动态库3.编写makefile文件,自动化制作动…