React 19 終於來了！

未經授權，禁止轉載，轉載請註明出處！

早在數月前，React 團隊便預告了 React 19 的積極開發，並預計上半年釋出。 4 月 25 日 ，React 終於釋出了 v 19 測試版 。該版本主要面向各大庫，以確保它們與 React 19 的相容性。因此，建議開發者先升級至最新的穩定版 18.3.0，靜待 React 19 的正式版釋出。

React 19 帶來了諸多新特性和改進，不僅提升了開發者的使用體驗，還進一步最佳化了 React 套用的效能。為了讓開發者能夠平穩過渡到 React 19，React 團隊特意準備了一份詳盡的升級指南，詳細列出了升級步驟和可能遇到的重大變化。

接下來，本文將剖析 React 18.3 與 React 19 的更新內容，並探索 React 19 的升級指南，助力更好地擁抱這一重大更新！

React 18.3 更新內容

React 18.3 相對於 18.2 增加了對廢棄 API 的警告以及其他為 React 19 所需的更改。

React 19 更新內容

Actions

在React套用中，執行數據變更並據此更新狀態是一個常見的需求。比如，使用者送出表單以更改姓名時，我們會發起API請求並處理其響應。以往，我們不得不手動管理掛起狀態、錯誤處理、樂觀更新以及順序請求等邏輯。

例如，可以使用 useState 來處理掛起和錯誤狀態：

functionUpdateName({}){
const[name, setName]=useState("");
const[error, setError]=useState(null);
const[isPending, setIsPending]=useState(false);
consthandleSubmit=async()=>{
setIsPending(true);
const error =awaitupdateName(name);
setIsPending(false);
if(error){
setError(error);
return;
}
redirect("/path");
};
return(
<div>
<input value={name} onChange={(event)=>setName(event.target.value)}/>
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error &&<p>{error}</p>}
</div>
);
}


在 React 19 中增加了對在轉換中使用異步函式的支持，以自動處理掛起狀態、錯誤、表單和樂觀更新。

例如，可以使用 useTransition 來自動處理掛起狀態：

functionUpdateName({}){
const[name, setName]=useState("");
const[error, setError]=useState(null);
const[isPending, startTransition]=useTransition();
consthandleSubmit=async()=>{
startTransition(async()=>{
const error =awaitupdateName(name);
if(error){
setError(error);
return;
}
redirect("/path");
})
};
return(
<div>
<input value={name} onChange={(event)=>setName(event.target.value)}/>
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error &&<p>{error}</p>}
</div>
);
}


異步轉換會立刻將 isPending 狀態設為 true ，發起異步請求，並在轉換完成後將 isPending 設定為 false 。這樣可以確保數據變化時，UI 仍然保持響應和互動性。

在 Actions 功能的基礎上，React 19 還推出了 useOptimistic Hook 來簡化樂觀更新的管理，以及 React.useActionState Hook來處理 Actions 的常見場景。同時，在 react-dom 中，新增了 <form> Actions 來自動管理表單操作，並提供了 useFormStatus 來支持表單中 Actions 的常見需求。

在 React 19 中，上面的例子可以簡化為：

functionChangeName({ name, setName }){
const[error, submitAction, isPending]=useActionState(
async(previousState, formData)=>{
const error =awaitupdateName(formData.get("name"));
if(error){
return error;
}
redirect("/path");
}
);
return(
<form action={submitAction}>
<input type="text" name="name"/>
<button type="submit" disabled={isPending}>Update</button>
{error &&<p>{error}</p>}
</form>
);
}


下面就來看看這些新的 Actions 功能的作用和使用方法。

全新 Hook：useActionState

為了讓常見的 Action 用例更加簡便，因此添加了一個名為 useActionState 的新 Hook：

const[error, submitAction, isPending]=useActionState(async(previousState, newName)=>{
const error =awaitupdateName(newName);
if(error){
// 可以返回Action的任何結果，這裏只返回錯誤資訊。
return error;
}
// 處理成功的情況
});


