React 18 中的新增功能

新功能：Automatic Batching

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

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

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

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

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

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

通常，為了獲得最佳用戶體驗(yàn)，單個(gè)用戶輸入應(yīng)同時(shí)導(dǎo)致緊急更新和非緊急更新。您可以在輸入事件中使用 startTransition API 來(lái)通知 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)更緊急的更新（如單擊或按鍵），則會(huì)中斷。如果一個(gè)過(guò)渡被用戶打斷（例如，通過(guò)連續(xù)鍵入多個(gè)字符），React 將拋出未完成的陳舊的渲染工作，只渲染最新的更新。

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

startTransition：一種在無(wú)法使用掛鉤時(shí)啟動(dòng)轉(zhuǎn)換的方法。

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

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

新的Suspense功能

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

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

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

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

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

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

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

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

React DOM Client

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

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

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

createRoot 和 hydrateRoot 都接受一個(gè)名為 onRecoverableError 的新選項(xiàng)，以防您希望在 React 從渲染或用于日志記錄的水化錯(cuò)誤中恢復(fù)時(shí)收到通知。默認(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)行時(shí)環(huán)境，如 Deno 和 Cloudflare worker。

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

新的Strict Mode Behaviors

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

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

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

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

React mounts the component.

• Layout effects are created.
• Effects are created.

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

useTransition

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

useDeferredValue

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

useSyncExternalStore

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

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

useInsertionEffect

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

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

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

最新評(píng)論