3 月 29 日，React 18 正式釋出，此版本包括開箱即用的改進，如自動批處理、新的 API（如 startTransition）和支援 Suspense 的流式伺服器端渲染。
據介紹，React 18 中的許多功能都建立在新的併發渲染器之上，這是一個解鎖強大新功能的幕後更改。Concurrent React 是可選的——它只在使用者使用併發特性時啟用——但開發團隊認為它會對大眾構建應用程式的方式產生重大影響。
“我們花了數年時間研究和開發對 React 併發的支援，並且我們特別注意為現有使用者提供逐步採用的路徑。去年夏天，我們成立了 React 18 工作組，收集社群專家的反饋，確保整個 React 生態系統的順利升級體驗。”
在 React 18 中，使用者可以開始使用 Suspense 在 Relay、Next.js、Hydrogen 或 Remix 等框架中獲取資料。使用 Suspense 獲取臨時資料在技術上是可行的，但官方表示不建議將其作為一般策略。
開發團隊稱，其對 Suspense 的願景始終不僅僅是載入程式碼——目標是擴充套件對 Suspense 的支援，以便最終相同的宣告式 Suspense fallback 可以處理任何非同步操作（載入程式碼、資料、影像等）。
而伺服器元件的開發仍處於測試階段，它允許開發人員構建跨伺服器和客戶端的應用程式，將客戶端應用程式的豐富互動性與傳統伺服器渲染的改進效能相結合。此功能預計將在 18.x 次要版本中釋出初始版本。
React 18新功能
自動批處理
批處理是 React 將多個狀態更新分組到一個重新渲染中以獲得更好的效能。如果沒有自動批處理，我們只能在 React 事件處理程式中批處理更新。
預設情況下，Promise、setTimeout、native event handlers 或任何其他事件內部的更新不會在 React 中批處理。使用自動批處理，這些更新將自動批處理：
// Before: only React events were batched.
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React will render twice, once for each state update (no batching)
}, 1000);
// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.`
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React will only re-render once at the end (that's batching!)
}, 1000);
Transitions
Transitions 是 React 中的一個新概念，用於區分 urgent 和 non-urgent updates。
- urgent updates 反映了直接互動，例如 typing、clicking、pressing等
- Transition updates將 UI 從一個檢視轉換到另一個檢視
import {startTransition} from 'react';
// Urgent: Show what was typed
setInputValue(input);
// Mark any state updates inside as transitions
startTransition(() => {
// Transition: Show the results
setSearchQuery(input);
});
新的 Suspense 功能
如果元件樹的一部分尚未準備好顯示，Suspense 允許您以宣告方式指定其載入狀態：
<Suspense fallback={<Spinner />}>
<Comments /></Suspense>
Suspense 使“UI loading state”成為 React 程式設計模型中的first-class宣告性概念。這讓我們可以在它之上構建更高階別的功能。
在React 18 中，伺服器新增了對 Suspense 的支援，並使用併發渲染特性擴充套件了它的功能。React 18 中的 Suspense 與transitionAPI 結合使用時效果最佳。如果你在transition期間suspend，React 將防止已經可見的內容被 fallback 替換。
相反，React 會延遲渲染，直到載入了足夠的資料以防止出現錯誤的載入狀態。
新的客戶端和伺服器渲染 API
在這個版本中，開發團隊重新設計了他們為在客戶端和伺服器上呈現而公開的 API。這些更改允許使用者在升級到 React 18 中的新 API 時繼續使用 React 17 模式下的舊 API。
新的嚴格模式行為
此功能將為 React 應用程式提供更好的開箱即用效能，但要求元件能夠對多次掛載和銷燬的效果具有彈性。大多數效果無需任何更改即可工作，但有些效果假定它們只掛載或銷燬一次。為了幫助解決這些問題，React 18 為嚴格模式引入了一個新的僅限開發的檢查。
每當第一次安裝元件時，此新檢查將自動解除安裝並重新安裝每個元件，並在第二次安裝時恢復先前的狀態。
部落格原文：