React 18 釋出

React 18 現已，此版本包括開箱即用的改進，如自動批次處理，新的 API（如 startTransition）和支援 Suspense 的流式伺服器端渲染。

公告指出，React 18 中的許多功能都建立在新的並行渲染器之上，這是一個解鎖強大新功能的幕後更改。Concurrent React 是可選的，它僅在使用者使用並行功能時啟用，但開發團隊認為它將會對大眾構建應用程式的方式產生重大影響。

「我們花了數年時間研究和開發對 React 並行的支援，並且我們特別注意為現有使用者提供逐步採用的路徑。去年夏天，，收集社群專家的反饋，確保整個 React 生態系統的順利升級體驗。」

在 React 18 中，使用者還可以開始使用 Suspense 在 Relay、Next.js、Hydrogen 或 Remix 等框架中獲取資料。官方表示，使用 Suspense 獲取臨時資料在技術上是可行的，但仍不建議將其作為一般策略。在未來，其可能會公開更多的 primitives，使使用者能夠更容易用 Suspense 存取資料。

公告指出，其對 Suspense 的願景始終不僅僅是載入程式碼——目標是擴充套件對 Suspense 的支援，以便最終相同的宣告式 Suspense fallback 可以處理任何非同步操作（載入程式碼、資料、影象等）。

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 是 React 中的一個新概念，用於區分 urgent 和 non-urgent updates。

<ul>
	<li><strong>Urgent updates </strong>反映了直接互動，例如 typing、clicking、pressing等。</li>
	<li><strong>Transition updates </strong>將 UI 從一個檢視轉換到另一個檢視。</li>
</ul>
</li>

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 與 transition API 結合使用時效果最佳。如果你在 transition 期間 suspend，React 將防止已經可見的內容被 fallback 所取代。相反，React 會延遲渲染，直到載入了足夠的資料以防止出現錯誤的載入狀態。

新的使用者端和伺服器渲染 API。這些更改允許使用者在升級到 React 18 中的新 API 時繼續使用 React 17 模式下的舊 API。
新的嚴格模式行為 (Strict Mode Behaviors)。此功能將為 React 應用程式提供更好的開箱即用效能，但要求元件能夠對多次掛載和銷燬的效果具有彈性。大多數效果無需任何更改即可工作，但有些效果假定它們只掛載或銷燬一次。為了幫助解決這些問題，React 18 為嚴格模式引入了一個新的僅限開發的檢查。每當第一次安裝元件時，此新檢查將自動解除安裝並重新掛載每個元件，並在第二次掛載時恢復先前的狀態。

* React mounts the component.
  * Layout effects are created.
  * Effects are created.
* React simulates unmounting the component.
  * Layout effects are destroyed.
  * Effects are destroyed.
* React simulates mounting the component with the previous state.
  * Layout effects are created.
  * Effects are created.

更多詳情可檢視：

相關連結