首页 > 其他分享 >React 组件懒加载

React 组件懒加载

时间:2023-12-04 19:34:01浏览次数:27  
标签:React.1 代码 React azy 组件 加载

只有不断学习和成长,才能适应这个快速变化的世界。

1. 懒加载

1.1 React 懒加载

React 中懒加载 Lazy 与 Suspense 需要搭配使用。

React.lazy 定义:

React.1azy 函数能让你像渲染常规组件一样处理动态引入的组件。其实就是懒加载。

为什么代码要分割?

当你的程序越来越大,代码量越来越多。一个页面上堆积了很多功能,也许有些功能很可能都用不到,但是一样下载加载到页面上,所以这里面肯定有优化空间。就如图片懒加载的理论。

实现原理?

当 webpack 解析到该语法时,它会自动地开始进行代码分割(Code Splitting),分割成一个文件,当使用到这个文件的时候这段代码才会被异步加载。

解决方案?

在 React.1azy 和常用的三方包 react-1oadab1e(路由懒加载),都是使用了这个原理,然后配合 webpack 进行代码打包拆分达到异步加载,这样首屏渲染的速度将大大的提高。由于 React.1azy 不支持服务端渲染,所以这时候 react-1oadable 就是不错的选择。

1.2 Lazy 和 Suspense 使用

// 当使用到的时候才进行导入
const NewComponent = React.lazy(()=>import('./component/NewComponent'))

<Suspense fallback={<div>正在加载中</div>}>
  <NewComponent></NewComponent>
<Suspense>

1.3 第三方库 react-loadab1e 使用

标签:React.1,代码,React,azy,组件,加载
From: https://www.cnblogs.com/hubert-style/p/17875748.html

相关文章

  • quickjs加载字节码文件
    一、使用qjsc编译字节码hello.js console.log("HelloWorld") qjsc.exe-chello.js1constuint32_tqjsc_hello_size=78;23constuint8_tqjsc_hello[78]={40x02,0x04,0x0e,0x63,0x6f,0x6e,0x73,0x6f,50x6c,0x65,0x06,0x6c,0x6f,......
  • vue3 setup 父组件向子组件传递参数、方法|子组件向父组件传递数据,函数
    https://blog.csdn.net/qq_27517377/article/details/123163381https://blog.csdn.net/qq_27517377/article/details/123166367vue3setup父组件向子组件传递参数参数<template><el-rowclass="mb-4"> <el-buttontype="danger">props.vue传......
  • 五、自定义组件
    1.创建自定义组件在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行UI界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件......
  • 第三方UI组件库的样式修改
    一、场景:    一般来说,我们在使用第三方UI组件库(如:vant,element-plus等)时,UI组件库自带的样式不能满足用户的个性化需求时,就需要我们开发人员自己动手对组件库的局部样式进行修改。二、修改UI组件库的顺序和方法1、修改主题1、修改主题:每个ui组件库都有专门的修改主题的解......
  • pipreqs 自动找到项目的所有组件和模块版本
    pipinstallpipreqs(适用于djangoFlask等)pipreqs./--encoding=utf-8找到当前项目目录下的所有组件和依赖H:\MyFlask>pipreqs./--encoding=utf-8十六.Flask基本项目目录搭建和pipreqs模块(组件和模块版本)virtualenv模块(创建虚拟环......
  • 无法加载windows安装程序。发生内部错误。若要安装windows,请重新启动安装——it专员实
    无法加载windows安装程序。发生内部错误。若要安装windows,请重新启动安装——it专员实习生日志(2023.12.4)导航目录无法加载windows安装程序。发生内部错误。若要安装windows,请重新启动安装——it专员实习生日志(2023.12.4)导航遇到的困难/问题描述解决的经过与思路造成的原因解......
  • React:实现一个定时器计数器,每秒自动+1
    需求:实现一个定时器计数器,每秒自动+1importReact,{useState,useEffect}from"react";exportdefaultfunctionApp(){let[count,setCount]=useState(0);useEffect(()=>{lettimer=setInterval(()=>{setCount(count+1);},100......
  • 前端组件wolfTable的style格式文档
    此文档记录的是wolf-table的style格式文档,如果你找的是x-data-spreadsheet,那么请查阅这个文档https://www.cnblogs.com/WilsonZhu/p/17858411.htmlwolf-table的格式输入只有一个方式,通过调用addStyle以及cell函数来进行格式的改变例子如下:importTablefrom'@wolf-table......
  • 错误 找不到或无法加载主类
    显示红字报错:"错误找不到或无法加载主类cn.com.xxx.arps.test.Test"Test.java:publicclassTest{publicstaticvoidmain(String[]args){System.out.println("咋能报错呢");}}解决方法:直接重新编译整个项目点击然后等待IDEA重......
  • vue 弹窗组件
    vue弹窗<el-dialog></el-dialog>可以在其中编写所需的弹窗显示的内容也可以在其中放组件标签作为弹窗放一个组件的话,例:<el-dialogv-model="addGoodsDialog":title="addGoodsTitle"width="60%"destroy-on-close="true":close-on-p......