react 16.6 懒加载 Lazy 尝鲜

react 16.6 发布了新的功能 lazy ,和一个组件 Suspense

下面我们看一下他的用法

首先我们先创建两个组件 LazyTest.1 和 LazyTest.2,内容相同

import React, { Component } from 'react'export default class LazyTest extends Component{render(){return (<div><h1>LazyTest 组件</h1></div>);}
}
复制代码

然后在 App 入口 js 中分布通过 Lazy 的形式引入

import React, { Component, lazy, Suspense } from 'react';const LazyTest1 = lazy(() => import('./components/LazyTest.1'));
const LazyTest2 = lazy(() => import('./components/LazyTest.2'));class App extends Component {fallback = () =>{return (<div>Loading...</div>);}render() {return (<div><Suspense fallback={this.fallback()}><h1>懒加载组件</h1><LazyTest1 /><LazyTest2 /></Suspense></div>);}
}export default App;
复制代码

Suspense 可以放在懒加载的组件外层的任意位置,fallback 是懒加载组件载入过程中的一个过渡,可以放一些过渡效果或方法。

下面我们看一下打出来的包

其中 LazyTest.1 和 LazyTest.2 分别达成了独立的包。

是不是很方便呀,你也快来试试吧!

注意:React.lazySuspense 尚不可用于服务器端,如果做服务端渲染的同学官方还是建议使用 React Loadable

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

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

相关文章

Intellij IDEA展示类中的方法树形结构

在intellij Idea中叫Structure&#xff08;结构体&#xff09;&#xff0c;如下图&#xff1b; 也可以直接AltF7快捷键&#xff0c;这样默认会把Structure显示在屏幕下方&#xff0c;如下图操作就可以移动到右侧。 效果如下&#xff1a;

时间计算题100道_2019四校及分校自招开放日情况汇总(含时间安排、考试内容难度、到场人数等)...

点击上方“上海初升高”&#xff0c;选择“星标公众号”回复“加群”就能加入上万家长信赖的升学群受到疫情的影响&#xff0c;今年各市重点的自招开放日报名迟迟没有提上日程。但不管怎样&#xff0c;自招应该是不会取消的&#xff0c;以下是去年四校及分校自招开放日情况汇总…

linux I/O 栈 预习(上)

二、预习 在我们进去device mapper的dm dedup学习之前&#xff0c;我们先要预习一下&#xff0c;什么是device mapper&#xff0c;和为什么device mapper能够做块重删。 1、device mapper照旧&#xff0c;我们先看一下维基百科对它的介绍。The device mapper is a framework pr…

java.util.concurrent.RejectedExecutionException

报错日志 java.util.concurrent.RejectedExecutionException: Task java.util.concurrent.FutureTask12e2cb93 rejected from java.util.concurrent.ThreadPoolExecutor6ecd396b[Running, pool size 10, active threads 10, queued tasks 200, completed tasks 0] 原因&am…

springboot controller 访问 404

两种解决方式&#xff1a; 1、因为SpringBoot的项目启动类&#xff0c;会只扫描该包下的文件或者改包下所有子包内的文件&#xff0c;只要你把该文件移动到启动类的相同目录报下就可以。 2、就是在该类上面加者在启动类上添加注解 ComponentScan(basePackages {"com.boota…

fegin需要实现类_【第24条】静态成员类优于非静态成员类

第24条静态成员类优于非静态成员类嵌套类(nested class)是指定义在另一个类的内部的类。嵌套类存在的目的应该只是为它的外围类(enclosing class)提供服务。如果嵌套类将来可能会用于其他的某个环境中&#xff0c;它就应该是顶层类(top-level class)。嵌套类有四种&#xff1a;…

.h与.cpp

本质上没什么区别。 cpp:c plus plus,就表示为c原文件。 .h文件实现的功能是声明.cpp文件中需要使用的变量、函数及宏定义等。 .h文件就像是一个接口&#xff0c;具体的实现可以在.cpp中&#xff0c;也可以在.h中。转载于:https://www.cnblogs.com/keguniang/p/9877581.html

Springboot 多线程的使用

直接上代码 线程配置类 package zengmg.nbpi.com.thread;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.scheduling.annotation.EnableAsync; import org.springframework…

vlookup函数练习_为什么职场要学excel函数?看这个案例演示:自动计算快递价格...

在上一篇文章里面&#xff0c;我们讲了如何整理完成一个规范化的表格&#xff0c;以便于下一步的函数计算。最初的信息内容如图所示。经过整理&#xff0c;我们得到了表2这样的规范化表格。现在&#xff0c;我们就通过表2来实现快递费用自动计算&#xff0c;最终实现图中这样的…

