React 18 的新功能

新功能：自動批處理Batching是指React將多個狀態更新分組到單個重新渲染中，以獲得更好的效能。 如果沒有自動批處理，我們只在 react 事件處理程式中批處理更新。 預設情況下，React 不會正確。

Promise、settimeouts、本機事件處理程式或任何其他事件。 通過自動批處理，這些更新將分批自動處理。

之前：批處理只在 react 事件上執行 settimeout（（）=>， 1000）; 之後：對超時、承諾、本機事件處理程式或任何其他事件中的更新進行批處理。 settimeout(()=> ,1000);

緊急更新反映直接互動，如鍵入、點選、按下等。 轉換更新將 UI 從乙個檢視轉換到另乙個檢視。 打字、點選或按下等緊急更新需要立即響應，以符合我們對物理物件行為方式的直覺。 否則，他們會覺得“有些不對勁”。 但是，轉換是不同的，因為使用者不希望在螢幕上看到每個中間值。

例如，當您在下拉選單中選擇過濾器時，您希望過濾器按鈕本身在您單擊它時立即做出反應。 但是，實際結果可能會單獨轉換。 乙個小的延遲是難以察覺的，而且通常是意料之中的。 而且，如果在呈現結果之前再次更改篩選器，則只關心檢視最新結果。

通常，為了獲得最佳使用者體驗，使用者輸入應同時導致緊急更新和非緊急更新。 你可以在輸入事件中使用 StartTransition API 來告訴 React 哪些是緊急更新，哪些是“過渡”：

import from 'react';緊急：顯示輸入內容setinputvalue（input）; 將內部的任何狀態更新標記為 transitiontransition（（（）=>）。

UseTransition：啟動轉換的掛鉤，包括用於跟蹤掛起狀態的值。 starttransition：一種在鉤子不可用時啟動轉換的方法。 過渡將選擇併發渲染，這允許中斷更新。 如果內容再次暫停，過渡還會告訴 React 繼續顯示當前內容，同時在後台呈現過渡內容。

新的懸念功能允許您以宣告方式指定載入狀態，如果元件樹的一部分尚未準備好顯示

幾年前，我們推出了限量版的懸疑。 但是，唯一支援的用例是 react延遲拆分**，在伺服器端渲染時完全不支援。

在 React 18 中，我們新增了對 Suspense 的伺服器端支援，並通過併發渲染擴充套件了其功能。

React 18 中的懸念在與暫存 API 結合使用時效果最佳。 如果你在過渡期間掛起，React 將阻止已經可見的內容被回退替換。 相反，React 會延遲渲染，直到有足夠的資料可以載入以防止載入狀態不佳。

新的客戶端和伺服器端渲染 API在此版本中，我們藉此機會重新設計了為客戶端和伺服器端渲染公開的 API。 這些更改允許使用者在公升級到 React 18 中的新 API 時繼續使用 React 17 模式下的舊 API。

react dom client

這些新 API 現在從 react-dom 客戶端匯出：

createroot：一種建立要渲染或解除安裝的根的新方法。 用它來替代 reactdomrender。沒有它，React 18 的新功能將無法執行。 hydrateroot：一種用於建立伺服器端渲染應用程式的新方法。 用它來替代 reactdomHydrate 與新的 React DOM 伺服器端 API 配合使用。 沒有它，React 18 的新功能將無法執行。 CreateRoot 和 HydrateRoot 都接受乙個名為 OnRecoverableError 的新選項，以防您希望在 React Render 或 Hydrate 從文件錯誤中恢復時收到通知。 預設情況下，React 使用。

report錯誤，或在較舊的瀏覽器中使用控制台error。

react dom server

這些新的 API 現在從 react-dom 伺服器匯出，並完全支援流式處理 Suspense：：

rendertopipeablestream：用於 Node 環境。 RenderToReadableStream：用於現代邊緣執行時環境，例如 Deno 和 Cloudflare Workers。 現有的 rendertostring 方法仍然可用，但不建議這樣做。

新的嚴格模式行為 將來，我們希望新增乙個功能，允許 React 在保留狀態的同時新增和刪除部分 UI。 例如，當使用者從乙個螢幕不剪輯並切換回來時，React 應該能夠立即顯示前乙個螢幕。 為此，React 將使用與之前相同的元件狀態解除安裝並重新載入樹。

