在React应用中，有些组件可能不经常用到，比如法律条款的弹窗，我们几乎不看，这些组件也就没有必要首次加载，可以在点击它们的时候再加载，这就需要动态引入组件，需要组件的时候，才引入组件，加载它们，进行渲染，也称为懒加载。怎么动态引入组件呢？先看在普通的JS中，如何动态引入一个模块？是使用import()函数。比如，在下面的index.html中，

<body>

    <div id="message"></div>

    <button id="clickShow">点击显示</button>

    <script src="./index.js"></script>

</body>

　　点击button，id为message的div会显示‘Hello’，假设显示内容的JS文件是showMessage.js

export function sayHi(id, msg) {

    document.getElementById(id).innerHTML = msg;

}

　　那么在index.js中，button的click事件处理函数中，import('./showMessage.js')，

function handleClick() {

    import("./showMessage.js")

        .then((module) => {

            module.sayHi("message","Hello");

        });

}

document

    .getElementById("clickShow")

    .addEventListener("click", handleClick);

　　import()函数返回的是promise, promise resolve后返回的是module对象(showMessage.js中暴露出来的对象)，通过module对象就可以调用showMessage中暴露的方法。在React中，也是通过添加点击事件来动态引入组件吗？有更好的方法，因为React是数据驱动，状态的改变，渲染不同的组件，就可以了。比如，弹窗，在包含弹窗组件的父组件中，设置state来控制弹窗的显示和隐藏，state是true，弹窗显示，state为false, 弹窗隐藏，但组件怎么表示出它是动态引入的组件？React.lazy()方法，它接受一个函数，返回一个组件，表示组件是动态加载的。函数的格式是() => import(要引入组件所在的js文件)，js文件必须用export default 暴露出组件。假设Model.js中 export default function Module() {},

