react 加载状态Suspense
介绍
在组件加载完成之前显示自定义的加载状态,需要搭配lazy()
进行动态导入
lazy()用法:
import { lazy } from 'react'
const Component = lazy(()=> import('component/path'))
举例:
等待CompB组件加载完成之前显示Loading...
// components/CompB.tsx
import { useCallback, useState, Suspense, useEffect } from 'react'
//import type { IPosts } from './types'
interface IPosts {
userId: string,
title: string,
body: string
}
function usePosts () {
const [data, setData] = useState([])
const getData = useCallback(() =>
fetch('https://jsonplaceholder.typicode.com/posts').then(async (data) => setData(await data.json()))
, [data])
return [data, getData]
}
export default function CompB () {
const [data, setData] = usePosts()
return <>
<button onClick={ () => setData() }>getJSON</button>
<ul>
{
(data as Array<{ userId: string, title: string, body: string, id: number }>).map((_) => {
return (
<li key={ _.userId + _.id }>
<p>{ _.id }</p>
<p>{ _.title }</p>
<p>{ _.body }</p>
</li>
)
})
}
</ul>
</>
}
// app.tsx
import { lazy } from 'react'
import CompA from './components/CompA'
// 动态加载组件
const CompB = lazy(() => import('./components/CompB'))
interface IPosts {
userId: string,
title: string,
body: string
}
function App () {
return <>
<Suspense fallback={<h2>Loading...</h2>}>
<CompB />
</Suspense>
</>
}
export default App