React懒加载

文章目录

  • 定义
  • 如何使用
  • Suspense

定义

React.lazy 函数能让你像渲染常规组件一样处理动态引入(的组件)。
(1) 为什么代码要分割
当你的程序越来越大,代码量越来越多。一个页面上堆积了很多功能,也许有些功能很可能都用不到,但是一样下
载加载到页面上,所以这里面肯定有优化空间。就如图片懒加载的理论。
(2) 实现原理
当 Webpack 解析到该语法时,它会自动地开始进行代码分割(Code Splitting),分割成一个文件,当使用到这个文件的时候会这段代码才会被异步加载。
(3) 解决方案
在React.lazy 和常用的三方包react-loadable ,都是使用了这个原理,然后配合webpack进行代码打包拆分达到异步加载,这样首屏渲染的速度将大大的提高。
由于React.lazy 不支持服务端渲染,所以这时候react-loadable就是不错的选择

如何使用

下面示例代码使用create-react-app脚手架搭建:

//OtherComponent.js 文件内容
import React from 'react'const OtherComponent = ()=>{return (<div>
我已加载
</div>)}export default OtherComponent// App.js 文件内容
import React from 'react';import './App.css';//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));function App() {return (<div className="App"><OtherComponent/></div>);}export default App;

这是最简单的React.lazy ,但是这样页面会报错。这个报错提示我们,在React使用了。lazy 之后,会存在一个加
载中的空档期,React不知道在这个空档期中该显示什么内容,所以需要我们指定。接下来就要使用到Suspense

Suspense

如果在 App 渲染完成后,包含 OtherComponent 的模块还没有被加载完成,我们可以使用加载指示器为此组件做
优雅降级。这里我们使用 Suspense 组件来解决。

import React, { Suspense, Component } from 'react';import './App.css';//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));export default class App extends Component {state = {visible: false}render() {return (<div className="App"><button onClick={() => {this.setState({ visible: true })}}>加载OtherComponent组件
</button><Suspense fallback={<div>Loading...</div>}>{this.state.visible ? <OtherComponent /> : null}</Suspense></div>)}}

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

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

相关文章

Oracle SQL优化基本概念:直方图

在Oracle数据库中&#xff0c;直方图&#xff08;Histograms&#xff09;是优化器用于收集和存储列数据分布统计信息的一种机制。直方图主要用于解决SQL查询优化中的问题&#xff0c;尤其是当表的某一列数据分布不均匀或存在大量重复值时。 正常情况下&#xff0c;如果没有直方…

SQL-Labs靶场“32-33”关通关教程

君衍. 一、32关 GET单引号闭合宽字节注入1、源码分析2、宽字节注入原理3、联合查询注入4、updatexml报错注入5、floor报错注入 二、33关 GET单引号addslashes逃逸注入1、源码分析2、联合查询注入3、updatexml报错注入4、floor报错注入 SQL-Labs靶场通关教程&#xff1a; SQL注入…

安装python、pycharm,打好基础,准备飞起

python安装使用 安装python安装包 以下为自定义安装python安装包&#xff0c;无特殊要求可直接进行安装。 勾选Add Python 3.6 to PATH&#xff0c; 然后点击 Customize installation&#xff0c;进行自定义安装。 所有的都勾上&#xff0c;然后点击Next。 可选择自己需要…

阿里提前批(阿里云)一面30min

今日分享阿里云一面&#xff0c;给要准备就业的宝子们一点方向 1、自我介绍与项目介绍 2、八股文 Java的特性、Java的oop&#xff1f; Java有哪些方法来实现线程安全&#xff1f; 讲讲Spring中的AOP与IOC&#xff1f; synchronized锁怎么用&#xff1f; Mysql中右模糊查询用…

(附数据集)基于lora参数微调Qwen1.8chat模型的实战教程

基于lora微调Qwen1.8chat的实战教程 日期&#xff1a;2024-3-16作者&#xff1a;小知运行环境&#xff1a;jupyterLab描述&#xff1a;基于lora参数微调Qwen1.8chat模型。 样例数据集 - qwen_chat.json&#xff08;小份数据&#xff09; - chat.json&#xff08;中份数据&…

Day39:安全开发-JavaEE应用SpringBoot框架Actuator监控泄漏Swagger自动化

目录 SpringBoot-监控系统-Actuator SpringBoot-接口系统-Swagger 思维导图 Java知识点&#xff1a; 功能&#xff1a;数据库操作&#xff0c;文件操作&#xff0c;序列化数据&#xff0c;身份验证&#xff0c;框架开发&#xff0c;第三方组件使用等. 框架库&#xff1a;MyB…

hot100 -- 矩阵

