当前位置：首页 > news >正文

React 19.2.0: 新特性与优化深度解析

news 2025/10/11 7:20:43

1 概述

React 19.2.0 于 2025 年 10 月 1 日正式发布，作为 React 团队在过去一年中的第三个重要版本，它带来了诸多令人兴奋的新特性和性能优化 [1]。此版本旨在进一步提升开发者体验、优化应用性能，并为未来的 React 发展奠定基础。本文将深入探讨 React 19.2.0 的主要新特性、React DOM 的改进以及一些值得关注的变更，并通过代码示例帮助读者更好地理解和应用这些更新。

2 新的 React 特性

2.1 `<Activity />` 组件

<Activity /> 是 React 19.2.0 中引入的一个全新组件，它允许开发者将应用程序划分为不同的“活动”单元，并对这些单元进行控制和优先级管理。其核心作用在于优化组件的可见性和渲染优先级，尤其适用于需要预加载或在后台维护状态的场景。

<Activity /> 组件支持两种模式：visible 和 hidden。

hidden: 隐藏其子组件，卸载其 Effects，并推迟所有更新，直到 React 没有其他可见任务需要处理。
visible: 显示其子组件，挂载其 Effects，并允许更新正常处理。

这意味着开发者可以在不影响屏幕上可见内容性能的情况下，预渲染和持续渲染应用程序的隐藏部分。例如，可以使用 <Activity /> 来渲染用户可能即将导航到的隐藏部分，或者在用户离开某个页面时保存其状态（如输入字段），从而通过在后台加载数据、CSS 和图片来加快导航速度，并允许返回导航时保持状态。

以下是使用 <Activity /> 的示例：

// Before
{isVisible && <Page />}// After
<Activity mode={isVisible ? 'visible' : 'hidden'}><Page />
</Activity>

2.2 `useEffectEvent` Hook

useEffectEvent 是一个旨在解决 useEffect 依赖项问题的 Hook。在 useEffect 中，当 Effect 内部使用的任何值发生变化时，Effect 都会重新运行。这对于与 Effect 逻辑本身相关的依赖项（如 roomId）是合理的，但对于一些“事件”回调（如 theme 变化时触发的通知）则可能导致不必要的 Effect 重复执行，甚至引发连接重置等问题。

useEffectEvent 允许开发者将这些“事件”逻辑从 Effect 中分离出来。它类似于 DOM 事件，总是“看到”最新的 props 和 state，而不会导致 Effect 重新运行。需要注意的是，useEffectEvent 返回的函数不应被声明为 Effect 的依赖项。为了正确使用，需要将 eslint-plugin-react-hooks 升级到 6.1.1 版本，以避免 linter 错误。

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]) // ✅ All dependencies declared (Effect Events aren't dependencies)// ...
}

2.3 `cacheSignal`

cacheSignal 是一个与 React Server Components 配合使用的新 API，它允许开发者了解 cache() 生命周期何时结束。这对于在缓存结果不再被使用时进行清理或中止工作非常有用，例如当 React 完成渲染、渲染被中止或渲染失败时。

import { cache, cacheSignal } from 'react'const dedupedFetch = cache(fetch)async function Component() {await dedupedFetch(url, { signal: cacheSignal() })
}

2.4 性能追踪 (Performance Tracks)

React 19.2.0 在 Chrome DevTools 性能配置文件中添加了一组新的自定义追踪轨道，以提供关于 React 应用程序性能的更详细信息。这些追踪轨道包括：

Scheduler ⚛: 显示 React 在不同优先级（如用户交互的“blocking”或 startTransition 内部更新的“transition”）下正在进行的工作。它帮助开发者理解 React 如何将代码拆分为不同优先级以及完成工作的顺序。
Components ⚛: 显示 React 正在渲染或运行 Effects 的组件树。它帮助开发者理解组件何时渲染或运行 Effects，以及完成这些工作所需的时间，从而识别性能问题。

这些性能追踪工具为开发者提供了更深入的洞察力，以便识别和解决应用程序中的性能瓶颈。

3 新的 React DOM 特性

3.1 部分预渲染 (Partial Pre-rendering)

React 19.2.0 引入了“部分预渲染”功能，允许开发者提前预渲染应用程序的一部分，并在稍后恢复渲染。这项功能对于优化初始加载性能和提供更好的用户体验至关重要。

其工作原理是，可以预渲染应用程序的静态部分并将其从 CDN 提供，然后恢复渲染 shell 以便稍后用动态内容填充。这使得应用程序能够更快地呈现可见内容，同时在后台加载其余部分。

核心 API 包括 prerender、resume 和 resumeAndPrerender：

// 预渲染
const { prelude, postponed } = await prerender(<App />, {signal: controller.signal,
})// 保存 postponed 状态以备后用
await savePostponedState(postponed)// 将 prelude 发送给客户端或 CDN// 恢复渲染 (SSR Stream)
const postponedState = await getPostponedState(request)
const resumeStream = await resume(<App />, postponedState)// 将 stream 发送给客户端// 恢复并预渲染 (SSG)
const { prelude: staticPrelude } = await resumeAndPrerender(<App />, postponedState)// 将完整的 HTML prelude 发送给 CDN

4 值得关注的变更

4.1 SSR Suspense 边界批处理

React 19.2.0 修复了一个行为上的 bug，该 bug 导致 Suspense 边界在客户端渲染和服务器端流式渲染时表现不一致。现在，React 会在短时间内批量显示服务器渲染的 Suspense 边界，以允许更多内容一起显示，从而与客户端渲染的行为保持一致。这一改进也为 Suspense 在 SSR 期间支持 <ViewTransition> 奠定了基础。

4.2 Node.js 对 Web Streams 的支持

React 19.2.0 增加了对 Node.js 中 Web Streams 的支持，这意味着 renderToReadableStream 和 prerender API 现在可以在 Node.js 环境中使用。同时，新的 resume API 也支持 Node.js。然而，在 Node.js 环境中，官方仍然强烈推荐使用 Node Streams API（如 renderToPipeableStream），因为它们通常比 Web Streams 具有更好的性能，并且 Web Streams 默认不支持压缩，可能导致性能损失。

4.3 `eslint-plugin-react-hooks` v6

eslint-plugin-react-hooks 的 6.1.1 版本已发布，其推荐预设默认启用了 flat config，并可选择性地启用由新的 React Compiler 提供支持的规则。对于需要继续使用旧版配置的用户，可以将其扩展更改为 recommended-legacy。

4.4 `useId` 默认前缀更新

在 React 19.2.0 中，useId 的默认前缀从 :r: (19.0.0) 或 «r» (19.1.0) 更新为 _r_。这一更改是为了支持 View Transitions，并确保 useId 生成的 ID 符合 view-transition-name 和 XML 1.0 命名规范。

5 结论

React 19.2.0 带来了多项重要的更新和优化，从 <Activity /> 组件对渲染优先级的精细控制，到 useEffectEvent 解决 Effect 依赖项的痛点，再到 cacheSignal 对 Server Components 缓存生命周期的管理，以及增强的性能追踪工具和部分预渲染功能，都体现了 React 团队在提升开发效率和应用性能方面的持续努力。这些改进不仅让 React 应用的开发更加高效和可维护，也为构建更流畅、响应更快的用户界面提供了强大的支持。开发者应积极探索和采纳这些新特性，以充分发挥 React 19.2.0 的潜力。