React 19.2 已发布,现已上线 npm!
原文链接
这是我们过去一年中的第三次发布:继去年 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 兼容性。