React 19.2 新功能速览！

前言

React 19.2 发布了，本文将带大家了解这些特性吧！

正文

本次更新新增了 <Activity> 组件、useEffectEvent 钩子、部分预渲染 和 性能轨道 等机制，优化了性能和开发体验。

部分预渲染（Partial Pre-rendering）

部分预渲染允许静态部分提前渲染并通过 CDN 分发，动态内容后续通过 resume 补全，优化首屏加载和 SEO。

prerender 生成静态 prelude 和 postponed 状态：

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

客户端通过resume恢复SSR流，或resumeAndPrerender生成SSG HTML：

const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);
const { prelude } = await resumeAndPrerender(<App />, postponedState);

降低TTI（交互时间），支持中断/失败场景，适合Next.js混合渲染，优化LCP并为 <ViewTransition> 动画铺路。

cache 和 cacheSignal

RSC 专用的 cacheSignal API支持在 cache() 生命周期结束时清理任务：

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

监听cache()失效（渲染完成/中止/失败），取消无效请求，优化服务器负载。

比如在动态路由切换场景，可以减少RSC数据获取开销。

<Activity> 组件

<Activity> 组件替代条件渲染，控制优先级，支持 visible（正常挂载/更新）和 hidden（卸载副作用、延迟更新）模式：

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

它可以预加载导航页面（CSS/图片），保留后退状态，加速导航，未来将扩展更多模式。

useEffectEvent 钩子

useEffectEvent钩子可以隔离 useEffect 中的事件逻辑，避免无关依赖触发重运行：

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]);
}

无需声明依赖，但需升级eslint-plugin-react-hooks@latest 以跳过linter检查，仅限同一组件/钩子使用。

可访问性与编辑器改进

ESLint插件升级：eslint-plugin-react-hooks@6默认平坦配置（recommended），支持React Compiler规则（如自动记忆）。传统配置可切换至recommended-legacy：

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

useId前缀调整：从:r:（19.0）/«r»（19.1）改为_r_，兼容view-transition-name和XML 1.0，减少ID冲突。

这些改进通过静态分析降低配置负担，提升无障碍调试效率。

其他改动

• 性能轨道：Chrome DevTools 新增 Scheduler（显示优先级/任务类型）和 Components（展示渲染/副作用时间轴）轨道，定位性能瓶颈。

性能轨道

性能轨道

• SSR优化：Suspense 边界短时批处理，统一揭示内容，支持 <ViewTransition> 动画，启发式避免LCP超2.5s；Node.js支持Web Streams SSR，但推荐Node Streams以获更高性能和压缩。
• 修复与改进：支持nonce样式（#32461），修复useDeferredValue循环（#32821）、表单提交崩溃（#33055）、Suspense重挂起（#32900）等。

最后

React 19.2通过<Activity>、useEffectEvent和部分预渲染，显著提升了性能和 RSC 体验。结合 DevTools 轨道优化应用性能。

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！