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
相关推荐
wifi歪f2 小时前
🎨 探究Function Calling 和 MCP 的奥秘
前端·ai编程·mcp
sheji34163 小时前
【开题答辩全过程】以 Web数据挖掘在电子商务中的应用研究为例,包含答辩的问题和答案
前端·人工智能·数据挖掘
whltaoin3 小时前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
敲敲敲-敲代码3 小时前
web系统(asp.net和C#)
前端·c#·asp.net
IT_陈寒3 小时前
Python开发者必坑指南:3个看似聪明实则致命的‘优化’让我损失了50%性能
前端·人工智能·后端
初圣魔门首席弟子4 小时前
c++中this指针使用bug
前端·c++·bug
AI视觉网奇9 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1239 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡12 小时前
React Native 中的 useCallback
javascript·react native·react.js