大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连(点赞、评论、转发)，给我一些支持和鼓励，谢谢！

React 官方刚发布了 19.2 版本

这次更新不是小修小补，而是带来了几个让人期待已久的功能。整理一下，分享给大家。

Activity 组件终于来了

之前我们要隐藏或显示某个组件，基本都是用条件渲染，比如这样写：

{isVisible && <Page />}

现在可以用 Activity 组件了：

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

看起来好像没什么区别？其实区别大了。

用 Activity 的 hidden 模式，组件虽然被隐藏了，但它会在后台继续渲染。

这样做有啥好处呢？

用户可能要跳转的页面，可以提前在后台加载数据、CSS、图片这些资源。

等用户真的点进去，页面秒开，体验直接拉满。

而且用户如果返回上一页，之前填写的表单内容还在，不会丢失。

useEffectEvent 解决了老大难问题

用过 useEffect 的都知道，依赖数组是个让人头疼的东西。

比如我写了个聊天室功能，连接成功后要弹个通知。通知的主题色要跟着 theme 变：

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });
    connection.connect();
    return () => {
      connection.disconnect()
    };
  }, [roomId, theme]);
  // ...
}

问题来了，theme 变化时，整个聊天室都会重连。但我只想改个通知颜色啊，凭啥要重连？

以前我们要么就忽略 lint 警告，要么就写一堆复杂的逻辑。现在有了 useEffectEvent，问题直接解决：

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]); // 只依赖 roomId
  // ...
}

useEffectEvent 里的函数永远能拿到最新的 props 和 state，但又不会触发 Effect 重新执行。

这个设计太优雅了，我感觉能少写好多 Bug。

cacheSignal 让缓存更智能

React 19 加了 cache 函数，可以对请求做去重。但之前没法知道缓存啥时候失效。

现在有了 cacheSignal，可以在缓存失效时清理资源：

import { cache, cacheSignal } from "react";

const dedupedFetch = cache(fetch);

async function Component() {
  await dedupedFetch(url, { signal: cacheSignal() });
}

这样可以在渲染完成、渲染中止或渲染失败时，自动取消不需要的请求。

对性能优化来说，这个功能挺有用的。

Chrome DevTools 性能追踪

React 19.2 给 Chrome DevTools 加了专门的性能追踪面板。

现在能看到 React 在不同优先级下做了什么，比如用户交互是"blocking"优先级，startTransition 里的更新是"transition"优先级。

还能看到组件树的渲染时间、Effect 执行时间这些信息。

部分预渲染（Partial Pre-rendering）

这个功能有点小用。

可以提前渲染页面的静态部分，放到 CDN 上。然后在服务器端继续渲染动态内容，再填充进去。

听起来有点绕，举个例子：

首先调用 prerender 预渲染：

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

// 把 postponed 状态保存起来
await savePostponedState(postponed);

// 把 prelude 发给客户端或 CDN

然后用 resume 继续渲染：

const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);
// 把流发给客户端

这样静态内容能快速展示，动态内容也能按需加载。

对提升首屏加载很有帮助。

Suspense 批量渲染优化

之前在 SSR 时，Suspense 边界的内容一准备好就会立即显示，可能会导致页面一块一块地蹦出来。

现在 React 会短暂等待一下，把多个 Suspense 边界的内容一起显示，体验更流畅。

而且 React 还做了智能优化，如果页面加载时间快到 2.5 秒了（这是 LCP 的"良好"标准），就不会再等待，直接渲染，不会影响性能指标。

useId 前缀改了

这个变化比较小，就是 useId 生成的 ID 前缀从 :r: 或 «r» 改成了 _r_。

原因是为了支持 View Transitions，新前缀符合 CSS 选择器和 XML 1.0 的命名规范。

ESLint 插件也升级了

eslint-plugin-react-hooks 发布了 6.1.1 版本，默认用扁平化配置了。

如果要继续用旧配置，改一下就行：

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

还加了 React Compiler 相关的规则，可以选择性开启。

参考：https://react.dev/blog/2025/10/01/react-19-2

其他文章

2025 最新！独立开发者穷鬼套餐

Windows 安装 Claude Code 的新姿势，保姆级教程

Claude Code 从入门到精通：最全配置指南和工具推荐

Claude Code 终极配置指南：一行命令搞定各种配置

一个配置文件搞定！Claude Code 多模型智能切换

这个 361k Star 的项目，一定要收藏！

搞定 XLSX 预览？别瞎找了，这几个库（尤其最后一个）真香！

【完整汇总】近 5 年 JavaScript 新特性完整总览

关于 Node，一定要学这个 10+万 Star 项目！