React 18 中的新增功能

新功能：Automatic Batching

批處理是指 React 將多個狀態(tài)更新分組到單個重新呈現(xiàn)中以獲得更好的性能。在沒有自動批處理的情況下，我們只在 React 事件處理程序中批處理更新。默認(rèn)情況下，promises、setTimeout、本機(jī)事件處理程序或任何其他事件內(nèi)部的更新不會在 React 中進(jìn)行批處理。使用自動批處理時，將自動批處理這些更新：

// 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 中的一個新概念，用于區(qū)分緊急和非緊急更新。

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

過渡更新將 UI 從一個視圖轉(zhuǎn)換為另一個視圖。

緊急更新，如打字，點(diǎn)擊或按下，需要立即響應(yīng)，以匹配我們對物理對象行為方式的直覺。否則他們會覺得"錯了"。但是，過渡是不同的，因?yàn)橛脩舨幌Ｍ谄聊簧峡吹矫總€中間值。

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

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

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 中包裝的更新將作為非緊急更新進(jìn)行處理，如果出現(xiàn)更緊急的更新（如單擊或按鍵），則會中斷。如果一個過渡被用戶打斷（例如，通過連續(xù)鍵入多個字符），React 將拋出未完成的陳舊的渲染工作，只渲染最新的更新。

useTransition：用于啟動轉(zhuǎn)換的掛鉤，包括用于跟蹤掛起狀態(tài)的值。

startTransition：一種在無法使用掛鉤時啟動轉(zhuǎn)換的方法。

轉(zhuǎn)換將選擇加入并發(fā)渲染，從而允許中斷更新。如果內(nèi)容重新掛起，過渡還會告訴 React 繼續(xù)顯示當(dāng)前內(nèi)容，同時在后臺呈現(xiàn)過渡內(nèi)容（有關(guān)詳細(xì)信息，請參閱懸念 RFC）。

在此處查看有關(guān)過渡的文檔.

新的Suspense功能

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

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

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

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

在 React 18 中，我們在服務(wù)器上添加了對 Suspense 的支持，并使用并發(fā)渲染功能擴(kuò)展了其功能。

React 18 中的懸念在與過渡 API 結(jié)合使用時效果最佳。如果在轉(zhuǎn)換期間掛起，React 將阻止已經(jīng)可見的內(nèi)容被回退替換。相反，React 將延遲渲染，直到加載了足夠的數(shù)據(jù)以防止錯誤的加載狀態(tài)。

新的客戶端和服務(wù)器Rendering APIs

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

React DOM Client

這些新的 API 現(xiàn)在從 react-dom/client 導(dǎo)出:

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

hydrateRoot：凍結(jié)服務(wù)器呈現(xiàn)的應(yīng)用程序的新方法。將它而不是 ReactDOM.hydrate 與新的 React DOM Server API 結(jié)合使用。React 18 中的新功能沒有它就無法正常工作。

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

React DOM Server

這些新的 API 現(xiàn)在從 react-dom/server 導(dǎo)出，并且完全支持服務(wù)器上的流式 Suspense：

renderToPipeableStream：用于在 Node 環(huán)境中進(jìn)行流式處理。

renderToReadableStream：適用于現(xiàn)代邊緣運(yùn)行時環(huán)境，如 Deno 和 Cloudflare worker。

現(xiàn)有的 renderToString 方法繼續(xù)工作，但不鼓勵使用。

新的Strict Mode Behaviors

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

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

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

在此更改之前，React 將掛載組件并創(chuàng)建效果：

React mounts the component.

• Layout effects are created.
• Effects are created.

在 React 18 中的嚴(yán)格模式中，React 將模擬在開發(fā)模式下卸載和重新掛載組件：

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 是一個新的鉤子，用于在客戶端和服務(wù)器上生成唯一 ID，同時避免水化不匹配。它主要用于與需要唯一 ID 的輔助功能 API 集成的組件庫。這解決了 React 17 及更低版本中已經(jīng)存在的問題，但在 React 18 中更為重要，因?yàn)樾碌牧魇教幚矸?wù)器呈現(xiàn)器如何無序地交付 HTML。

useTransition

useTransition 和 startTransition 允許您將某些狀態(tài)更新標(biāo)記為不緊急。默認(rèn)情況下，其他狀態(tài)更新被視為緊急。React 將允許緊急狀態(tài)更新（例如，更新文本輸入）以中斷非緊急狀態(tài)更新（例如，呈現(xiàn)搜索結(jié)果列表）。

useDeferredValue

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

useSyncExternalStore

useSyncExternalStore 是一個新的掛鉤，它允許外部存儲通過強(qiáng)制對存儲的更新進(jìn)行同步來支持并發(fā)讀取。在實(shí)現(xiàn)對外部數(shù)據(jù)源的訂閱時，它消除了對 useEffect 的需求，并且建議用于與 React 外部的狀態(tài)集成的任何庫。

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

useInsertionEffect

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

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

到此這篇關(guān)于React18新增特性released的使用的文章就介紹到這了,更多相關(guān)React18 released內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！