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的大致用法了。。