懒加载组件

背景：页面中有些组件是根据某些条件进行渲染，没必要在页面顶部一开始就import，所以可以使用懒加载的方式，在适当的时候才进行渲染

const retry = (componentImport, retryNum) => new Promise((resolve) => {
    componentImport()
    .then(resolve)
    .catch((err) => {
        if (retryNum > 0) { 
            this.retry(componentImport, retryNum - 1).then(resolve); 
        } else if (err) { 
            上报错误
        }
    })
}

/** 
  * 懒加载组件失败重试方法 
  * @param {*} componentImport 动态引入方法 
  * @param {*} retryNum 重试次数，默认3次 
  * @returns 组件 
  */ 
  export const lazyLoadWithRetry = (componentImport, retryNum = 3) => React.lazy(() => retry(componentImport, retryNum));

使用实例

// 引入必要的 React.Suspense 
import { Suspense } from 'react'; 

// 使用懒加载方法引入组件 
const { lazyLoadWithRetry } = Util; 
const 组件 = lazyLoadWithRetry(() => import('../组件')); 
// 组件渲染 
// 使用要点：使用<Suspense></Suspense>组件将懒加载的组件包起来，
// 并且为<Suspense>组件添加一个fallback
// fallback 可以是一段 tsx/jsx 或者是一个组件实例，如<div/>,<Loading></Loading> 
<Suspense fallback={<div />}>
    <组件 /> 
</Suspense>