Suspense

处理异步组件的加载状态，在子组件异步操作完成前显示 fallback 内容。

Props

ts
interface SuspenseProps {
  children: View
  fallback?: View
  onResolved?: () => void
}
属性类型说明
childrenView子内容
fallbackView加载中显示的占位内容
onResolved() => void所有异步操作完成后的回调

示例

tsx
import { Suspense, lazy } from 'vitarx'

const AsyncComponent = lazy(() => import('./AsyncComponent'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncComponent />
    </Suspense>
  )
}

INFO

当 Suspense 与 Lazy 组件配合使用时，Suspense 的 fallback 优先级高于 Lazy 的 loading 选项。

参考：Suspense 详解