useActionState 接受一個函式（即「Action」），並返回一個可呼叫的包裝 Action。這之所以能夠工作是因為Actions是可組合的。當呼叫包裝後的Action時， useActionState 將返回Action的最後一個結果作為數據，並將Action的掛起狀態作為 pending 返回。

React DOM: <form> Actions

在 React 19 中，Actions 與 react-dom 的新 <form> 特性進行了深度整合。現在，可以將函式作為 <form> 、 <input> 和 <button> 元素的 action 和 formAction 內容，以便自動使用 Actions 送出表單：

<form action={actionFunction}>


當 <form> 的 action 成功執行時，React會自動為不受控元件重設表單狀態。如果需要手動重設 <form> ，React DOM API 提供了全新的 requestFormReset 方法。

React DOM 新 Hook：useFormStatus

在構建設計系統時，經常需要建立一些設計元件，這些元件需要能夠存取其所在表單的狀態資訊，而不必透過層層傳遞 props 來實作。雖然透過 Context 也可以實作這一功能，但為了簡化常見場景下的使用，React 19 引入了一個新的 Hook useFormStatus ：

import{ useFormStatus }from'react-dom';
functionDesignButton(){
const{ pending }=useFormStatus();
return<button type="submit" disabled={pending}/>;
}


useFormStatus 可以讀取父級 <form> 的狀態，就像該表單是一個 Context provider 一樣。

全新 Hook：useOptimistic

在數據變更操作中，一種常見的 UI 模式是在異步請求執行期間樂觀地顯示預期的最終狀態。React 19 引入了新的 useOptimistic Hook，以簡化這一流程：

functionChangeName({currentName, onUpdateName}){
const[optimisticName, setOptimisticName]=useOptimistic(currentName);
constsubmitAction=async formData =>{
const newName = formData.get("name");
setOptimisticName(newName);
const updatedName =awaitupdateName(newName);
onUpdateName(updatedName);
};
return(
<form action={submitAction}>
<p>Your name is:{optimisticName}</p>
<p>
<label>Change Name:</label>
<input
type="text"
name="name"
disabled={currentName !== optimisticName}
/>
</p>
</form>
);
}


在這個例子中， useOptimistic Hook 允許在 updateName 請求還在進行時，立即將輸入框的值（即 newName ）設定為 optimisticName ，從而樂觀地更新UI。如果更新成功，則透過 onUpdateName 回呼函式來確認狀態的更改；如果更新失敗或發生錯誤，可以透過 setOptimisticName 回滾到原始狀態 currentName 。

全新 API：use

在React 19中，引入了一個全新的API—— use ，它允許在元件渲染時直接讀取資源。

舉個例子，可以使用 use 來讀取一個Promise物件，而React將會自動掛起（Suspend）元件的渲染，直到該Promise解析完成：

import{ use }from'react';
functionComments({ commentsPromise }){
// 使用use讀取Promise，React會在Promise解析前掛起元件渲染
const comments =use(commentsPromise);
return(
<div>
{comments.map((comment)=>(
<p key={comment.id}>{comment.text}</p>
))}
</div>
);
}
functionPage({ commentsPromise }){
// 當Comments元件因use掛起時，這裏會顯示Suspense的fallback內容
return(
<Suspense fallback={<div>載入中...</div>}>
<Comments commentsPromise={commentsPromise}/>
</Suspense>
);
}


同樣可以使用 use 來讀取上下文（Context），從而實作在特定條件下（例如早期返回之後）按需讀取上下文數據。

早期返回 指的是在函式或方法中的某個點提前結束執行，並返回結果或結束，而不是繼續執行剩余的程式碼。在函式內部，根據某些條件或邏輯，你可能會決定不需要繼續執行後續的程式碼，此時可以使用 return 語句來立即結束函式。

import{use}from'react';
import ThemeContext from'./ThemeContext'
functionHeading({children}){
if(children ==null){
returnnull;
}
// 使用 useContext 在這裏不會生效 ，因為存在早期返回。
const theme =use(ThemeContext);
return(
<h1 style={{color: theme.color}}>
{children}
</h1>
);
}


