大家好，我是 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 相关的规则，可以选择性开启。
其他文章
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)