Suspense

一、认识

---

<Suspense> 允许在子组件完成加载前展示后备方案。

二、语法

---

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

• children: 真正的 UI 渲染内容。如果 children 在渲染中被挂起，Suspense 边界将会渲染 fallback。

• fallback: 真正的 UI 未渲染完成时代替其渲染的备用 UI，它可以是任何有效的 React 节点。后备方案通常是一个轻量的占位符，例如表示加载中的图标或者骨架屏。当 children 被挂起时，Suspense 将自动切换至渲染 fallback；当数据准备好时，又会自动切换至渲染 children。如果 fallback 在渲染中被挂起，那么将自动激活最近的 Suspense 边界。