预加载远程组件

30 阅读1分钟
const loadComp = () => import('xxx')
const LazyComp = lazy(loadComp)

const Comp: FC = () => {
  const { data } = useRequest(async () => {
    return 'xxx'
  })
  if (!data) return <Skeleton active />
  return <LazyComp data={data} />
}

这段代码中 直到data加载完毕 LazyComp才会开始加载
将这段代码加入组件中 就可以在较早的时机开始加载远程组件

  useEffect(() => {
    loadComp()
  }, [])

直接在组件函数中调用loadComp效果相同 不会发起额外的网络请求 但是在语义上不如effect