React的性能优化 - 代码拆分之lazy的使用方法

Z时代
2024-01-10
分类：综合

react

我们在某些网站上肯定看到过这样一种现象，页面上图片只有你滚动到那个位置附近的时候才会加载，否则就只占了个位，这就是延迟加载最普遍的应用场景。

我们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;