兼而有之的构建魅力：用Suspense将React.lazy组件嵌套体现收益

前端

2023-09-24 08:02:16

数据分离的目的

其实当我们在使用 React 的时候，项目一启动就会把所有的依赖的 JS 文件一起全部加载下来，造成页面很大的可能，对首屏展示造成很大的影响。为了解决这样的问题，我们引入了代码分离。

代码分离能够解决的问题主要有以下两个：

按需加载：随着项目的不断发展，我们可能会有越来越多的页面和组件，当用户进入一个特定的页面时，我们只需要加载与之相关的组件，而不用把项目所有的组件全部加载下来，这样做可以提高页面的加载速度，节省用户的流量。
缓存：当我们把组件拆分成一个个独立的文件时，我们可以对这些文件进行缓存，这样当用户下次访问相同页面时，浏览器可以直接从缓存中加载这些文件，而不用再次从服务器端下载。

React.lazy 和 Suspense

在 React 16.6 中，引入了两个新的 API：React.lazy 和 Suspense。

React.lazy 可以让我们将组件的加载延迟到需要的时候再进行，这对于大型项目来说是一个非常有用的功能。
Suspense 可以让我们在等待组件加载完成时显示一个加载指示器，从而改善用户体验。

我们知道在 React 中，组件通常是以如下方式引入的：

import MyComponent from './MyComponent';

使用 React.lazy，我们可以将组件的加载延迟到需要的时候再进行，如下所示：

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

当我们使用 React.lazy 加载组件时，我们需要在组件所在的位置使用 Suspense 来包裹它，如下所示：

function MyComponent() {
  return (
    <Suspense fallback={<Loading />}>
      <MyComponent />
    </Suspense>
  );
}

这样，当 MyComponent 加载完成之前，Suspense 会显示 Loading 组件。

Suspense 与 React.lazy 组件的嵌套

Suspense 不仅可以支持懒加载组件，还可以支持嵌套懒加载组件。

function MyComponent() {
  return (
    <Suspense fallback={<Loading />}>
      <Suspense fallback={<Loading />}>
        <MyComponent />
      </Suspense>
    </Suspense>
  );
}