React 19.2 于2025年10月1日正式发布。该版本引入了多项新功能和显著改进，为开发者带来了更强大的工具和更好的性能优化能力。

新增 React 特性

<Activity />组件

<Activity />允许你将应用程序分解为可以控制和优先处理的”活动”部分。这个组件可以作为条件渲染页面部分的替代方案：

1
2
3
4
5
6
7
8
9
// 之前
{
  isVisible && <Page />;
}

// 之后
<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>;

在React 19.2中，<Activity /> 支持两种模式：visible（可见）和 hidden（隐藏）：

  • hidden: 隐藏子元素，卸载效果，并推迟所有更新，直到 React 没有其他工作要处理。
  • visible: 显示子元素，挂载效果，并允许正常处理更新。

这意味着你可以预渲染并继续渲染应用程序中隐藏的部分，而不会影响屏幕上可见内容的性能。你可以使用 <Activity /> 渲染用户可能接下来会导航到的隐藏部分，或保存用户导航离开时部分的状态。这通过在后台加载数据、CSS和图像来帮助加快导航速度，并允许返回导航保持状态，如输入字段。

useEffectEvent

useEffectEvent 是解决 useEffect 中一个常见模式的工具，用于通知应用代码来自外部系统的某些”事件”。例如，当聊天室连接时，你可能想要显示通知。

传统方法的问题在于，内部”事件”使用的任何值的更改都会导致周围的 Effect 重新运行。例如，更改主题会导致聊天室重新连接。这对于与 Effect 逻辑本身相关的值（如 roomId）是有意义的，但对于 theme 则没有意义。

使用 useEffectEvent ，你可以将”事件”部分的逻辑从发出它的 Effect 中分离出来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ 所有依赖项已声明（Effect Events 不是依赖项）
  // ...
}

类似于DOM事件，Effect Events 始终”看到”最新的 props 和 state。

cacheSignal

cacheSignal 仅用于 React 服务器组件。它允许你知道 cache() 生命周期何时结束：

1
2
3
4
5
6
import { cache, cacheSignal } from 'react';
const dedupedFetch = cache(fetch);

async function Component() {
  await dedupedFetch(url, { signal: cacheSignal() });
}

这允许你在缓存不再使用结果时清理或中止工作，例如：

  • React 已成功完成渲染
  • 渲染被中止
  • 渲染失败

性能追踪（Performance Tracks）

React 19.2 在 Chrome DevTools 性能配置文件中添加了一组新的自定义轨道，为你的 React 应用性能提供更多信息：

调度器（Scheduler）轨道

显示 React 正在处理的不同优先级的工作，如针对用户交互的 “blocking” 或针对 startTransition 内更新的 “transition” 。在每个轨道内部，你将看到正在执行的工作类型，如调度更新的事件以及该更新渲染发生的时间。

组件（Components）轨道

显示 React 正在处理以进行渲染或运行效果的组件树。在内部，你会看到诸如 “Mount” 标签表示子项挂载或效果被挂载，或 “Blocked” 表示由于让位于 React 之外的工作而阻塞渲染。

新增 React DOM 特性

部分预渲染（Partial Pre-rendering）

在 React 19.2 中，添加了一个新功能，允许提前预渲染应用程序的一部分，然后稍后恢复渲染。

这个功能被称为”部分预渲染”，允许你预渲染应用程序的静态部分并从 CDN 提供服务，然后稍后恢复渲染外壳以填充动态内容。

要预渲染稍后恢复的应用程序，首先使用 AbortController 调用 prerender：

1
2
3
4
5
6
7
8
const { prelude, postponed } = await prerender(<App />, {
  signal: controller.signal
});

// 保存延迟状态以供后续使用
await savePostponedState(postponed);

// 发送前奏到客户端或CDN

然后，你可以将前奏返回给客户端，随后调用 resume 以”恢复”到 SSR 流：

1
2
3
4
const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);

// 将流发送到客户端

或者你可以调用 resumeAndPrerender 以恢复以获取静态 HTML 进行 SSG：

1
2
3
4
const postponedState = await getPostponedState(request);
const { prelude } = await resumeAndPrerender(<App />, postponedState);

// 将完整的HTML前奏发送到CDN

值得注意的变更

服务端渲染中的 Suspense 边界批处理

修复了一个行为错误，即 Suspense 边界的显示会根据它们是在客户端还是服务器端流式渲染时而有所不同。

从 React 19.2 开始，React 将短暂地批处理服务器渲染的 Suspense 边界的显示，以允许更多内容一起显示，并与客户端渲染行为对齐。

服务端渲染：Node 的 Web Streams 支持

增加了对 Node 环境 Web Streams API 的支持，使得服务端渲染更加高效。

eslint-plugin-react-hooks v6

更新了 React Hooks 的 ESLint 插件，以支持新的 useEffectEvent 语法，并确保不会将 Effect Events 误添加到依赖数组中。

更新默认 useId 前缀

调整了 useId 生成 ID 的默认前缀，使其更符合现代 Web 开发需求。

总结

React 19.2 的发布标志着 React 生态系统持续发展的又一重要里程碑。新加入的 <Activity /> 组件为应用状态管理提供了更精细的控制方式；useEffectEvent 解决了 Effect 依赖管理的经典问题；部分预渲染功能进一步提升了应用性能和用户体验；而性能追踪工具则为开发者提供了更深入的性能分析能力。

这些改进不仅提高了 React 应用的性能和可维护性，也为未来 React 的发展奠定了基础。特别是 <Activity /> 组件的设计理念，预示着 React 在应用架构方面的新方向，未来可能会增加更多模式以满足不同场景的需求。