React18新增特性released怎么使用

本文小編為大家詳細介紹“React18新增特性released怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“React18新增特性released怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

新功能：Automatic Batching

批處理是指 React 將多個狀態更新分組到單個重新呈現中以獲得更好的性能。在沒有自動批處理的情況下，我們只在 React 事件處理程序中批處理更新。默認情況下，promises、setTimeout、本機事件處理程序或任何其他事件內部的更新不會在 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 中的一個新概念，用于區分緊急和非緊急更新。

緊急更新反映了直接交互，如打字、單擊、按下等。

過渡更新將 UI 從一個視圖轉換為另一個視圖。

緊急更新，如打字，點擊或按下，需要立即響應，以匹配我們對物理對象行為方式的直覺。否則他們會覺得"錯了"。但是，過渡是不同的，因為用戶不希望在屏幕上看到每個中間值。

例如，當您在下拉列表中選擇篩選器時，您希望篩選器按鈕本身在單擊時立即響應。但是，實際結果可能會單獨轉換。一個小小的延遲是難以察覺的，而且往往是意料之中的。如果在結果渲染完成之前再次更改濾鏡，則只需查看最新結果即可。

通常，為了獲得最佳用戶體驗，單個用戶輸入應同時導致緊急更新和非緊急更新。您可以在輸入事件中使用 startTransition API 來通知 React 哪些更新是緊急的，哪些是"轉換"：

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);
});

startTransition 中包裝的更新將作為非緊急更新進行處理，如果出現更緊急的更新（如單擊或按鍵），則會中斷。如果一個過渡被用戶打斷（例如，通過連續鍵入多個字符），React 將拋出未完成的陳舊的渲染工作，只渲染最新的更新。

useTransition：用于啟動轉換的掛鉤，包括用于跟蹤掛起狀態的值。

startTransition：一種在無法使用掛鉤時啟動轉換的方法。

轉換將選擇加入并發渲染，從而允許中斷更新。如果內容重新掛起，過渡還會告訴 React 繼續顯示當前內容，同時在后臺呈現過渡內容（有關詳細信息，請參閱懸念 RFC）。

在此處查看有關過渡的文檔.

新的Suspense功能

Suspense 允許您以聲明方式指定組件樹的某個部分的加載狀態（如果該部分尚未準備好顯示）：

<Suspense fallback={<Spinner />}>
  <Comments /></Suspense>

Suspense 使"UI 加載狀態"成為 React 編程模型中的第一類聲明性概念。這使我們能夠在其上構建更高級別的功能。

幾年前，我們推出了限量版的懸疑。但是，唯一受支持的用例是使用 React.lazy 進行代碼拆分，并且在服務器上渲染時根本不支持。

在 React 18 中，我們在服務器上添加了對 Suspense 的支持，并使用并發渲染功能擴展了其功能。

React 18 中的懸念在與過渡 API 結合使用時效果最佳。如果在轉換期間掛起，React 將阻止已經可見的內容被回退替換。相反，React 將延遲渲染，直到加載了足夠的數據以防止錯誤的加載狀態。

新的客戶端和服務器Rendering APIs

在此版本中，我們借此機會重新設計了用于在客戶端和服務器上呈現的 API。這些更改允許用戶在升級到 React 18 中的新 API 時，在 React 17 模式下繼續使用舊 API。

React DOM Client

這些新的 API 現在從 react-dom/client 導出:

createRoot：用于創建要render或unmount的根的新方法。使用它而不是 ReactDOM.render。React 18 中的新功能沒有它就無法正常工作。

hydrateRoot：凍結服務器呈現的應用程序的新方法。將它而不是 ReactDOM.hydrate 與新的 React DOM Server API 結合使用。React 18 中的新功能沒有它就無法正常工作。

createRoot 和 hydrateRoot 都接受一個名為 onRecoverableError 的新選項，以防您希望在 React 從渲染或用于日志記錄的水化錯誤中恢復時收到通知。默認情況下，React 將在較舊的瀏覽器中使用 reportError 或 console.error。

React DOM Server

這些新的 API 現在從 react-dom/server 導出，并且完全支持服務器上的流式 Suspense：

renderToPipeableStream：用于在 Node 環境中進行流式處理。

renderToReadableStream：適用于現代邊緣運行時環境，如 Deno 和 Cloudflare worker。

現有的 renderToString 方法繼續工作，但不鼓勵使用。

新的Strict Mode Behaviors

以后我們希望添加一個功能，允許 React 在保留狀態的同時添加和刪除 UI 的各個部分。例如，當用戶離開屏幕并返回時，React 應該能夠立即顯示上一個屏幕。為此，React 將使用與以前相同的組件狀態卸載和重新掛載樹。

此功能將為 React 應用程序提供更好的開箱即用性能，但要求組件能夠靈活應對多次裝載和破壞的效果。大多數效果無需任何更改即可工作，但有些效果假定它們只安裝或銷毀一次。

為了幫助解決這些問題，React 18 在嚴格模式下引入了一個新的僅限開發的檢查。每當組件首次裝載時，此新檢查將自動卸載并重新裝載每個組件，并在第二次裝載時恢復以前的狀態。

在此更改之前，React 將掛載組件并創建效果：

React mounts the component.

• Layout effects are created.

• Effects are created.

在 React 18 中的嚴格模式中，React 將模擬在開發模式下卸載和重新掛載組件：

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.

新Hooks

useId

useId 是一個新的鉤子，用于在客戶端和服務器上生成唯一 ID，同時避免水化不匹配。它主要用于與需要唯一 ID 的輔助功能 API 集成的組件庫。這解決了 React 17 及更低版本中已經存在的問題，但在 React 18 中更為重要，因為新的流式處理服務器呈現器如何無序地交付 HTML。

useTransition

useTransition 和 startTransition 允許您將某些狀態更新標記為不緊急。默認情況下，其他狀態更新被視為緊急。React 將允許緊急狀態更新（例如，更新文本輸入）以中斷非緊急狀態更新（例如，呈現搜索結果列表）。

useDeferredValue

useDeferredValue 允許您推遲重新呈現樹的非緊急部分。它類似于去抖動，但與它相比具有一些優點。沒有固定的時間延遲，所以 React 會在第一個渲染反映在屏幕上后立即嘗試延遲渲染。延遲的渲染是可中斷的，并且不會阻止用戶輸入。

useSyncExternalStore

useSyncExternalStore 是一個新的掛鉤，它允許外部存儲通過強制對存儲的更新進行同步來支持并發讀取。在實現對外部數據源的訂閱時，它消除了對 useEffect 的需求，并且建議用于與 React 外部的狀態集成的任何庫。

注意：useSyncExternalStore 旨在供庫使用，而不是應用程序代碼。

useInsertionEffect

useInsertionEffect 是一個新的鉤子，它允許 CSS-in-JS 庫解決在渲染中注入樣式的性能問題。除非你已經構建了一個CSS-in-JS庫，否則我們不希望你使用它。此掛鉤將在 DOM 發生突變后運行，但在布局效果讀取新布局之前運行。這解決了 React 17 及更低版本中已經存在的問題，但在 React 18 中更為重要，因為 React 在并發渲染期間讓位于瀏覽器，使其有機會重新計算布局。

注意：useInsertionEffect 旨在供庫使用，而不是應用程序代碼。

讀到這里，這篇“React18新增特性released怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。