use API 的呼叫僅限於渲染階段，與 React 的 Hook 類似。然而，與 Hook 不同的是， use API 允許在條件語句中靈活呼叫。展望未來，React 團隊計劃進一步擴充套件 use API 的功能，提供更多在渲染時消費資源的方式。

React 伺服器元件

伺服器元件

伺服器元件是一種創新性的技術，它允許在打包前，在獨立於客戶端應用程式或伺服器端渲染（SSR）伺服器的環境中預先渲染元件。這個獨立的環境即為React伺服器元件中的「伺服器」。伺服器元件有兩種執行模式：一種是在構建時（例如在持續整合伺服器上）執行一次；另一種是針對每個請求，透過 Web 伺服器進行即時執行。

React 19 全面整合了來自 Canary 頻道的所有伺服器元件特性。這意味著，那些帶有伺服器元件的庫現在可以將 React 19 作為對等依賴項進行目標定位，並透過 react-server 匯出條件，為支持全棧 React 架構的框架提供強大的支持。

伺服器操作

伺服器動作是一項強大功能，它允許客戶端元件呼叫並執行在伺服端的異步函式。

透過「use server」指令定義伺服器操作後，框架將智慧地建立一個指向伺服端函式的參照，並安全地將該參照傳遞給客戶端元件。當客戶端元件需要呼叫這個函式時，React 會負責向伺服器發送請求，執行相應的函式，並將結果返回給客戶端。

伺服器操作的建立非常靈活，既可以在伺服器元件內部建立，並作為內容傳遞給客戶端元件使用；也可以直接在客戶端元件中匯入並呼叫。這種設計使得伺服器操作能夠無縫整合到套用中，實作前後端數據的流暢互動。

功能改進

ref 作為內容

從 React 19 開始，可以將 ref 作為函陣列件的參數進行存取：

functionMyInput({placeholder, ref}){
return<input placeholder={placeholder} ref={ref}/>
}
//...
<MyInput ref={ref}/>


新的函陣列件將不再需要 forwardRef ，React 團隊將會釋出一個程式碼轉換工具來自動更新元件，以使用新的 ref 內容。在未來的版本中，將棄用並移除 forwardRef 。

水合錯誤報告

React 19 在 react-dom 中對水合錯誤的報告進行了最佳化。過去，在開發模式下遇到水合不匹配時，系統往往只記錄多個錯誤，而缺乏關於不匹配內容的具體資訊。現在，引入了 diff 功能，使得客戶端渲染與伺服端渲染內容之間的差異一目了然。這一改進不僅提升了錯誤報告的解析度，更有助於開發者迅速定位並修復水合相關問題，從而大幅提升開發效率。

作為提供者

React 19 允許直接將 <Context> 用作提供者，而無需使用傳統的 <Context.Provider> 寫法：

