react 组件：Suspense

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

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

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

当内容正在加载时显示后备方案

你可以使用 Suspense 边界包裹你应用的任何部分：

<Suspense fallback={<Loading />}>
  <Albums />
</Suspense>
React 将展示 后备方案 直到  children  需要
的所有代码和数据都加载完成。

只有启用了 Suspense 的数据源才会激活 Suspense 组件，它们包括：
支持 Suspense 的框架如 Relay 和 Next.js。
使用 lazy 懒加载组件代码。
使用 use 读取 Promise 的值。
Suspense 无法 检测在 Effect 或事件处理程序中获取数据的情况。
在上面的 Albums 组件中，正确的数据加载方法取决于你使用的框架。如果你使用了支持 Suspense 的框架，你会在其数据获取文档中找到详细信息。
目前尚不支持在不使用固定框架的情况下进行启用 Suspense 的数据获取。实现支持 Suspense 数据源的要求是不稳定的，也没有文档。React 将在未来的版本中发布官方 API，用于与 Suspense 集成数据源。

同时展示内容

默认情况下，Suspense 内部的整棵组件树都被视为一个单独的单元。例如，即使 只有一个 组件因等待数据而被挂起，Suspense 内部的整棵组件树中的 所有 的组件都将被替换为加载中指示器：

<Suspense fallback={<Loading />}>
  <Biography />
  <Panel>
    <Albums />
  </Panel>
</Suspense>

逐步加载内容

当一个组件被挂起时，最近的父级 Suspense 组件会展示后备方案。这允许你嵌套多个 Suspense 组件创建一个加载序列。每个 Suspense 边界的后备方案都会在下一级内容可用时填充。例如，你可以给专辑列表设置自己的后备方案

<Suspense fallback={<BigSpinner />}>
  <Biography />
  <Suspense fallback={<AlbumsGlimmer />}>
    <Panel>
      <Albums />
    </Panel>
  </Suspense>
</Suspense>
调整之后，Biography 不需要“等待” Albums 加载完成
就可以展示。

加载序列将会是：
1)如果 Biography 没有加载完成，BigSpinner 会显示在整个内容区域的位置。
2)一旦 Biography 加载完成，BigSpinner 会被内容替换。
3)如果 Albums 没有加载完成，AlbumsGlimmer 会显示在 Albums 和它的父级 Panel 的位置。
4)最后，一旦 Albums 加载完成，它会替换 AlbumsGlimmer。

在新内容加载时展示过时内容

一个常见的替代 UI 模式是 延迟 更新列表，并在新的结果准备好之前，总是显示之前的结果。useDeferredValue Hook 允许你传递一个延迟版本的查询：
export default function App() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}

阻止隐藏已经显示的内容

表明 transition 正在发生

在上面的例子中，当你点击按钮，没有任何视觉指示表明导航正在进行。为了添加指示器，你可以用 useTransition 替换 startTransition，它会给你一个布尔值 isPending。在下面的例子中，它被用于当 transition 发生时改变网站头部的样式：

在导航时重置 Suspense 边界

为服务器错误和客户端内容提供后备方案

如果你使用过 流式服务器渲染 API（或依赖它们的框架），React 也会使用你的 <Suspense> 边界来处理服务器上的错误。如果组件在服务器上抛出错误，React 将不会中止服务器渲染。相反，它将找到最接近的 <Suspense> 组件并将其后备方案（例如一个加载中指示器）包含到生成的服务端 HTML 中。用户将首先看到一个加载中指示器。