🔧 阿川の電商水電行
React 19.2 已發布，現已上線 npm！
React 19.2 已發布，現已上線 npm！
原文連結
這是我們過去一年中的第三次發布：繼去年 12 月的 React 19 和 6 月的 React 19.1 之後。本文將為你概覽 React 19.2 中的新特性，並重點介紹一些值得關注的變更。
新特性
Activity
<Activity /> 讓你可以將應用劃分為可控、可優先級排序的「活動」。
它可以作為條件渲染的替代方案：
// 之前
{isVisible && <Page />}
// 現在
<Activity mode={isVisible ? 'visible' : 'hidden'}>
<Page />
</Activity>在 React 19.2 中，Activity 支援兩種模式：visible 和 hidden。
hidden：隱藏子元件，卸載副作用，並延遲所有更新直到 React 空閒。visible：正常渲染子元件，掛載副作用，並處理更新。
這意味著你可以預渲染並持續渲染隱藏部分，而不會影響螢幕上可見內容的性能。
場景示例：
- 預載用戶可能即將導航的頁面。
- 保留用戶返回時的輸入狀態。
未來我們會為 <Activity> 增加更多模式。
useEffectEvent
在 useEffect 中，一個常見模式是監聽外部系統事件。例如，聊天房間連線成功時觸發通知：
function ChatRoom({ roomId, theme }) {
useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connection.on('connected', () => {
showNotification('Connected!', theme);
});
connection.connect();
return () => {
connection.disconnect()
};
}, [roomId, theme]);
}問題：theme 變化會導致 useEffect 重新執行，造成不必要的重連。
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]); // ✅ 依賴聲明簡潔，事件函數無需依賴
}類似 DOM 事件，Effect Event 始終能獲取最新的 props 和 state。
⚠️ 注意：
- 不要 將
useEffectEvent函數加入依賴陣列。 - 需要升級到
<a href="/cdn-cgi/l/email-protection">[email protected]</a>，linter 會正確識別。 - Effect Event 必須和其對應的 Effect 在同一個元件/Hook 內定義。
cacheSignal（僅限 React Server Components）
cacheSignal 可用於檢測 [cache()]的生命週期是否結束：
import {cache, cacheSignal} from 'react';
const dedupedFetch = cache(fetch);
async function Component() {
await dedupedFetch(url, { signal: cacheSignal() });
}它可幫助你在快取結果不再使用時清理或中止工作：
- 渲染完成
- 渲染被中止
- 渲染失敗
性能追蹤（Performance Tracks）
React 19.2 為 Chrome DevTools 的性能面板新增了 React 專用追蹤軌道：
-
Scheduler ⚛
展示 React 處理的不同優先級任務（如用戶互動 blocking、startTransition內的 transition）。幫助理解任務調度、阻塞和渲染順序。 -
Components ⚛
展示元件樹的渲染和副作用執行情況，包括掛載（Mount）、阻塞（Blocked）等。幫助定位性能瓶頸。
React DOM 新特性
部分預渲染（Partial Pre-rendering）
React 19.2 引入了「部分預渲染」：
- 可提前預渲染靜態部分，放在 CDN 上。
- 後續恢復（resume）時再渲染動態內容。
流程示例：
// 預渲染
const {prelude, postponed} = await prerender(<App />, {
signal: controller.signal,
});
await savePostponedState(postponed);
// 恢復
const postponed = await getPostponedState(request);
const resumeStream = await resume(<App />, postponed);值得注意的變更
Suspense 邊界批處理（SSR）
修復了 SSR 下 Suspense 邊界顯示與客戶端不一致的問題。React 19.2 會將 Suspense 邊界延遲少量時間後批量揭示，以便動畫和內容顯示更一致。
⚠️ React 使用啟發式規則避免影響核心 Web Vitals，比如若接近 2.5s LCP 閾值，會立即揭示內容。
Node SSR 對 Web Streams 的支持
React 19.2 在 Node.js 中支持 Web Streams API：
renderToReadableStreamprerenderresumeresumeAndPrerender
⚠️ 推薦在 Node 環境優先使用 Node Streams，因為其性能更好並支持壓縮。
eslint-plugin-react-hooks v6
- 新版本默認啟用 Flat Config。
- 若需舊版配置，使用
recommended-legacy。 - 新規則與 React Compiler 深度集成。
useId 默認前綴變更
- 19.0:
:r: - 19.1:
«r» - 19.2:
_r_
原因：支持 View Transitions 及 XML 1.0 兼容性。
Changelog 精選
react-dom: 支持為 hoistable styles 設置 nonce #32461。react: 修復useDeferredValue無限循環、熱更新堆疊溢出、React.lazy內部使用React.use崩潰等問題 #33941。react-dom: 修復嵌套 Suspense 渲染異常、ARIA 1.3 警報、渲染中斷後掛起導致的卡死等 #34264。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
