【React】React的懒加载组件lazy和Suspense

在一个多路由项目中,页面加载时,所有的路由组件都会被加载
如果我们有很多个路由组件,但是用户只点击了几个,这就会有很大的消耗,因此我们需要做懒加载处理,我们点击哪个时,才去加载哪一个
而React当然想到了这一点,给我们提供了LazyLoad。

用法

首先我们需要从 react 库中暴露一个 lazy 函数

import React, { Component ,lazy} from 'react';

然后我们需要更改引入组件的方式,作为懒加载组件引入

const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))

路由组件加载需要时间,此时页面会白屏,需要指定一个loading组件作为新组件还没加载出来时的过渡,用Suspense包裹所有路由组件,在Suspense的fallback属性放入loading组件作为过渡

<Suspense fallback={<loading/>}><Route path="/home" component={Home}></Route><Route path="/about" component={About}></Route>
</Suspense>

注意: loading 必须提前引入,不能懒加载,否则就会陷入死循环
例:import Loading from ‘./Loading’

完整代码

import React, { Component,lazy,Suspense} from 'react'
import {NavLink,Route} from 'react-router-dom'// import Home from './Home'
// import About from './About'import Loading from './Loading'
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))export default class Demo extends Component {render() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 在React中靠路由链接实现切换组件--编写路由链接 */}<NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body"><Suspense fallback={<Loading/>}>{/* 注册路由 */}<Route path="/about" component={About}/><Route path="/home" component={Home}/></Suspense></div></div></div></div></div>)}
}

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

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

相关文章

2.数据类型与变量(java篇)

目录 数据类型与变量 数据类型 变量 整型变量 长整型变量 短整型变量 字节型变量 浮点型变量 双精度浮点型 单精度浮点型 字符型变量 布尔型变量&#xff08;boolean&#xff09; 类型转换 自动类型转换(隐式) 强制类型转换(显式) 类型提升 字符串类型 数据类…

go使用nacos作为配置中心时遇到的一个错误

docker安装nacos如下&#xff08;有坑&#xff09;&#xff1a; 一文教你使用 Docker 启动并安装 Nacos-阿里云开发者社区 报错如下&#xff1a; read config from both server and cache fail, errread cache file Config Encrypted Data Key failed. cause file doesnt ex…

百亿补贴为什么用 H5?H5 未来会如何发展?

百亿补贴为什么用 H5&#xff1f;H5 未来会如何发展&#xff1f; 本人有一些分析预测。当然&#xff0c;这些分析预测只是个人观点&#xff0c;如果你有不同的意见&#xff0c;欢迎在评论区讨论交流。 百亿补贴为什么用 H5 我们先看两张图&#xff0c;在 Android 手机开发者…

java设计模式 建造者设计模式

建造者模式&#xff08;Builder Pattern&#xff09;是一种设计模式&#xff0c;用于将复杂对象的构建与其表示分离&#xff0c;以便同样的构建过程可以创建不同的表示。以下是建造者模式的一个案例分析&#xff0c;以及在Java中的实现。 ### 案例分析 假设我们要设计一个用于…

单元测试与集成测试:软件质量的双重保障

目录 概述 单元测试 集成测试 单元测试的方法 白盒测试 黑盒测试 白盒测试的方法和用例设计 代码审查 集成测试 单元测试工具 结语 在软件开发中&#xff0c;测试是一个不可或缺的环节&#xff0c;它能够帮助我们发现和修复缺陷&#xff0c;确保软件的质量和可靠性。…

基于UDP的网络客户端和服务端模型IO函数

服务器端 udp_server.c #include <stdio.h> // 引入标准输入输出库 #include <sys/types.h> // 引入基本系统数据类型 #include <sys/socket.h> // 引入socket编程相关的库 #include <netinet/in.h> // 引入网络…

2024年3月 青少年等级考试机器人理论真题二级

202403 青少年等级考试机器人理论真题二级 第 1 题 一个机器小车&#xff0c;用左右两个电机分别控制左右车轮&#xff0c;左侧电机转速是100rpm&#xff0c;右侧电机转速是50rpm&#xff0c;则此机器小车&#xff1f;&#xff08; &#xff09; A&#xff1a;原地右转 B&am…

华企盾DSC数据防泄密软件有哪些水印功能?

在企业数据安全领域&#xff0c;水印技术是一种重要的信息保护策略&#xff0c;用于防止数据泄露和确保信息的原始性和完整性。根据回顾的资料&#xff0c;以下是企业中常用的几种水印技术&#xff1a; 屏幕浮水印&#xff1a;这种水印能够在用户的屏幕上显示公司的标志或者其他…

Golang SDK安装

