当前位置：首页 > news >正文

React.lazy与Suspence实现延迟加载

news 来源：原创 2024/10/11 5:40:19

React.lazy与Suspence实现延迟加载

1 代码分割
2 React.Lazy
3 Suspense
4 备注

1 代码分割

代码分割能够创建多个包并在运行时动态加载，它能够帮助我们“懒加载”当前用户所需要的内容，能够显著地提高应用性能。

尽管并没有减少应用整体的代码体积，但可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。

2 React.Lazy

React.Lazy()可以通过代码分割延迟加载组件，它能让我们像渲染常规组件一样动态引入组件。

它接受一个函数，这个函数需要动态调用import()。它必须返回一个Promise，该Promise需要resolve一个default export的React组件。

使用之前，我们是这样引入组件的：

import BComponent from "./BComponent";

使用之后，我们就可以这样引入组件：

const BComponent = React.lazy(() => import("./BComponent"));

3 Suspense

Suspense是一个延迟函数所必须的组件，通常用来包裹住延迟加载组件。多个延迟加载的组件可被包在一个suspense组件中。它提供了一个fallback属性，用来在组件的延迟加载过程中展示我们想展示的react元素，比如loading状态等。

当我们使用React.Lazy()引入一个组件之后，就应该搭配Suspense来使用，具体用法如下：

import React from "react";
const BComponent = React.lazy(() => import("./BComponent"));
const CComponent = React.lazy(() => import("./CComponent"));

const AComponent = () => {
    return (
        <>
            <React.Suspense fallback={<div>loading...</div>}>
                <BComponent />
                <CComponent />
            </React.Suspense>
        </>
    )
}

export default AComponent;