React中Suspense和lazy的使用

原创

挥刀北上

修改于 2021-11-01 07:35:09

3.9K00

代码可运行

文章被收录于专栏：Node.js开发Node.js开发

运行总次数：0

代码可运行

何时使用lazy函数，比如某个体积相对比较大的第三方库或插件（比如JS版的PDF预览库）只在单页应用（SPA）的某一个不是首页的页面使用了，这种情况就可以考虑代码分割，增加首屏的加载速度。

lazy函数可以单独使用，但是在加载组件时候，页面可能会出现空白，此时需要添加loading，这时就需要suspense了，代码如下：

const Foo = React.lazy(() => import('../componets/Foo));
<Foo />

上面的代码直接在函数中使用Foo组件页面加载时会出现白屏，所以需要suspense来包裹，代码如下：

<React.Suspense fallback={<div>loading...</div>}>
    <Foo/>
</React.Suspense>

例子2：

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

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

OtherComponent是通过懒加载加载进来的，所以渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互。在<OtherComponent />外面使用Suspense标签，并在fallback中声明OtherComponent加载完成前做的事，即可优化整个页面的交互
fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

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>
  );
}