React的性能优化 - 代码拆分之lazy的使用方法
我们在某些网站上肯定看到过这样一种现象,页面上图片只有你滚动到那个位置附近的时候才会加载,否则就只占了个位,这就是延迟加载最普遍的应用场景。 我们react框架进行开发的时候也是一样,没有使用的组件是完全没必要加载的。
说道代码拆分就不得不说一个关键字:import 。 使用import动态导入模块。返回一个promise。如果在代码中动态导入一个模块,
那么webpack就会做一次代码拆分。把import导入的模块以及以来打成一个独立的js文件。默认情况下,页面是不会主动加载他的,只有用到他的时候才去加载。
但对于react组件来说怎么才算是用到呢?显然就是需要渲染他的时候。react提供了一个lazy函数用来将指定组件的导入行为封装成react组件。
一旦封装后的组件渲染也意味着要去加载被封装的组件。注意这里封装的是 组件的导入行为而不是组件本身。而且导入实际上意味着网络请求。
lazy的使用方法:
一、新建一个About组件
import React, {Component} from 'react'; class About extends Component {
render() {
return (
<h1>hello world</h1>
);
}
} export default About;
二、建App组件,在react中导入lazy函数。然后用lazy封装About。lazy需要传入一个没有参数的函数,函数内部直接用一个import指令来导入。
lazy返回就是一个react组件。然后渲染About组件。
mport React, {Component, lazy} from 'react'; const About = lazy(() => import("./About.jsx")); class App extends Component {
constructor(props) {
super(props);
this.state = {};
} render() {
return (
<div>
<About/>
</div>
);
}
} export default App;
此时就这样运行的话肯定会有报错。那是因为用了lazy以后会有一个加载的空当。此时react不知道在这个空当需要显示什么所以需要我们指定。
该怎么指定呢?用Suspense 什么是Suspense呢? 他是一个react中的内置组件专门用来和lazy配合的。我们先来引入。
import React, {Component, lazy, Suspense} from 'react';
然后用Suspense把About组件包起来。然后设置一个Suspense的一个属性:fallback。 fallback需要传入一个loading。
这个loading可以是一个loading组件。这里我们为简便期间直接写一个loading单词。
return (
<div>
<Suspense fallback={<div>loading...</div>}>
<About/>
</Suspense>
</div>
);
这样就可以显示About组件的内容了。
这里是About能成功加载的情况下,那么如果About加载失败该怎么办呢?
react中有一个概念叫做ErrorBoundary错误边界。实际上就是能够捕获后台组件渲染错误的组件。他实际上是利用了react一个生命周期方法加错componentDidCatch。
那么怎么使用呢?看代码:
import React, {Component, lazy, Suspense} from 'react'; const About = lazy(() => import("./About.jsx")); class App extends Component {
constructor(props) {
super(props);
this.state = {
hasError: false
};
} componentDidCatch() {
this.setState({
hasError: true
})
} render() {
if (this.state.hasError) {
return <div>error</div>
}
return (
<div>
<Suspense fallback={<div>loading...</div>}>
<About/>
</Suspense>
</div>
);
}
} export default App;
这就是lazy的大致用法了。。
React的性能优化 - 代码拆分之lazy的使用方法的更多相关文章
- React 组件性能优化
React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...
- 如何对react进行性能优化
React本身就非常关注性能,其提供的虚拟DOM搭配上DIff算法,实现对DOM操作最小粒度的改变也是非常高效的,然而其组件的渲染机制,也决定了在对组件更新时还可以进行更细致的优化. react组件 ...
- React Native 性能优化指南【全网最全,值得收藏】
2020 年谈 React Native,在日新月异的前端圈,可能算比较另类了.文章动笔之前我也犹豫过,但是想到写技术文章又不是赶时髦,啥新潮写啥,所以还是动笔写了这篇 React Native 性能 ...
- React项目性能优化
1. 使用生产版本和Fragment 1. 生产版本 确保发布的代码是生产模式下(压缩)打包的代码. 一般运行npm run build命令. 直接从webpack看配置文件,需要设置mode = ' ...
- React组件性能优化总结
性能优化的思路 影响网页性能最大的因素是浏览器的重排(repaint)和重绘(reflow). React的Virtual DOM就是尽可能地减少浏览器的重排和重绘. 从React渲染过程来看,如何防 ...
- React组件性能优化
转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...
- react中性能优化的点
react提升代码性能的点 1.绑定如果改变作用域点话放在constructor里面做,这样可以保证整个程序的作用域绑定操作只会执行一次,而且避免子组件的无谓渲染. 2.内置的setState是个异步 ...
- react教程 — 性能优化
参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool 或 https: ...
- React 组件性能优化探索实践
转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...
随机推荐
- C中进制, 原码, 反码与补码的简单用法
/** * 二进制 binary 如: 1010 * 八进制 octal 如: 070 * 十六进制 hexadecimal 如: 0x7f * * 1Byte = 8bits * 1WORD = 2 ...
- MyEclipse配置maven创建项目教程入门
Maven简介:Maven是一个项目管理工具,主要用于Java平台的项目构建.依赖管理和项目生命周期管理. 下载Maven: https://maven.apache.org/download.cgi ...
- 十六、ajax上传图片 mvc
一.ajax上传图片 mvc 前台html <img id="uploadimg1" class="uploadimg" src="~/ ...
- IE历史纪录
signed int __cdecl sub_475790(_BYTE *a1) { signed int result; // eax DWORD v2; // [esp+10h] [ebp-10h ...
- Web源码泄露总结
Web源码泄露总结 背景 本文主要是记录一下常见的源码泄漏问题,这些经常在web渗透测试以及CTF中出现. 源码泄漏分类 .hg源码泄漏 漏洞成因: hg init的时候会生成.hg e.g.http ...
- spring data jpa sql
CREATE TABLE cst_customer ( cust_id bigint(32) NOT NULL AUTO_INCREMENT COMMENT '客户编号(主键)', cust_name ...
- Linux文件归档工具——cpio
一cpio的介绍 功能:复制文件从或到归档 cpio命令是通过重定向的方式将文件进行打包备份,还原恢复的工具,它可以解压以“.cpio”或者“.tar”结尾的文件. cpio [选项] > 文件 ...
- jsp标签的介绍
cankao:http://www.cnblogs.com/xdp-gacl/p/3788369.html jsp常用的标签有以下3个 1.<jsp:include>标签 2.<js ...
- Qt的信号和槽机制
一.信号和槽机制 信号和槽用于两个对象之间的通信,我们希望任何对象都可以和其他对象进行通信. 当一个特殊的事情发生时便可以发射一个信号,而槽就是一个函数,它在信号发射后被调用来相应这个信号.( ...
- JRE和JVM的区别
JRE和JVM的区别 JRE(JavaRuntimeEnvironment,Java运行环境),也就是Java平台.所有的Java程序都要在JRE下才能运行.JDK的工具也是Java程序, ...