2. React 19 中的 Activity 组件与 Suspense 有什么区别？
来源：https://w0hog67yl81.feishu.cn/wiki/XoYJwZo5BiPUcdkDSfEcukmunof
采集状态：已完成正文采集；正文滚动至底部，按块及代码行号采集

Suspense 与 Activity: 解构 React 19 中两个核心边界的异同​

​

在 React 的世界中，用户体验的流畅性始终是核心议题。长久以来，<Suspense> 作为处理异步加载的基石，为我们管理组件的“等待”状态提供了有力的支持。随着 React 19 的到来，一个新的概念——<Activity>——进入了我们的视野。​

​

初看之下，<Activity> 和 <Suspense> 都与组件的“加载”或“过渡”状态有关，这可能会让一些开发者感到困惑。但实际上，它们的设计初衷和应用场景有着本质的区别。本文将深入剖析这两者的核心差异，并探讨它们如何协同工作，共同提升应用的交互体验。​

​

重温 <Suspense>：管理“内容未就绪”​

​

首先，我们来回顾一下已经相对熟悉的 <Suspense>。它的核心职责非常明确：在组件的数据或代码准备就绪之前，声明一个临时的替代 UI（fallback）。​

​

我们常常在以下两种场景中见到 <Suspense> 的身影：​

​

1.
代码分割（Code Splitting）: 通过 React.lazy() 动态加载组件。​

2.

数据获取（Data Fetching）: 在组件渲染所需的数据返回之前。

一个典型的 <Suspense> 用法如下：​

​

import { Suspense } from 'react';
import Albums from './Albums.js';

function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>🌀 Loading...</h2>;
}

​

在这段代码中，当 Albums 组件因为需要获取数据而“挂起”（suspend）时，React 会向上遍历组件树，找到最近的 <Suspense> 边界，并渲染其 fallback 属性中定义的 Loading 组件。直到 Albums 的数据准备完毕并成功渲染，<Suspense> 才会切换回显示其子组件。​

​

因此，我们可以将 <Suspense> 理解为：**一个关于“内容是否存在”的边界。** 它关心的是其子树是否已经准备好被渲染，如果尚未就绪，就展示一个占位符。​

​

引入 <Activity>：管理“UI 的活动状态”​

​

与 <Suspense> 不同，<Activity> 并不直接关心数据或代码是否加载完毕。它的核心职责是：管理 UI 元素的“活动”与“非活动”状态，尤其是在视图发生转换时。​

​

在 React 19 中，<Activity> 与新的 useActivity Hook 和 <ViewTransitions> API 紧密相关，其主要目标是优化页面状态变更时的视觉反馈。例如，当一个操作正在进行中（如页面跳转或数据提交），我们可能不希望立即移除旧的 UI，而是将其置于一个“非活动”但仍然可见的状态。​

​

想象一个场景：用户点击一个链接，从列表页跳转到详情页。在详情页数据加载完成之前，我们不希望屏幕完全变白或只显示一个加载指示器。更理想的体验是，列表页依然可见，但可能被置灰或覆盖一个半透明的加载动画，表示一个“即将离开”的状态。​

​

<Activity> 正是为了实现这种精细化的控制。它可以根据其包裹内容的 pending 状态，来决定是否显示或隐藏某些 UI 元素。​

​

// 概念性示例
function App() {
  const [isPending, startTransition] = useTransition();

  return (
    <div className={isPending ? 'inactive' : 'active'}>
      {/* ... content ... */}
    </div>
  );
}

​

在 React 19 之前，我们可能会像上面这样手动管理 isPending 状态来控制样式。而 <Activity> 将这种模式内置，并提供了更强大的能力，尤其是与 <ViewTransitions> 结合使用时，它可以协同管理 DOM 元素的显示、隐藏和动画，以创建无缝的过渡效果。​

​

核心区别：一场清晰的对比​

​

为了更直观地理解两者的差异，我们可以通过一个表格来进行对比：​

​

特性

	

<Suspense>

	

<Activity>

	

核心目标

	

处理异步操作的加载状态

管理 UI 元素的可见性与活动状态

	

触发机制

	

子组件因数据或代码未就绪而“挂起”（Suspend）

	

通常由 useTransition 或其他并发特性触发的 pending 状态

	

关注点

	

内容是否就绪（"Is the content ready?"）

	

UI 状态是否活跃（"Is the UI active?"）

	

典型场景

	

包裹需要获取数据的组件，显示加载指示器

	

在页面导航或状态更新期间，保持旧 UI 可见但置于“非活动”状态，以实现平滑过渡

	

用户体验

	

避免用户看到不完整的 UI，提供明确的“等待”反馈

	

减少生硬的加载状态切换，通过视觉过渡提升流畅感和上下文连续性

​

协同工作：Suspense 与 Activity 的组合​

​

Suspense 和 Activity 并非相互替代，而是相辅相成的关系。它们共同构成了 React 19 中更为强大的并发渲染工具箱。​

​

我们可以将它们结合起来，创造出极为流畅的用户体验。设想一个经典的导航场景：​

​

1.
用户在 HomePage 点击一个链接，导航至 DetailsPage。​

2.
该导航操作被包裹在 startTransition 中，这会产生一个 pending 状态。​

3.
一个顶层的 <Activity> 组件可以捕获到这个 pending 状态，它决定在过渡期间不立即卸载 HomePage，而是将其标记为“非活动”（例如，降低透明度）。​

4.
同时，DetailsPage 开始渲染。它内部有一个 <Suspense> 边界，因为 DetailsPage 需要获取自己的数据。​

5.
在数据获取期间，DetailsPage 内部的 <Suspense> 显示其 fallback（例如一个骨架屏）。​

6.
重要的是，由于整个过程是并发的，用户在 DetailsPage 数据加载时，看到的可能是半透明的 HomePage 上叠加了 DetailsPage 的骨架屏，而不是一次突兀的屏幕内容切换。​

7.

当 DetailsPage 的数据加载完成，<Suspense> 边界消失，显示完整内容的 DetailsPage。与此同时，pending 状态结束，<Activity> 最终将 HomePage 卸载，完成了整个平滑的视图过渡。

结论​

​

总而言之，<Suspense> 和 <Activity> 为我们提供了在不同维度上控制 UI 状态的能力：​

​

•
<Suspense> 关注的是**异步内容的加载**。它是一个关于“有”或“没有”的边界，确保用户不会看到渲染不完整的内容。​

•

<Activity> 关注的是**UI 状态的过渡**。它是一个关于“活跃”或“非活跃”的边界，旨在让状态切换的过程更加平滑和自然。

理解这两者的区别与联系，是掌握 React 19 并发特性的关键。通过将它们巧妙地结合起来，我们能够构建出响应更迅速、过渡更优雅、用户体验更上一层楼的现代化 Web 应用。这不仅是技术的演进，更是 React 对构建高质量用户界面不懈追求的体现。​

​