React中异步模块api React.lazy和React.Suspense

Posted App_z

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React中异步模块api React.lazy和React.Suspense相关的知识,希望对你有一定的参考价值。

React.lazy

React.lazy 这个函数需要动态调用 import()。它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut export 的 React 组件。

然后应在 React.Suspense 组件中渲染 lazy 组件,如此使得我们可以使用在等待加载 lazy 组件时做优雅降级(如 loading 指示器等)。

比如:

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

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

React.Suspense

React.Suspense 一般用于包裹lazy组件使得组件可以“等待”某些操作结束后,再进行渲染。
通过fallback 可以指定加载指示器(loading indicator),以防其组件树中的某些子组件尚未具备渲染条件。
可以用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>
  );
}


React.lazy 目前只支持 default exports ,一个文件中export 了多个模块,则需要创建一个中间模块,来重新导出为默认模块。这能保证 tree shaking 不会出错,并且不必引入不需要的组件。

//ManyComponent.js

export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

以上是关于React中异步模块api React.lazy和React.Suspense的主要内容,如果未能解决你的问题,请参考以下文章

react懒加载(lazy, Suspense)

react懒加载(lazy, Suspense)

react懒加载(lazy, Suspense)

使用 React Suspense 和 React.lazy 子组件进行 Jest/Enzyme 类组件测试

如何在 Gatsby 中使用 React.lazy

如何在 React.lazy 和 Suspense 中获取加载进度