React Suspense 应用场景及原理分析

React Suspense 应用场景及原理分析

Suspense和lazy()搭配实现代码分割

React.lazy()

顾名思义lazy()方法是用来对项目代码进行分割,懒加载用的.只有当组件被加载,内部的资源才会导入

为什么需要懒加载

在React的项目中import导入其他组件和库都是默认在初始直接导入的,webpack等打包工具会将import导入的文件直接合并到一个大文件中,如果项目很大,打包完后初始化加载时需要加载的文件会很大,这时候就需要代码分割

如何进行代码分割

在你的应用中引入代码分割的最佳方式是通过动态 import() 语法

静态导入：

import OtherComponent from './OtherComponent';

动态导入：

import("./OtherComponent").then(value => {
  console.log(value);
});

使用了动态导入之后，webpack检测到这种语法会自动代码分割，也就是压缩到两个文件里

React.lazy()就是对这个种动态导入方式的优化方法

React官网给出的用法

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你也可以用一个 Suspense 组件包裹多个懒加载组件。

lazy()返回的是组件的Promise对象，当组件为pending时显示的是Suspense中fallback的内容，只有resolve才显示加载好的组件，rejected时抛出错误。

这非常有助于缩减 bundle 的体积，并延迟加载在初次渲染时未用到的组件。

Suspense异步请求数据

目前在React 18中，您可以开始在像Relay、Next.js、 Hydrogen、 Remix这些框架中使用Suspense异步请求来获取数据。Ad hoc（即席查询）获取数据的方式在技术上是可行的，但仍不建议将其作为一般策略。

Suspense应用场景总结

第一种：动态导入组件(如上)

第二种：异步请求数据

优点

好处在于我们可以不用创建一些组件状态的变量来控制是否显示loading画面和真正组件，这部分逻辑直接由Suspense内部实现。

👍🏻还有一种场景就是当一个父组件中，有多个动态加载的组件，Suspense可以直接将loading状态聚合，只有当所有组件加载完成才显示，这里免去了多个loading的逻辑判断。