&#x1f442; Peter Pan - kidult. - 单曲 - 网易云音乐 &#x1f442; Bibliothque&#xff08;图书馆&#xff09; - Jasing Rye - 单曲 - 网易云音乐 目录 &#x1f33c;前言 &#x1f33c;二分模板 &#x1f382;矩阵置零 AC 标记数组 AC 标记变量 &#x1f6a9;…

【JAVA】JAVA方法的学习和创造

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不…

阿里云分布式深度学习训练架构Whale

阿里云分布式深度学习训练架构Whale 阿里云分布式深度学习训练架构Whale 参考文献 Whale 基于 Tensorflow 深度学习分布式训练框架|学习笔记Whale: Efficient Giant Model Training over Heterogeneous GPUs阿里云机器学习平台 PAI 论文高效大模型训练框架 Whale 入选 USENIX A…

【04】WebAPI

WebAPI 和标准库不同,WebAPI 是浏览器提供的一套 API,用于操作浏览器窗口和界面 WebAPI 中包含两个部分: BOM:Browser Object Model,浏览器模型,提供和浏览器相关的操作DOM:Document Object Model,文档模型,提供和页面相关的操作BOM BOM 提供了一系列的对象和函数,…

OpenCV 环境变量参考

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a; OpenCV4.9.0配置选项参考 下一篇&#xff1a;OpenCV4.9.0配置选项参考 引言&#xff1a; OpenCV是一个广泛使用的图像和视频处理开源库&#xff0c;拥有丰富的图像算法和函…

JS:轮播图终极版

轮播图&#xff1a;可触发效果 &#xff1a;1、按箭头符号可左右切换图片 2、到最后一张的下一张是开头第一张&#xff1b;开头第一张的前一张是最后一张 3、鼠标放在轮播图上时轮播图停止定时器&#xff1b;鼠标移开定时器继续开启 注意&#xff1a;图片需要自己准备且对应…

Lua中文语言编程源码-第三节,更改lualib.h Lua标准库, 使Lua支持中文关键词(与所有的基础库相关)

源码已经更新在CSDN的码库里&#xff1a; git clone https://gitcode.com/funsion/CLua.git 在src文件夹下的lualib.h&#xff0c;是Lua的标准库模块。 Lua标准库一共有有个10个库&#xff0c;base, 基本用不着改&#xff0c;所以没加中文名称。 函数声明宏名英文库名中文库…

51单片机-AT24C02(I2C总线)

目录 一&#xff0c;介绍及元件工作原理 7.时序结构&#xff08;重要&#xff09; 8.i2C总线数据帧&#xff08;重要&#xff09; 二&#xff0c;应用 一&#xff0c;介绍及元件工作原理 1.元件介绍 2.存储器 3.地址总线和数据总线 地址总线只能一次选中一行 4.引脚及应用…

一起学数据分析_2

写在前面&#xff1a;代码运行环境为jupyter&#xff0c;如果结果显示不出来的地方就加一个print()函数。 一、数据基本处理 缺失值处理&#xff1a; import numpy as np import pandas as pd#加载数据train.csv df pd.read_csv(train_chinese.csv) df.head()# 查看数据基本…

05.BOM对象

一、js组成 JavaScript的组成 ECMAScript: 规定了js基础语法核心知识。比如&#xff1a;变量、分支语句、循环语句、对象等等 Web APIs : DOM 文档对象模型&#xff0c; 定义了一套操作HTML文档的APIBOM 浏览器对象模型&#xff0c;定义了一套操作浏览器窗口的API 二、windo…

wsl ubuntu 安装cuda nvcc环境

wsl ubuntu 安装cuda环境&#xff1a; CUDA Toolkit 11.6 Downloads | NVIDIA DeveloperDownload CUDA Toolkit 11.6 for Linux and Windows operating systems.https://developer.nvidia.com/cuda-11-6-0-download-archive?target_osLinux&target_archx86_64&Distri…

二进制安全找实习记录

就安全岗而言&#xff0c;这里笔者仅仅面试了腾讯的科恩实验室内核安全和浏览器安全&#xff08;其它的就面了一下前后端开发&#xff0c;这就不说了&#xff0c;笔者也没打算搞开发&#xff09;&#xff0c;然后倒在了一面。然后有的问题忘记了&#xff0c;仅仅记录一下自己回…

Word粘贴时出现“运行时错误53,文件未找到:MathPage.WLL“的解决方案

在安装完MathType后&#xff0c;打开word复制粘贴时报错“运行时错误53,文件未找到&#xff1a;MathPage.WLL” 首先确定自己电脑的位数&#xff08;这里默认32位&#xff09; 右击MathType桌面图标&#xff0c;点击“打开文件所在位置”&#xff0c; 然后分别找到MathPage.W…