const ThemeContext =createContext('');
functionApp({children}){
return(
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}


這種新的語法更加簡潔直觀。為了方便開發者升級現有程式碼，React 團隊將釋出一個程式碼轉換工具，能夠自動將現有的 <Context.Provider> 轉換為新的 <Context> 提供者。未來版本中，將逐步棄用 <Context.Provider> ，以推動 React 社群向更加簡化的語法過渡。

refs 清理函式

現在支持從 ref 回呼函式中返回一個清理函式：

<input
ref={(ref)=>{
// 建立 ref
// 新增：返回一個清理函式，當元素從 DOM 中移除時重設 ref。
return()=>{
// ref 的清理工作
};
}}
/>


當元件解除安裝時，React 將呼叫從 ref 回呼函式中返回的清理函式。這適用於 DOM refs 、類元件的 refs 以及 useImperativeHandle 。

由於引入了 ref 清理函式的機制，現在 TypeScript 將拒絕從 ref 回呼函式中返回除清理函式以外的任何內容。為了避免這個問題，我們通常建議避免使用隱式返回，比如將賦值操作放在花括弧中，如下所示：

<div ref={current =>(instance = current)}/>


<div ref={current =>{ instance = current;}}/>


這種改變是因為 TypeScript 無法判斷原始程式碼中返回的是否應該是清理函式，還是無意中的隱式返回值。透過將賦值操作明確地包裹在花括弧中，確保了 ref 回呼中不會意外地返回任何值，除非有意為之。

為了自動化這種模式的轉換，可以使用 no-implicit-ref-callback-return 規則進行程式碼轉換。這將幫助你在升級 React 版本時更順暢地處理 ref 相關的程式碼。

useDeferredValue 的初始值

React 19 為 useDeferredValue 引入了 initialValue 選項，該選項允許指定元件首次渲染時返回的值。

functionSearch({ deferredValue }){
// 在元件首次渲染時，返回 initialValue 作為 value。
// 隨後，useDeferredValue 會在後台計劃一次重渲染，使用 deferredValue 作為新的 value。
const value =useDeferredValue(deferredValue,{initialValue:''});
return(
<Resultsquery={value}/>
);
}


使用 initialValue 可以確保元件在首次渲染時能夠立即顯示一個占位值，而無需等待 deferredValue 的異步計算完成。隨後，當 deferredValue 準備好時， useDeferredValue 會觸發元件的後台重渲染，以顯示最新的值。這有助於提升套用的響應性和使用者體驗。

文件後設資料支持

在HTML中，諸如 <title> 、 <link> 和 <meta> 等文件後設資料標簽通常放置在 <head> 區域內。然而，在React套用中，決定哪些後設資料適用於當前頁面的元件可能並不直接位於渲染 <head> 的位置，甚至React可能根本不直接渲染 <head> 。過去，這些後設資料標簽需要手動透過 effect 或借助如 react-helmet 這樣的庫進行插入，且在伺服器渲染React套用時需要特別小心處理。

React 19引入了原生支持在元件中渲染文件後設資料標簽的功能。這意味著可以直接在元件內部定義這些標簽，React會自動將它們提升到文件的 <head> 部份。這一改進確保了後設資料標簽能夠在僅客戶端套用、流式伺服端渲染（SSR）以及伺服器元件等場景下正常工作。

下面是一個簡單的範例，展示了如何在React元件中定義並使用這些後設資料標簽：

functionBlogPost({ post }){
return(
<article>
<h1>{post.title}</h1>
{/* 直接在元件內部定義後設資料標簽 */}
<title>{post.title}</title>
<meta name="author"content="Josh"/>
<link rel="author"href="https://twitter.com/joshcstory/"/>
<meta name="keywords"content={post.keywords.join(', ')}/>
<p>
Eee equals em-see-squared...
</p>
</article>
);
}


在這個 BlogPost 元件中，盡管 <title> 、 <meta> 和 <link> 標簽被定義在了 <article> 內部，但React會在渲染時自動將它們移至文件的 <head> 區域。這種方式簡化了後設資料的管理，還增強了React套用在各種渲染模式下的相容性和靈活性。

樣式表支持

在Web開發中，樣式表的管理至關重要，無論是透過外部連結（ <link rel=" stylesheet" href="..."> ）還是內嵌方式（ < style>...</ style> ）引入，都需要在 DOM 中精準布局，以確保樣式優先級得到妥善處理。然而，構建一個能夠支持元件內部樣式表組合的機制往往十分繁瑣，因此開發者常常面臨權衡：要麽將樣式遠離其依賴的元件載入，犧牲組織性；要麽依賴外部樣式庫，增加額外的復雜性。

React 19 針對這一挑戰提供了內建支持，不僅簡化了樣式表的管理流程，還進一步增強了與客戶端並行渲染和伺服器端流式渲染的整合能力。透過指定樣式表的優先級，React 將自動處理樣式表在DOM中的插入順序，確保在展示依賴於特定樣式規則的內容之前，相關的樣式表（無論外部還是內嵌）已經被載入並套用。

functionComponentOne(){
return(
<Suspensefallback="loading...">
<link rel=" stylesheet"href="foo"precedence="default"/>
<link rel=" stylesheet"href="bar"precedence="high"/>
<article class="foo- class bar- class">
{...}
</article>
</Suspense>
)
}
functionComponentTwo(){
return(
<div>
<p>{...}</p>
<link rel=" stylesheet"href="baz"precedence="default"/> <-- will be inserted between foo & bar
</div>
)
}


在伺服端渲染過程中，React會將樣式表包含在 <head> 標簽中，以確保瀏覽器在載入完成前不會進行頁面繪制。如果在已經開始流式傳輸後才發現樣式表，React 將確保在客戶端將樣式表插入到 <head> 標簽中，然後再展示依賴於該樣式表的Suspense邊界的內容。

在客戶端渲染過程中，React會等待新渲染的樣式表載入完成後再送出渲染結果。如果在套用中的多個位置渲染了這個元件，React將確保樣式表在文件中只被包含一次。

functionApp(){
return<>
<ComponentOne/>
...
<ComponentOne/> // 不會導致 DOM 中出現重復的樣式表連結
</>
}


對於那些習慣於手動載入樣式表的開發者來說，React 19 的這一改進為他們提供了一個便利的機會。現在，可以將樣式表直接放在依賴它們的元件旁邊，這不僅有助於提升程式碼的可讀性和可維護性，使得開發者可以更加清晰地了解每個元件的樣式依賴關系，而且還能夠確保只載入真正需要的樣式表。

此外，樣式庫和與打包器整合的樣式工具也可以采用這一新特性。即使開發者不直接渲染自己的樣式表，只要他們所使用的工具升級到支持這一功能，他們同樣能夠享受到這一改進帶來的好處。

異步指令碼支持

在HTML中，普通指令碼（ <script src="..."> ）和延遲指令碼（ <script defer src="..."> ）按照文件順序載入，這限制了它們在元件樹深處的靈活使用。然而，異步指令碼能夠以任意順序載入，為開發者提供了更大的靈活性。

React 19 針對異步指令碼提供了增強的支持，允許開發者在元件樹的任何位置渲染它們，直接放在實際依賴該指令碼的元件內部。這大大簡化了指令碼的管理，無需再擔心指令碼例項的重新定位和去重問題。

現在，你可以在元件中這樣使用異步指令碼：

functionMyComponent(){
return(
<div>
<script asyncsrc="..."/>
Hello World
</div>
);
}
functionApp(){
return(
<html>
<body>
<MyComponent/>
...
<MyComponent/> // 不會導致DOM中出現重復的指令碼
</body>
</html>
);
}


在所有渲染環境中，異步指令碼都將進行去重處理，因此即使多個不同的元件渲染了同一個指令碼，React 也只會載入和執行該指令碼一次。

在伺服端渲染中，異步指令碼將被包含在 <head> 標簽中，並優先於阻止繪制的更關鍵資源（如樣式表、字型和影像預載入）之後載入。

資源預載入支持

在文件初始載入和客戶端更新時，及時告知瀏覽器可能即將需要載入的資源，對於提升頁面效能至關重要。React 19 引入了一系列新的API，旨在簡化瀏覽器資源的載入和預載入過程，讓開發者能夠構建出流暢且高效的使用者體驗。

import{ prefetchDNS, preconnect, preload, preinit }from'react-dom';
functionMyComponent(){
preinit('https://.../path/to/some/script.js',{as:'script'});// 提前載入並執行指令碼
preload('https://.../path/to/font.woff',{as:'font'});// 預載入字型
preload('https://.../path/to/ stylesheet.css',{as:' style'});// 預載入樣式表
prefetchDNS('https://...');// 當可能會從該主機請求資源但尚不確定時
preconnect('https://...');// 當確定會從該主機請求資源但不確定具體資源時
}


這些 API 呼叫會在渲染元件時生成相應的DOM標簽，如下所示：

<html>
<head>
<!-- 連結根據其對頁面載入的貢獻程度進行優先級排序 -->
<link rel="prefetch-dns"href="https://..."><!-- DNS預獲取 -->
<link rel="preconnect"href="https://..."><!-- 提前建立連線 -->
<link rel="preload"as="font"href="https://.../path/to/font.woff"><!-- 預載入字型 -->
<link rel="preload"as=" style"href="https://.../path/to/ stylesheet.css"><!-- 預載入樣式表 -->
<script asyncsrc="https://.../path/to/some/script.js"></script><!-- 異步載入並執行指令碼 -->
</head>
<body>
...
</body>
</html>


透過利用這些API，開發者可以最佳化頁面的初始載入速度，減少使用者等待時間。同時，在客戶端更新時，預取和預載入資源也能幫助加快導航速度，提升使用者體驗。無論是透過預載入字型和樣式表來減少頁面渲染阻塞，還是透過預取DNS和預連線來加速資源請求，這些API都為開發者提供了強大的工具，使資源載入更加智慧和高效。

與第三方指令碼和擴充套件的相容性

在React 19中，對掛載過程進行了最佳化，以更好地相容第三方指令碼和瀏覽器擴充套件。

在客戶端掛載時，如果渲染的元素與伺服器返回的HTML中的元素不一致，React會觸發客戶端的重新渲染，以確保內容的正確性。然而，過去，若第三方指令碼或瀏覽器擴充套件插入了某些元素，這會導致不匹配錯誤並觸發不必要的客戶端渲染。

現在，React 19 能夠智慧地跳過 <head> 和 <body> 中的意外標簽，從而避免了因這些元素引發的不匹配錯誤。即使因為其他原因需要進行整個文件的重新渲染，React也會保留由第三方指令碼和瀏覽器擴充套件插入的樣式表，確保頁面的完整性和一致性。

更好的錯誤報告

React 19 對錯誤處理進行了最佳化，旨在消除錯誤資訊的重復，並為處理捕獲和未捕獲的錯誤提供了更多選項。例如，當渲染過程中發生錯誤並被錯誤邊界捕獲時，以前 React 會重復丟擲相同的錯誤（一次是原始錯誤，另一次是在嘗試自動恢復失敗後），然後呼叫 console.error 輸出錯誤發生位置的資訊。

這種處理方式導致每個被捕獲的錯誤都會被報告三次：

這些新增選項不僅增強了React的錯誤處理能力，還賦予了開發者在不同錯誤場景下執行特定邏輯的能力。無論是進行錯誤日誌的記錄、發送錯誤報告，還是執行其他自訂操作，這些選項都能滿足開發者的需求，幫助他們更有效地管理和應對React套用中的錯誤情況。

自訂元素支持

React 19 現已正式加入對自訂元素的全方位支持，並成功透過 Custom Elements Everywhere 的所有測試。

在過去，React 對於自訂元素的處理並不盡如人意，因為它往往將未辨識的內容（props）預設為內容（attributes）而非內容（properties）。然而，在 React 19 中增加了對內容的支持，這種支持既適用於客戶端也適用於伺服器端渲染（SSR），具體策略如下：

React 19 升級指南

React 19 的升級帶來了一系列重要的改進，盡管其中涉及到一些破壞性變更，但 React 團隊已經努力使升級過程變得更順暢，預計對大多數套用的影響有限。

註意： 此 beta 版的主要目的是幫助庫開發者為即將到來的React 19做好準備。對於套用開發者而言，建議先升級到React 18.3.0 版本，並耐心等待 React 19 穩定版的釋出。React 團隊正與庫開發者緊密合作，並根據他們的反饋進行必要的調整和改進。為了降低升級難度，React 同步推出了 18.3 版本，以幫助開發者更好地適應未來的變更。

React 19 升級指南： https://react.dev/blog/2024/04/25/react-19-upgrade-guide