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