const LazyModel = React.Lazy(() => import('./Model.js');

　　LazyModel组件就表示它要动态加载。当state是true时，显示LazyModel就可以了。但这会引出另外一个问题，state为true，React就会渲染LazyModel组件，但组件并没有加载完成，因为它是动态加载的，React是无法渲染的，但React肯定要渲染点什么，怎么办？怎么才能把动态加载的组件和React的渲染过程结合起来？需要告诉React，当组件没有加载完成时，无法渲染的时候，它要渲染什么，这就是suspense组件。用suspense组件把动态渲染的组件包起来，同时给suspense组件的fallback属性赋值，当React渲染动态组件的时候，它就会到组件的上层找Suspense组件，把fallback渲染出来。

　　npx create-react-app react-lazy,   创建如下项目

　　点击button的时候，动态显示日历。日历组件使用react-datepicker，npm install react-datepicker --save。App.js

import './App.css';

import { CalendarWrapper } from './CalenderWrapper'

function App() {

  return (

    <div>

      <main>Main App</main>

      <aside>

        <CalendarWrapper />

        <CalendarWrapper />

      </aside>

    </div>

  );

}

export default App;

　　App.css

main {

  width: 400px;

  height: 60px;

  background-color: #643797;

  text-align: center;

  line-height: 60px;

}

aside {

  display: flex;

  justify-content: space-between;

  width: 400px;

  margin-top: 10px;

}

.CalendarWrapper {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 180px;

  height: 100px;

  background-color: #8aceea;

}

　　CalendarWrapper.js

import { lazy, useState } from 'react';

const LazyCalendar = lazy(() => import("./Calendar.js"));

export function CalendarWrapper() {

    const [isOn, setIsOn] = useState(false);

    return <div className='CalendarWrapper'>

        {

            isOn ? (

                <LazyCalendar />

                ) : (

                <div>

                    <button onClick={() => setIsOn(true)}>Show Calendar</button>

                </div>

                )

        }

    </div>

}

　　Calendar.js

import DatePicker from "react-datepicker";
　import "react-datepicker/dist/react-datepicker.css";
export default function Calendar() {

    const startDate = new Date();

    return (

        <DatePicker

            selected={startDate}

        />

    );

}

　　const LazyCalendar = lazy(() => import("./Calendar.js")); 可以看到React.lazy函数接受一个函数，返回一个promise，拆分一下

const getPromise = () => import('./Calendar.js');

const LazyComponent = lazy(getPromise);

　　传给lazy函数getPromise()函数，React第一次渲染组件的时候，就会调用这个函数。getPromise()函数，返回一个promise，promise resolve后是一个模块，模块就是Calendar.js export default出来的模块。但是单击button后，有报错，因为React需要时间去加载组件，当渲染组件时，组件又没有加载完时，我们应该怎么做，最好显示一个loading提示，表示组件正在加载中。怎么样显示loading提示呢？使用Suspense组件，把Lazy组件包起来，

<aside>

  <Suspense fallback={<div>Loading...</div>}>

    <CalendarWrapper />

  </Suspense>

  <Suspense fallback={<div>Loading...</div>}>

    <CalendarWrapper />

  </Suspense>

</aside>

　　使用fallback属性来表示Suspense组件将要渲染什么，直到所有后代Lazy组件都加载完成，返回UI。点击左边Show Calendar按钮，可以看到先渲染loading，再显示日历组件。当点击右边的Show Calendar按钮，你会发现，直接就渲染出了。异步加载的组件如果已经加载了，它就不需要再加载了。所以这两个异步加载的组件也可以放到一个<Suspense> 下面

<Suspense fallback={<div>Loading...</div>}>

  <CalendarWrapper />

  <CalendarWrapper />

</Suspense>

　　当一个lazy组件第一次渲染时，React会沿着组件树向上查找Suspense组件，然后使用第一个找到的Suspense组件。Suspense组件就会在它子组件的地方渲染它的fallback UI，如果没有找到Suspense组件，React就会报错。

　　但React是怎么实现组件的动态加载的？我们可以认为动态加载的组件有一个内部状态，uninitialized, pending, resolved, or rejected。当React第一次渲染动态加载的组件时，组件是uninitialized状态，但它返回了一个函数，React会调用函数，来加载组件。函数就像getPromise

const getPromise = () => import("./Calendar");

const LazyCalendar = lazy(getPromise);

　　函数返回了一个promise，组件的状态就变成了pending 状态，等待promise完成。promise应该能resolve成一个模块，模块的default属性是一个component。一旦promise被resolve，React就会设置组件的状态是resolved，然后返回组件，表示可以渲染了。

if (status === "resolved") {

　　return component;

} else {

　　throw promise;

}

　　else则是和suspense组件进行沟通的关键，如果promise 没有resolve呢？它就会抛出promise, suspense组件就是捕获promise，然后渲染fallback UI(如果 promsise的状态是pending)。 所以对一个动态渲染的组件来说，如果它已经包含了一个组件，就是组件已经resolve了，React就会直接渲染组件；如果它包含一个正在pending的promise，组件就会抛出promise，Suspense组件就会捕获它。如果它包含一个函数，它就会调用函数来获取promise，把promise存在组件对象上，抛出promise，等到promise resolve后，调用promise的then方法 把promise resolve的组件存储在组件对象上。

　　如果promsise 被rejected，比如网络错误，suspense component 不会处理error，需要error boundary。react并没有提供一个组件来捕获子组件抛出来的错误，但是它提供了一系列的生命周期函数，如果在类组件中想要捕获错误，就要实现这些生命周期函数，如果一个类实现一个或几个这样的生命周期函数，它们就称为错误边界。如果你把组件包到错误边界中，如果被包裹的组件中抛出错误，它就是渲染fallback  UI。

<ErrorBoundary>

　　<Suspense fallback={<div>Loading...</div>}>
　　　　<CalendarWrapper />
　　　　<CalendarWrapper />　　
　　</Suspense> 
</ErrorBoundary>

　　Error buond 组件

import { Component } from "react";

export default class ErrorBoundary extends Component {

    constructor(props) {

        super(props);

        this.state = { hasError: false };

    }

    static getDerivedStateFromError() {

        return { hasError: true };

    }

    render() {

        const {

            children,

            fallback = <h1>Something went wrong.</h1>

        } = this.props;

        return this.state.hasError ? fallback : children;

    }

}

　　当React去渲染动态加载的组件时，它先判断组件的状态，如果动态引入的组件已经加载完了，直接渲染组件。如果组件还在pending状态，React就会抛出动态引入的promise，如查promise rejected，需要一个error bound 来捕获异常，并渲染fallback UI。

React Lazy 和 Suspense的更多相关文章

  1. React.lazy和React.Suspense异步加载组件

    在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件. 例如: const johanComponent = React.lazy(() ...

  2. React中异步模块api React.lazy和React.Suspense

    React.lazy React.lazy 这个函数需要动态调用 import().它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut export 的 R ...

  3. React源码 Suspense 和 ReactLazy

    React 16.6 提供的一个新的开放一部分功能的 Suspense 代码 import React, { Suspense, lazy } from 'react' const LazyComp ...

  4. 深入理解React：懒加载（lazy）实现原理

    目录 代码分割 React的懒加载 import() 原理 React.lazy 原理 Suspense 原理 参考 1.代码分割 (1)为什么要进行代码分割? 现在前端项目基本都采用打包技术,比如 ...

  5. 成为高级 React 开发你需要知道的知识点

    简评:除了常见的 HOC 和 RenderProp 技巧,作者介绍了 7 个有用的知识点. 使用 Fragment 而不是 div 很多时候我们想要处理多个 component,但是 render 只 ...

  6. 如何实现 React 模块动态导入

    如何实现 React 模块动态导入 React 模块动态导入 代码分割 webpack & code splitting https://reactjs.org/docs/code-split ...

  7. React性能优化总结

    本文主要对在React应用中可以采用的一些性能优化方式做一下总结整理 前言 目的 目前在工作中,大量的项目都是使用react来进行开展的,了解掌握下react的性能优化对项目的体验和可维护性都有很大的 ...

  8. react 项目的性能优化

    react 项目的性能优化有哪些? 1.react 模块化处理 就是将react内容进行模块化划分,一个模块一个组件,react更新机制是组件重新更新 2.在react项目中更新数据,不要直接将 us ...

  9. 2023 年最新最全的 React 面试题

    React 作为前端使用最多的框架,必然是面试的重点.我们接下来主要从 React 的使用方式.源码层面和周边生态(如 redux, react-router 等)等几个方便来进行总结. 1. 使用方 ...

  10. 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（三）

    前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...

随机推荐

  1. 读写可编程 SIM/USIM 卡

    目录 文章目录 目录 SIM 卡 USIM 卡 USIM 卡的关键参数 pySim 读写软件与 ADM key SIM 卡 SIM 卡,用户身份模块(Subscriber Identity Modul ...

  2. Django 自定义管理命令：从入门到高级

    title: Django 自定义管理命令:从入门到高级 date: 2024/5/16 18:34:29 updated: 2024/5/16 18:34:29 categories: 后端开发 t ...

  3. C# 程序集、模块和类型概念及关系

    目录 C# 程序集.模块和类型概念及关系 概述 程序集 模块 类型 程序集.模块和类型的关系 总结 引用 C# 程序集.模块和类型概念及关系 概述 在 C# 中,程序集.模块和类型是构成 .NET 应 ...

  4. java学习之旅（day.03）

    整数拓展: 进制 二进制:以0b开头 十进制:我们生活中的正常数 int i=10 八进制:以0开头 int i=010 十六进制:以0x开头 0~9 A~F int i=0x10 浮点数拓展: fl ...

  5. flask注册功能

    一个项目的简单结构划分 首先创建一个新项目 可以正常运行与访问 创建配置文件并添加配置. 将这里拆分到不同的文件中,让启动文件更加简洁. 创建一个apps包,导入配置模块,导入Flask,定义创建ap ...

  6. QShop商城--项目介绍

    QShop商城-项目介绍 QShop商城,是全新推出的一款轻量级.高性能.前后端分离的电商系统,支持微信小程序,前后端源码100%开源,完美支持二次开发,让您快速搭建个性化独立商城. 技术架构:.Ne ...

  7. [NOIP2004 普及组] 火星人

    传送锚点:https://www.luogu.com.cn/problem/P1088 题目描述 人类终于登上了火星的土地并且见到了神秘的火星人.人类和火星人都无法理解对方的语言,但是我们的科学家发明 ...

  8. kubernetes命令补全k8s命令补全

    echo "source <(kubectl completion bash)" >> ~/.bashrc source <(kubectl complet ...

  9. 『手撕Vue-CLI』获取下载目录

    开篇 在上一篇文章中,简单的对 Nue-CLI 的代码通过函数柯里化优化了一下,这一次来实现一个获取下载目录的功能. 背景 在 Nue-CLI 中,我现在实现的是 create 指令,这个指令本质就是 ...

  10. 调试YOLOv3/YOLOv5过程中遇到的问题汇总

    今日立冬 yolov1 yolo1论文 https://www.bilibili.com/video/BV15w411Z7LG yolo2论文 https://www.bilibili.com/vid ...