此功能將為 React 應用程式提供更好的開箱即用效能，但要求元件能夠適應多次載入和銷毀的效果。 大多數效果無需任何更改即可工作，但有些效果會假設它們只載入或銷毀一次。

為了幫助發現這些問題，React 18 引入了乙個新的僅限開發的嚴格模式檢查。 每當首次掛載元件時，此檢查將自動解除安裝並重新載入每個元件，並在第二次掛載時返回到其先前的狀態。

在此更改之前，React 將載入元件並建立效果：

React 掛載元件布局 效果建立 效果建立

* React 掛載元件 * 布局效果建立 * 效果建立 * React 模擬解除安裝元件 * 布局效果破壞 * 效果銷毀 * React 模擬載入元件（使用之前的狀態） * 布局效果建立 * 效果建立

UseId 是乙個新的鉤子，用於在客戶端和伺服器上生成唯一 ID，以避免水合物不匹配。 它主要用於整合需要唯一 ID 的輔助功能 API 的元件庫。 這解決了 React 17 及更低版本中已經存在的問題，但在 React 中

18 甚至更重要，因為新的流式伺服器端渲染器對 HTML 的無序交付。

usetransition

UseTransition 和 StartTransition 允許您將某些狀態更新標記為不緊急。 預設情況下，其他狀態更新被視為緊急。 react

緊急狀態更新（例如，更新文字輸入）將被允許中斷非緊急狀態更新（例如，呈現搜尋結果列表）。

usedeferredvalue

useDeferredValue 允許您推遲重新呈現樹的非緊急部分。 它類似於 Debounce，但與它相比有一些優勢。 它沒有固定的時間延遲，一旦第乙個渲染反映在螢幕上，React 就會嘗試延遲渲染。 延遲呈現是可中斷的，並且不會阻止使用者輸入。

usesyncexternalstore

UseSyncExternalStore 是乙個新掛鉤，它允許外部儲存通過強制更新到 Store 進行同步來支援併發讀取。 在實現對外部資料來源的訂閱時，它消除了對 useeffect 的需要，並且建議用於與 React 相關的任何內容

用於外部狀態整合的庫。

useinsertioneffect

UseInsertionEffect 是乙個新的鉤子，它允許 css-in-js 庫解決在渲染中注入樣式的效能問題。 除非你已經建立了乙個css-in-js庫，否則我們不希望你使用它。 這個鉤子將在 dom 更改後執行，但在 .

閱讀新布局前的布局效果。 這解決了 React 17 及更低版本中已經存在的問題，但在 React 18 中更為重要，因為 React 在併發渲染時會向瀏覽器讓步，讓它有機會重新計算布局。

併發模式（CM）是乙個我們可能已經聽說過很多次的概念，但實際上這個概念在去年已經成熟了，在React 17中，可以通過一些實驗性API開啟CM。

併發模式可幫助應用保持響應狀態，並根據使用者的裝置效能和 Internet 速度進行適當調整，並通過使渲染可中斷來修復阻塞呈現限制。 在 Concurrent 模式中，React 可以同時更新多個狀態。

說得太複雜可能有點尷尬，但可以用一句話來概括：React 17 和 React 18 的區別在於，它從同步不可中斷更新轉變為非同步可中斷更新。

為了更好地管理根節點，React 18 引入了乙個新的根 API，該 API 也支援 New Concurrent Renderer，它允許你進入併發模式。

// react 17import react from 'react';import reactdom from 'react-dom';import app from './app';const root = document.getelementbyid('root')!;reactdom.render(, root);// react 18import react from 'react';import reactdom from 'react-dom/client';import app from './app';const root = document.getelementbyid('root')!;reactdom.createroot(root).render();

這時，可能會有同學問：開啟併發模式是否意味著開啟了併發更新？

no！在 React 17 的一些實驗性特性中，開啟併發模式意味著開啟併發更新，但在 React 18 正式發布後，由於官方策略的調整，React 不再依賴併發模式來開啟併發更新。

換言之：併發模式已啟用，但不一定啟用併發更新！