windows环境安装 1.链接: 下载地址 2.安装SDK 检查环境变量&#xff1a; 3.开启go modules,命令行执行一下命令&#xff1a; go env -w GO111MODULEon4.设置国内代理&#xff0c;命令行执行一下命令&#xff1a; go env -w GOPROXYhttps://proxy.golang.com.cn,https:/…

C#之partial关键字

在C#中&#xff0c;partial关键字用于声明一个类、结构体、接口或方法的分部定义。这意味着可以将一个类或其他类型的定义分成多个部分&#xff0c;这些部分可以在同一个命名空间或程序集中的多个源文件中进行定义。当编译器编译这些部分时&#xff0c;会将它们合并成一个单独的…

打印机 ansible配置dhcp和打印机

部署dhcp服务器 主机发送Discover报文 目标为广播地址 同一网段的dhcp收到报文后&#xff0c;dhcp响应一个offer报文 offer报文&#xff1a;dhcp自己的ip地址。和客户端ip以及使用周期&#xff0c;和客户端ip网络参数 最后主机单独发一个request报文 给那个选择的dhcp服务器 &…

JUC下的ThreadLocalRandom详解

ThreadLocalRandom 是Java并发包&#xff08;java.util.concurrent&#xff09;中提供的一个随机数生成器类&#xff0c;它是从Java 7开始引入的。相较于传统的Math.random()或Random类&#xff0c;ThreadLocalRandom更适用于多线程环境&#xff0c;因为它为每个线程维护了一个…

福建医疗器械展/2024厦门国际医疗器械展览会重磅来袭

2024中国&#xff08;厦门&#xff09;国际医疗器械展览会 时 间&#xff1a;2024年11月1-3日 November 1-3, 2024 地 点&#xff1a;厦门国际会展中心 Xiamen International Conference & Exhibition Center ​ ◆组织机构 主办单位&#xff1a; 中国技术市场协会医…

Blazor入门-调用js+例子

参考&#xff1a; Blazor入门笔记&#xff08;3&#xff09;-C#与JS交互 - 半野 - 博客园 https://www.cnblogs.com/zxyao/p/12638233.html Blazor项目如何调用js文件_blazor加载js-CSDN博客 https://blog.csdn.net/bdbox/article/details/135438411 本地环境&#xff1a;win1…

六西格玛绿带培训:企业变革的催化剂,个人成长的助推器!

六西格玛绿带培训不仅是一套系统的管理方法&#xff0c;更是一种追求卓越、持续改进的文化和思维方式。它强调以数据为基础&#xff0c;通过科学的分析和决策&#xff0c;实现质量的飞跃和成本的优化。对于企业来说&#xff0c;六西格玛绿带培训能够帮助企业建立可靠的质量管理…

Spring STOMP-消息代理

简单的消息代理 内置的简单消息代理会处理来自客户端的订阅请求&#xff0c;将请求消息存储在内存中&#xff0c;并广播消息给匹配destination的连接客户端。代理支持路径式destination&#xff0c;包括订阅Ant风格的destinations模式。 应用程序也可以使用点分隔&#xff08;…

【车辆安全管理】风险预测

近期又发生了很多车辆事故&#xff0c; https://news.sina.com.cn/s/2024-05-13/doc-inavapur2236074.shtml 其实都是可以避免的&#xff0c;如果车辆有很好的自动减速系统&#xff0c;如特斯拉的FSD系统&#xff0c; 特斯拉的FSD&#xff08;Full-Self Driving&#xff09;…

11、24年--信息技术发展——新一代信息技术及应用

1、物联网 物联网(The Internet of Things)是指通过信息传感设备,按约定的协议将任何物品与互联网相连接,进行信息交换和通信,以实现智能化识别、定位、跟踪、监控和管理的网络。 1.1 技术基础 物联网架构可分为三层:感知层、网络层和应用层。感知层由各种传感器…

AI翻唱+视频剪辑全流程实战

目录 一、AI翻唱之模型训练 &#xff08;1&#xff09;模型部署 &#xff08;2&#xff09;数据集制作——搜集素材 &#xff08;3&#xff09;数据集制作——提升音频质量 方法一&#xff1a;使用RVC提供的音频处理功能。 方法二&#xff1a;可以使用音频剪辑工具Ad…

我是如何免费抵御一个多月的 DDos/CC 攻击的?

今天明月给大家详细分享一下我的博客是如何免费抵御了长达一个多月的 DDos/CC 攻击的&#xff0c;在【现在 DDos/CC 攻击门槛低的可怕&#xff01;】一文里明月就说过现在 DDos/CC 攻击几乎是没有门槛的&#xff0c;任何一个老鼠屎在群里看到你的博客都可以轻松便捷的发动一次 …