React 19.2 已发布，现已上线 npm！

原文链接

react.dev/blog/2025/1...

这是我们过去一年中的第三次发布：继去年 12 月的 React 19 和 6 月的 React 19.1 之后。本文将为你概览 React 19.2 中的新特性，并重点介绍一些值得关注的变更。

新特性

`<Activity />`

<Activity> 让你可以将应用划分为可控、可优先级排序的「活动」。

它可以作为条件渲染的替代方案：

js 复制代码

// 之前
{isVisible && <Page />}

// 现在
<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

在 React 19.2 中，Activity 支持两种模式：visible 和 hidden。

hidden：隐藏子组件，卸载副作用，并延迟所有更新直到 React 空闲。
visible：正常渲染子组件，挂载副作用，并处理更新。

这意味着你可以预渲染并持续渲染隐藏部分，而不会影响屏幕上可见内容的性能。

场景示例：

预加载用户可能即将导航的页面。
保留用户返回时的输入状态。

未来我们会为 <Activity> 增加更多模式。

`useEffectEvent`

在 useEffect 中，一个常见模式是监听外部系统事件。例如，聊天房间连接成功时触发通知：

js 复制代码

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    return () => {
      connection.disconnect()
    };
  }, [roomId, theme]);
}

问题：theme 变化会导致 useEffect 重新执行，造成不必要的重连。

useEffectEvent 可以将事件处理逻辑从副作用中分离：

js 复制代码

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]); // ✅ 依赖声明简洁，事件函数无需依赖
}

类似 DOM 事件，Effect Event 始终能获取最新的 props 和 state。

⚠️ 注意：

不要将 useEffectEvent 函数加入依赖数组。
需要升级到 eslint-plugin-react-hooks@6.1.0，linter 会正确识别。
Effect Event 必须和其对应的 Effect 在同一个组件/Hook 内定义。

`cacheSignal`（仅限 React Server Components）

cacheSignal 可用于检测 $`cache()`$ 的生命周期是否结束：

js 复制代码

import {cache, cacheSignal} from 'react';
const dedupedFetch = cache(fetch);

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

它可帮助你在缓存结果不再使用时清理或中止工作：

渲染完成
渲染被中止
渲染失败

性能追踪（Performance Tracks）

React 19.2 为 Chrome DevTools 的性能面板新增了 React 专用追踪轨道：

Scheduler ⚛ 展示 React 处理的不同优先级任务（如用户交互 blocking、startTransition 内的 transition）。帮助理解任务调度、阻塞和渲染顺序。
Components ⚛ 展示组件树的渲染和副作用执行情况，包括挂载（Mount）、阻塞（Blocked）等。帮助定位性能瓶颈。

React DOM 新特性

部分预渲染（Partial Pre-rendering）

React 19.2 引入了「部分预渲染」：

可提前预渲染静态部分，放在 CDN 上。
后续恢复（resume）时再渲染动态内容。

流程示例：

js 复制代码

// 预渲染
const {prelude, postponed} = await prerender(<App />, {
  signal: controller.signal,
});
await savePostponedState(postponed);

// 恢复
const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);

值得注意的变更

Suspense 边界批处理（SSR）

修复了 SSR 下 Suspense 边界显示与客户端不一致的问题。 React 19.2 会将 Suspense 边界延迟少量时间后批量揭示，以便动画和内容显示更一致。

⚠️ React 使用启发式规则避免影响核心 Web Vitals，比如若接近 2.5s LCP 阈值，会立即揭示内容。

Node SSR 对 Web Streams 的支持

React 19.2 在 Node.js 中支持 Web Streams API：

renderToReadableStream
prerender
resume
resumeAndPrerender

⚠️ 推荐在 Node 环境优先使用 Node Streams，因为其性能更好并支持压缩。

`eslint-plugin-react-hooks` v6

新版本默认启用 Flat Config。
若需旧版配置，使用 recommended-legacy。
新规则与 React Compiler 深度集成。

`useId` 默认前缀变更

19.0: :r:
19.1: <<r>>
19.2: _r_

原因：支持 View Transitions 及 XML 1.0 兼容性。

Changelog 精选

react-dom: 支持为 hoistable styles 设置 nonce #32461。
react: 修复 useDeferredValue 无限循环、热更新栈溢出、React.lazy 内部使用 React.use 崩溃等问题 #33941。
react-dom: 修复嵌套 Suspense 渲染异常、ARIA 1.3 报警、渲染中断后挂起导致的卡死等 #34264。

React 19.2 已发布，现已上线 npm！