React ReactNative通用异步引入组件解决方案

实际开发中,难免会遇到一个页面会依赖很多组件的,但都是通过接口下发的条件进行动态引入的。

React已经为我们提供了一种异步引入组件的通用方法,上代码:

import React, { Suspense } from "react";

const LazyLargeComponent = React.lazy(() => {
  return new Promise(resolve => setTimeout(resolve, 5 * 1000)).then(
    () => import("../components/LargeComponent")
  );
});

export default function LargeComponent() {
  return (
    <div>
        <Suspense fallback={<div>loading...</div}>
          <LazyLargeComponent />
        </Suspense>
    </div>
  );
}
  • React.lazy()将一个函数作为其参数,该函数必须通过调用import()来加载组件来返回promise。返回的Promise解析为带有默认导出的模块,其中包含React组件。您也可以为其创建HOC并重新使用它。
  • Suspense的fallback属性,提供组件加载前过程中展示的占位组件,比如Loading...

引用

展示评论