在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. IDEA不能搜索插件解决方案

    前言 平时在idea中搜索插件的时候,总是加载半天都不出,最后加载好久什么也没搜到,看到一篇大佬的解决博客,完美解决现将解决步骤分享如下: 1.首先打开系统设置,选择 Pligins,点击设置按钮(用 ...

  2. Oracle中ALTER TABLE的五种用法（一）

    首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1 ...

  3. 海康威视web插件安装后，谷歌浏览器还是不能看视频问题

    首先要根据弹出的信息提示,下载并安装视频播放插件, 安装完成后重新打开谷歌浏览器,重新登录系统,如果还是不能看视频,请按下面的方法设置: 步骤1:谷歌浏览器,地址栏中输入:chrome://flags ...

  4. Flutter 多线程实现

    异步Isolate实现多线程   最近在看Flutter开发相关知识点,对照着Android原生,探究了下多线程实现方式.在Flutter中有 Isolate,隔离,它的实现原理并不是内存共享的,它更 ...

  5. 用 C 语言开发一门编程语言 — 语法解析器

    目录 文章目录 目录 前文列表 编程语言的本质 词法分析 语法分析 使用 MPC 解析器组合库 安装 快速入门 实现波兰表达式的语法解析 波兰表达式 正则表达式 代码实现 前文列表 <用 C 语 ...

  6. Linux/Golang/glibC系统调用

    Linux/Golang/glibC系统调用 本文主要通过分析Linux环境下Golang的系统调用,以此阐明整个流程 有时候涉略过多,反而遭到质疑~,写点文章证明自己实力也好 Golang系统调用 ...

  7. uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统

    原创vue3+uniapp+uni-ui跨端仿ios桌面后台OA管理模板Uni-Vue3-WeOS. uniapp-vue3-os一款基于uni-app+vite5.x+pinia等技术开发的仿ios ...

  8. Vue cli之安装

    1.安装node.js Node.js是一个新的后端(后台)语言,它的语法和JavaScript类似,所以可以说它是属于前端的后端语言,后端语言和前端语言的区别: 运行环境:后端语言一般运行在服务器端 ...

  9. Android 13 - Media框架（20）- ACodec（二）

    关注公众号免费阅读全文,进入音视频开发技术分享群! 这一节开始我们就来学习 ACodec 的实现 1.创建 ACodec ACodec 是在 MediaCodec 中创建的,这里先贴出创建部分的代码: ...

  10. Android 13 - Media框架（8）- MediaExtractor（2）

    关注公众号免费阅读全文,进入音视频开发技术分享群! 上一篇 MediaExtractor 笔记中我们学习了 extractor 以及 source 调用的层次结构,这一节我们会看一看部分的实现细节. ...