%@ taglib prefix=c uri=http://java.sun.com/jsp/jstl/core %会报错

有些时候&#xff0c;<% taglib prefix"c" uri"http://java.sun.com/jsp/jstl/core" %>会报错&#xff0c;错误提示为&#xff1a; Can not find the tag library descriptor for "http://java.sun.com/jsp/jstl/core" 主要原因是缺少 jst…

蓝牙芯片排行_7月TWS 全球品牌出货量排行榜出炉

数据铸造影响力撰文 / 旭日大数据编辑 / 柏序旭日大数据公布了2020年7月全球TWS品牌销量排行榜&#xff0c;与上期数据相比&#xff0c;全球品牌七排名TOP20汰换率为15%&#xff0c;其中DOSS&#xff0c;万魔、BOSE跌出前20&#xff0c;广州由我&#xff0c;Tzumi登榜&…

project 打印的时候上面的表格和下面的图例中间有个很大的空白,这块东西怎么能去掉呢?

“打印预览”的“页面设置”里面&#xff0c;“页面”选项卡里的“缩放”项设为1页宽&#xff0c;1页高就可以了&#xff0c; 当然如果你的任务项比较少的话&#xff0c;怎么调也不容易去掉下面的空白 操作如下图&#xff08;下图的任务太少&#xff0c;去不掉空白的&#xf…

加密机工作原理_端子机压力检测装置工作原理

上期我们介绍了端子机压力管理装置的使用常识&#xff0c;这期我们介绍端子机压力管理装置的工作原理&#xff0c;端子机压接管理装置&#xff0c;有单通道压力监测和双通道压力监测二种&#xff0c;双通道压力监测装置&#xff0c;一般用于双头端子压接机上&#xff0c;一台主…

win10解决java多版本java -version问题

电脑环境 先安装了Jdk8&#xff0c;后安装了jdk11.&#xff08;发现Jdk11没有单独的jre&#xff0c;官网也不提供下载&#xff0c;集成在一起了&#xff09; Java -version 将环境变量切换为 JDK11 后 javac -version 是 java编译环境是jdk11了&#xff0c;但 java -versio…

vs设计窗口不见了_碳纤维的巅峰:VS沛纳海616V3

各位朋友&#xff0c;你们好&#xff01;欢迎大家关注XYZ腕表俱乐部。专注腕表资讯&#xff0c;致力于做腕表拆解测评&#xff0c;为大家普及分享有价值的腕表知识&#xff0c;真正让大家实实在在透明玩表。想了解更多&#xff0c;欢迎搜索&#xff1a;XYZ腕表俱乐部。可以让您…

CSharpGL(49)试水OpenGL软实现

CSharpGL(49)试水OpenGL软实现 CSharpGL迎来了第49篇。本篇内容是用C#编写一个OpenGL的软实现。暂且将其命名为SoftGL。 目前已经实现了由Vertex Shader和Fragment Shader组成的Pipeline&#xff0c;其效果与显卡支持的OpenGL实现几乎相同。下图左是常规OpenGL渲染的结果&#…

SonarQube结合IDEA实现代码检测

环境准备 1.SonarQube下载&#xff1a;https://www.sonarqube.org/downloads/ 建议用最新版本&#xff0c;SonarQube与idea的结合 需要SonarQube很多插件&#xff0c;需要借助idea的SonarLint 插件。 不同的SonarQube版本&#xff0c;有不同的插件版本 idea的SonarLint 插件…

二维小波变换_【外文文献速读】实时二维水波模拟

题目&#xff1a;Water surface wavelets 作者&#xff1a;Stefan Jeschke&#xff0c; TomšSkřivan&#xff0c; MatthiasMller-Fischer&#xff0c; Nuttapong Chentanez&#xff0c; Miles Macklin&#xff0c; Chris Wojtan

技术开发(委托)合同怎么写?

一直基于宁波市科技局备案合同模板签订合同&#xff0c;并完成科技局备案工作&#xff0c;成功了N次&#xff0c;直接分享模板&#xff0c;该模板通过了法务审核&#xff0c;财务审核&#xff0c;只需要批示修改相关内容即可&#xff0c;一份技术开发委托合同&#xff0c;十几分…

最常用的15个前端表单验证JS正则表达式

2019独角兽企业重金招聘Python工程师标准>>> 在表单验证中&#xff0c;使用正则表达式来验证正确与否是一个很频繁的操作&#xff0c;本文收集整理了15个常用的JavaScript正则表达式&#xff0c;其中包括用户名、密码强度、整数、数字、电子邮件地址&#xff08;Ema…