react 组件：Suspense-CFANZ编程社区

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

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

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

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

同时展示内容

<Suspense fallback={<Loading />}>
  <Biography />
  <Panel>
    <Albums />
  </Panel>
</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 中。用户将首先看到一个加载中指示器。