React 19 現已推出，帶來了大量新功能、改進和突破性變更。此版本重新定義了開發人員處理狀態管理、表單和伺服器端渲染的方式，同時棄用了舊版 API。如果您打算升級，請繫好安全帶，踏上變革之旅。本指南將引導您了解 React 19 的亮點，並提供確保順利過渡的提示。
React 19 的亮點
新功能
1. Actions 和 useActionState
startTransition API 現在支援非同步函數，稱為「操作」。操作可以管理狀態更新、處理 fetch() 等副作用，並包含錯誤處理。它們透過協調狀態更新和 UI 渲染來簡化轉換。
新的 useActionState 鉤子 透過提供對 Action 狀態（包括掛起狀態和最終狀態）的存取來補充這一點。它接受用於粒度控制的減速器，使其成為表單互動和複雜狀態流的重要工具。
2. 使用 useOptimistic 進行樂觀更新
useOptimistic 讓開發人員能夠在轉換過程中設定臨時狀態更改，從而提供更流暢的使用者體驗。非同步操作完成後，狀態會自動恢復或更新。
3. 使用API
React 19 引入了 use API，它允許在渲染期間讀取 Promise 或上下文。這可以簡化伺服器資料擷取工作流程，但存在只能在渲染函數中呼叫的限制。
4. ref 作為 Prop
您現在可以直接將 refs 作為 props 傳遞，從而無需使用forwardRef。此變更簡化了元件構成，並使引用的使用更加直觀。
5. 增強懸念
Suspense 現在支援同級預熱，當同級掛起時立即提交後備組件。此增強功能提高了資料密集型應用程式的效能和使用者體驗。
React DOM 客戶端增強
1. 表單操作
React 中的表單透過 ，能夠更好地與 useFormStatus 整合。提交表單會自動重置不受控制組件的狀態。
2. 文檔元資料和資源最佳化
React 19 原生支援渲染文檔元數據，例如
或元件樹中的標籤。此外，預初始化、預先載入和預連接等新 API 改進了資源發現和載入時間。
<h4>
3. <strong>非同步腳本</strong>
</h4>
<p>您現在可以在元件樹中的任何位置渲染非同步腳本。 React 處理排序和重複資料刪除，簡化第三方腳本整合。 </p>
<hr>
<h3>
<strong>React DOM 伺服器</strong>
</h3>
<h4>
1. <strong>新的預渲染 API</strong>
</h4>
<p><strong>prerender</strong> 和 <strong>prerenderToNodeStream</strong> API 透過支援 Node.js 等流環境來增強伺服器端渲染 (SSR)。這些 API 在生成 HTML 之前等待資料加載，使 SSR 更加健壯。 </p>
<h4>
2. <strong>穩定的 React 伺服器元件 (RSC)</strong>
</h4>
<p>伺服器元件現已穩定，允許程式庫將 React 19 作為對等依賴項。這與全端 React 架構保持一致，並支援與 Next.js 等框架無縫整合。 </p>
<hr>
<h3>
<strong>棄用與重大變更</strong>
</h3>
<h4>
<strong>棄用</strong>
</h4>
<ul>
<li>
<strong>element.ref 存取</strong>：已棄用，轉而使用 element.props.ref。 </li>
<li>
<strong>react-test-renderer</strong>：記錄棄用警告；考慮遷移到 React 測試庫。 </li>
<li>
<strong>舊版 API</strong>：已正式棄用 contextTypes、函數的 defaultProps 和字串引用等 API。 </li>
</ul>
<h4>
<strong>重大變更</strong>
</h4>
<ol>
<li><p><strong>JSX 轉換需求</strong><br>
新的 JSX 轉換在 React 19 中是強制性的。這使得像 refs 這樣的功能能夠作為 props 並提高整體性能。 </p></li>
<li><p><strong>錯誤處理更改</strong><br>
未捕獲的錯誤現在報告給 window.reportError，而邊界捕獲的錯誤則透過 console.error 記錄。 onUncaughtError 和 onCaughtError 等新方法允許自訂。 </p></li>
<li>
<p><strong>刪除的 API</strong></p>
<ul>
<li>
<strong>ReactDOM.render 和 ReactDOM.Hydrate</strong>：已替換為 ReactDOM.createRoot 和 ReactDOM. HydroRoot。 </li>
<li>
<strong>函數的defaultProps</strong>：使用ES6預設參數。 </li>
<li>
<strong>舊版上下文</strong>：使用現代 contextType API。 </li>
<li>
<strong>react-dom/test-utils</strong>：替換為 React 核心的 act。 </li>
</ul>
</li>
<li><p><strong>刪除了 UMD 版本</strong><br>
不再支援 UMD 建構。使用基於 ESM 的 CDN 來使用腳本標籤，例如 esm.sh。 </p></li>
</ol>
<hr>
<h2>
<strong>準備升級</strong>
</h2>
<h3>
1. <strong>先升級到React 18.3</strong>
</h3>
<p>React 18.3 引入了針對 React 19 中刪除的 API 的棄用警告。此中間步驟有助於在全面升級之前識別潛在問題。 </p>
<h3>
2. <strong>Codemod 和遷移工具</strong>
</h3>
<p>使用 React codemods 來自動執行重複更新，例如重構已棄用的 API 和調整 TypeScript 類型。 </p>
<h3>
3. <strong>TypeScript 調整</strong>
</h3>
<p>React 19 包含更嚴格的 TypeScript 類型。例如：</p>
<ul>
<li>
ReactChild → React.ReactElement | ReactChild → React.ReactElement |數量 |細繩
</li>
<li>
VoidFunctionComponent → FunctionComponent
</li>
</ul>
<p>重構您的程式碼以與這些更新保持一致。 </p>
<hr>
<h2>
<strong>平穩過渡的技巧</strong>
</h2>
<ul>
<li>
<strong>利用嚴格模式</strong>：React 19 引入了更嚴格的最佳實踐執行。在嚴格模式下運行您的應用程式可能會發現隱藏的錯誤。 </li>
<li>
<strong>儘早並經常進行測試</strong>：考慮到重大變化，徹底的測試至關重要。從react-test-renderer過渡到React測試庫確保了與並發渲染的兼容性。 </li>
<li>
<strong>檢查伺服器渲染</strong>：如果您的應用程式使用 SSR，請針對 React 19 的新預渲染 API 進行測試，並確保伺服器元件的順利整合。 </li>
</ul>
<hr>
<h2>
<strong>為什麼 React 19 很重要</strong>
</h2>
<p>React 19 是一次重大飛躍，改善了開發人員體驗，同時為現代應用程式提供了強大的功能。無論您對非同步操作、改進的 Suspense 或伺服器端渲染增強感到興奮，此版本都包含可協助開發人員建立更快、更具彈性的應用程式的功能。 </p>
<p>準備好潛水了嗎？從 React 19 升級指南開始，探索完整的發行說明。 </p>
<p>編碼愉快！ ？ </p>
以上是探索 React 功能、棄用和重大更改的詳細內容。更多資訊請關注PHP中文網其他相關文章！
