React 19.2 已发布,现已上线 npm!

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 支持两种模式:visiblehidden

  • 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
相关推荐
水星梦月8 小时前
跨平台开发中的图形渲染:Canvas与View+CSS的性能分析与决策路径
前端·css·图形渲染·canvas
yuanyxh8 小时前
前端仔的一次运维实践
linux·运维·前端
望获linux11 小时前
【Linux基础知识系列:第一百五十九篇】磁盘健康监测:smartctl
linux·前端·数据库·chrome·python·操作系统·软件
十一吖i12 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
冰暮流星13 小时前
css之线性渐变
前端·css
徐同保13 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
mapbar_front13 小时前
大厂精英为何在中小公司水土不服?
前端
生莫甲鲁浪戴14 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
2501_9160088916 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu17 小时前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范