大家好，我是 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 项目！
文章来源：w2solo
