React 19.2.0 有哪些新变化

我有一支技术全面、经验丰富的小型团队，专注高效交付中等规模外包项目，有需要外包项目的可以联系我

React 19.2.0 带来了多项关键增强：更细粒度地掌控组件生命周期、更高效的渲染优化，以及更顺滑的服务端渲染（SSR）流程。本次发布是过去一年继 React 19 与 React 19.1 之后的第三次迭代，为开发者提供了构建更快、更节能、且可保留状态应用的新原语与新工具。

下面逐项拆解这些更新，并看看它们如何帮助你重塑开发体验、提升应用效率。

新特性一览

Activity：可见性与优先级的场景化控制

全新的 <Activity> 组件用于将应用划分为彼此独立的"活动区域 "，每个区域都可以单独设定优先级 与可见性 。相比简单的条件渲染，它更适合需要持久化状态的场景（例如暂时不在视口内但需要保留输入与滚动位置的页面）。

go 复制代码

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

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

React 19.2 为 <Activity> 提供两种核心模式：

hidden：子节点被隐藏、Effect 被卸载，更新会延后到 React 空闲时再处理。
visible：子节点展示、Effect 挂载，更新按常规节奏处理。

这对"后台工作"尤为适用：例如为下一步导航预加载 组件或数据，或在视图切换时保留表单与滚动状态。

useEffectEvent：把"事件"从 Effect 依赖里解耦

一个常见复杂点在于：为了拿到最新的 props/state，我们常把它们加入 Effect 的依赖数组，结果导致 Effect 反复重跑。useEffectEvent 通过引入"事件处理器 "的概念，把回调放到 Effect 的依赖追踪之外，从而保留最新闭包而不触发额外执行。

使用 useEffectEvent 创建的函数总能拿到最新的 props 与 state ，但它不计入宿主 Effect 的依赖。

go 复制代码

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    // 总能拿到最新 theme，
    // 且不会因为 theme 变化而让下面的 effect 重跑
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected(); // 调用事件函数
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ 'onConnected' 被正确地排除
  // ...
}

注意：需将工具链更新到 eslint-plugin-react-hooks@6.1.0 以正确识别该原语并执行相应的规约。

cacheSignal：服务端组件中的资源"寿命"管理

仅在 React Server Components 可用，cacheSignal() 会返回一个 AbortSignal。当组件的 cache() 作用域失效时，该信号会即时触发，从而中止或清理进行中的异步操作（比如耗时数据请求），以保证资源卫生。

信号会在以下生命周期节点触发：

渲染成功完成；
渲染被显式中止；
渲染发生失败。

go 复制代码

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

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

Chrome DevTools 的性能轨迹

React 19.2 在 Chrome DevTools 的 Performance 面板中新增自定义轨迹，帮助你洞察运行时特征：

Scheduler ⚛️：展示 React 内部任务调度的优先级区分（如"阻塞"的用户输入 vs "过渡"的低优先级任务）、更新的排序以及何时被打断。
Components ⚛️ ：可视化组件层级在一帧内的渲染与 Effect 执行路径，定位耗时组件更直观。

React DOM 新能力

部分预渲染（Partial Pre-rendering）：与 Resumption 协同加速首屏

为缩短首屏交付时间 ，部分预渲染允许你先输出静态 HTML 外壳 （可由 CDN 极快分发），随后再通过 Resumption "接力"把个性化动态数据 注入壳体。这样形成一个双阶段的部署流程：

阶段一：预渲染静态前奏（Prelude）

使用 prerender 生成初始静态 HTML（prelude）和延后状态（postponed），后者封装"剩余工作"。

go 复制代码

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

// 暂存 postponed 状态
await savePostponedState(postponed);

// 将 prelude 发送到客户端或 CDN

阶段二：恢复渲染（Resume）

用 resume 消费前述 postponed，补完渲染：

SSR 流式 ：resume（Web Streams）或 resumeToPipeableStream（Node Streams）

go 复制代码

const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);
// 将 resumeStream 发送到客户端

SSG 输出 ：resumeAndPrerender 直接产出完整静态文件

go 复制代码

const postponedState = await getPostponedState(request);
const { prelude: completeHTML } = await resumeAndPrerender(<App />, postponedState);
// 保存 completeHTML 到磁盘或 CDN

重要改动

SSR 的 Suspense 边界批量揭示

修复了一个行为差异：此前客户端渲染与流式 SSR 在 Suspense 的"揭示时机"上不一致。自 19.2 起，来自服务器的 Suspense 边界会被短暂批量 处理，使更多内容一起出现 ，与客户端渲染对齐。这也为后续 <ViewTransition> 的平滑过渡做准备（一次性揭示更大块内容，动画更自然）。

提示：React 使用启发式以避免批量处理损伤 Core Web Vitals 。例如当页面加载逼近 2.5s LCP 阈值，系统会跳过批量，以确保及时展示关键内容。

Node.js 环境下 SSR 的 Web Streams 支持

现在在 Node.js 中也官方支持以 Web Streams 进行流式 SSR，可使用：

renderToReadableStream
prerender
resume
resumeAndPrerender

⚠️ 注意坑点 ：在 Node.js 里仍强烈推荐 使用原生 Node Streams （如 renderToPipeableStream、resumeToPipeableStream）。它们通常更快，并且默认支持压缩；直接使用 Web Streams 可能会错过这些性能红利。

eslint-plugin-react-hooks v6

eslint-plugin-react-hooks@6.1.0 现已发布：

推荐预设默认采用 Flat config。
提供基于 React Compiler 的可选规则。

如果你要继续沿用旧式配置，请这样切换：

go 复制代码

- extends: ['plugin:react-hooks/recommended']
+ extends: ['plugin:react-hooks/recommended-legacy']

调整 `useId` 的默认前缀

useId 生成 ID 的默认前缀从 :r:（或 19.1 中的 <<r>>）改为 _r_。此改动旨在确保 ID 对现代 Web 特性有效，例如 view-transition-name CSS 属性及 XML 1.0 的命名规范，以更好支持 View Transitions。