一句話：在 18 中，不再有多種模式，而是是否啟用併發更新取決於是否使用併發功能。

從體系結構的角度來看，目前有兩種體系結構：

更新以不可中斷的遞迴方式進行stack reconciler（舊體系結構）使用可中斷遍歷進行更新fiber reconciler新架構可以選擇是否啟用併發更新，因此目前市場上的所有 React 版本都有四種情況：

舊架構（v15 及更早版本）新架構，不啟用併發更新，行為與案例 1 相同（預設為 v16 和 v17 中的情況） 新架構，不啟用併發更新，但啟用併發模式和一些新功能（比如自動批處理，預設為 v18 中的情況） 新架構， 啟用併發模式，並啟用併發更新併發功能是指開啟併發模式後才能使用的功能如：

UseDeFerRedValueUseTransitionStartTransition 併發是新 API 的乙個示例，它可以通過將特定更新標記為“轉換”來顯著改善使用者互動，這僅僅是因為由 StartTransition 中包裝的 setstate 觸發的渲染被標記為非緊急渲染，可能會被其他緊急渲染搶占。

import react, from 'react';const app: react.fc = ()=> )return ( 

}export default app;

相同：UseDeferredValue 與 UseTransition 的內部實現基本相同，後者被標記為延遲更新任務。 不同：UseTransition 將更新任務轉換為延遲更新任務，useDeferredValue

是生成乙個新值，該值充當延遲狀態。 （乙個用於包裝方法，另乙個用於包裝值）。

所以，在上面的 starttransition 示例中，我們也可以使用 useDeferredValue：

import react, from 'react';const app: react.fc = （）=> ，使用併發功能，啟用併發更新 const deferredlist = useDeferredValue（list）;  return ( 

}export default app;

React 18 通過預設執行批處理來實現開箱即用的效能改進。

批處理是指在資料層將多個狀態更新批處理為單個更新以獲得更好的效能（在檢視層，將多個渲染合併為單個渲染）。

在 React 18 之前：在某些情況下，更新沒有被合併在 React 18 之前，我們只在 React 事件處理程式中進行了批量更新。 預設情況下，在Promise、setTimeout 和本機事件處理程式或任何其他活動不會對任何更新進行批處理：

案例 1：React 事件處理程式

以下 ** 將被批處理，並且只會呈現頁面一次。

import react, from 'react';在 react 18 之前，const app： reactfc = ()=> }count2 is $`export default app;

如果我們把狀態的更新放在promise或settimeout在內部，元件被渲染兩次，並且不會批量更新。

import react, from 'react';在 react 18 之前，const app： reactfc = （）=> ） 不會在 setTimeout }}count1 中批處理：

count2： 
}export default app;

在原生 JS 事件中，結果與情況 2 相同，每次單擊“更新兩個狀態”時，元件都會渲染兩次，並且不會進行批量更新。

import react, from 'react';在 react 18 之前，const app： reactfc = （）=> ） 不會在原生 JS 事件中批處理 }， return （count1：

count2： 
}export default app;

但是，以下示例將在 React 18 中執行兩次渲染

import react, from 'react';// react 18const app: react.fc = ()=> }count1： 

count2： 
}export default app;

在 18 之前，批處理僅在 react 事件處理程式中自動完成，否則它會在 18 之後多次更新，並且在任何情況下都會自動批處理，將多個更新合併為乙個批處理是乙個重大更改，如果您想選擇退出批量更新，您可以使用 flushsync：

import react, from 'react';import from 'react-dom';const app: react.fc = （）=> ） 第一次更新 flushsync（（（）=> ） 第二次更新 }}count1：

count2： 
}export default app;

更新前

以前，如果你的 Suspense 元件沒有提供回退屬性，React 會悄悄地跳過它並繼續搜尋下乙個邊界：

react 17const app = （）=> > < - 使用此邊框，顯示載入元件 < - 跳過此邊框，無後備屬性）;export default app;

React 現在將使用當前元件的懸念作為邊界，即使當前元件的懸念值為 null 或 undefined：

react 18const app = （）=> > < - 不使用 < - 使用此邊框，將回退渲染為 null ）;export default app;