大家好,我是 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 项目!