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...

引用