懒加载组件

如果一个组件需要先请求到数据，才显示内容，等待的过程使用 Loading 组件，这种可以利用 React.Suspense & React.lazy 来做。

React.lazy

React.lazy 接受的参数类型：

type LazyAble = () => Promise<{ default: any }>

常用的做法是利用 import 函数导入组件文件，组件文件必须有一个默认导出

React.lazy(import("/components/view"))

或者

React.lazy(async () => {
  return {
    default: () => <View />
  }
})

这样的话，是不是可以在 async return 前做一些异步请求呢?

LazyCom

async return 前等待 await promise，将结果传给 children。

使用 render children

export interface LazyCom<T> {
  await: Promise<T>
  fallback: React.ReactNode
  children: (response: T) => JSX.Element
}

那么就有了：

export function LazyCom<T>({ children, await: wait, fallback }: LazyCom<T>) {
  const Com = React.lazy(async () => {
    const com = await wait
    return {
      default: () => children(com)
    }
  })

  return (
    <React.Suspense fallback={fallback}>
      <Com />
    </React.Suspense>
  )
}

完整代码