React 19 終于來了！帶來了諸多新特性和改進
早在數(shù)月前，React 團隊便預告了 React 19 的積極開發(fā)，并預計上半年發(fā)布。 4 月 25 日，React 終于發(fā)布了 v19 測試版。該版本主要面向各大庫，以確保它們與 React 19 的兼容性。因此，建議開發(fā)者先升級至最新的穩(wěn)定版 18.3.0，靜待 React 19 的正式版發(fā)布。
React 19 帶來了諸多新特性和改進，不僅提升了開發(fā)者的使用體驗，還進一步優(yōu)化了 React 應用的性能。為了讓開發(fā)者能夠平穩(wěn)過渡到 React 19，React 團隊特意準備了一份詳盡的升級指南，詳細列出了升級步驟和可能遇到的重大變化。
接下來，本文將剖析 React 18.3 與 React 19 的更新內容，并探索 React 19 的升級指南，助力更好地擁抱這一重大更新！
React 18.3 更新內容
React 18.3 相對于 18.2 增加了對廢棄 API 的警告以及其他為 React 19 所需的更改。
- React
- 允許向 this.refs 寫入以支持字符串 ref 的代碼模式轉換。
- 在 StrictMode 外部使用已廢棄的 findDOMNode 時，將發(fā)出警告。
- 對使用已廢棄的測試工具方法時發(fā)出警告。
- 在 StrictMode 外部使用已廢棄的遺留 Context 時，將發(fā)出警告。
- 在 StrictMode 外部使用已廢棄的字符串 ref 時，將發(fā)出警告。
- 對函數(shù)組件中使用已廢棄的 defaultProps 發(fā)出警告。
- 當在組件或元素中展開 key 時，將發(fā)出警告。
- 從測試工具中使用 act 時，如果方式不當，將發(fā)出警告。
- React DOM
- 對使用已廢棄的 unmountComponentAtNode 方法時發(fā)出警告。
- 對使用已廢棄的 renderToStaticNodeStream 方法時發(fā)出警告。
React 19 更新內容
Actions
在React應用中，執(zhí)行數(shù)據(jù)變更并據(jù)此更新狀態(tài)是一個常見的需求。比如，用戶提交表單以更改姓名時，我們會發(fā)起API請求并處理其響應。以往，我們不得不手動管理掛起狀態(tài)、錯誤處理、樂觀更新以及順序請求等邏輯。
例如，可以使用useState來處理掛起和錯誤狀態(tài)：
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);
const handleSubmit = async () => {
setIsPending(true);
const error = await updateName(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 中增加了對在轉換中使用異步函數(shù)的支持，以自動處理掛起狀態(tài)、錯誤、表單和樂觀更新。
例如，可以使用useTransition來自動處理掛起狀態(tài)：
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = async () => {
startTransition(async () => {
const error = await updateName(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狀態(tài)設為true，發(fā)起異步請求，并在轉換完成后將isPending設置為false。這樣可以確保數(shù)據(jù)變化時，UI 仍然保持響應和交互性。
在 Actions 功能的基礎上，React 19 還推出了useOptimistic Hook 來簡化樂觀更新的管理，以及 React.useActionState Hook來處理 Actions 的常見場景。同時，在 react-dom 中，新增了<form> Actions 來自動管理表單操作，并提供了useFormStatus 來支持表單中 Actions 的常見需求。
在 React 19 中，上面的例子可以簡化為：
function ChangeName({ name, setName }) {
const [error, submitAction, isPending] = useActionState(
async (previousState, formData) => {
const error = await updateName(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 = await updateName(newName);
if (error) {
// 可以返回Action的任何結果，這里只返回錯誤信息。
return error;
}
// 處理成功的情況
});useActionState接受一個函數(shù)（即“Action”），并返回一個可調用的包裝 Action。這之所以能夠工作是因為Actions是可組合的。當調用包裝后的Action時，useActionState將返回Action的最后一個結果作為數(shù)據(jù)，并將Action的掛起狀態(tài)作為pending返回。
React DOM: <form> Actions
在 React 19 中，Actions 與 react-dom 的新 <form> 特性進行了深度整合?，F(xiàn)在，可以將函數(shù)作為<form>、<input>和<button>元素的action和formAction屬性，以便自動使用 Actions 提交表單：
<form action={actionFunction}>當<form>的action成功執(zhí)行時，React會自動為不受控組件重置表單狀態(tài)。如果需要手動重置<form>，React DOM API 提供了全新的requestFormReset方法。
React DOM 新 Hook：useFormStatus
在構建設計系統(tǒng)時，經常需要創(chuàng)建一些設計組件，這些組件需要能夠訪問其所在表單的狀態(tài)信息，而不必通過層層傳遞props來實現(xiàn)。雖然通過Context也可以實現(xiàn)這一功能，但為了簡化常見場景下的使用，React 19 引入了一個新的 Hook useFormStatus：
import { useFormStatus } from 'react-dom';
function DesignButton() {
const { pending } = useFormStatus();
return <button type="submit" disabled={pending} />;
}useFormStatus可以讀取父級<form>的狀態(tài)，就像該表單是一個Contextprovider 一樣。
全新 Hook：useOptimistic
在數(shù)據(jù)變更操作中，一種常見的 UI 模式是在異步請求執(zhí)行期間樂觀地顯示預期的最終狀態(tài)。React 19 引入了新的useOptimistic Hook，以簡化這一流程：
function ChangeName({currentName, onUpdateName}) {
const [optimisticName, setOptimisticName] = useOptimistic(currentName);
const submitAction = async formData => {
const newName = formData.get("name");
setOptimisticName(newName);
const updatedName = await updateName(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回調函數(shù)來確認狀態(tài)的更改；如果更新失敗或發(fā)生錯誤，可以通過setOptimisticName回滾到原始狀態(tài)currentName。
全新 API：use
在React 19中，引入了一個全新的API——use，它允許在組件渲染時直接讀取資源。
舉個例子，可以使用use來讀取一個Promise對象，而React將會自動掛起（Suspend）組件的渲染，直到該Promise解析完成：
import { use } from 'react';
function Comments({ commentsPromise }) {
// 使用use讀取Promise，React會在Promise解析前掛起組件渲染
const comments = use(commentsPromise);
return (
<div>
{comments.map((comment) => (
<p key={comment.id}>{comment.text}</p>
))}
</div>
);
}
function Page({ commentsPromise }) {
// 當Comments組件因use掛起時，這里會顯示Suspense的fallback內容
return (
<Suspense fallback={<div>加載中...</div>}>
<Comments commentsPromise={commentsPromise} />
</Suspense>
);
}同樣可以使用use來讀取上下文（Context），從而實現(xiàn)在特定條件下（例如早期返回之后）按需讀取上下文數(shù)據(jù)。
早期返回指的是在函數(shù)或方法中的某個點提前結束執(zhí)行，并返回結果或退出，而不是繼續(xù)執(zhí)行剩余的代碼。在函數(shù)內部，根據(jù)某些條件或邏輯，你可能會決定不需要繼續(xù)執(zhí)行后續(xù)的代碼，此時可以使用return語句來立即退出函數(shù)。
import {use} from 'react';
import ThemeContext from './ThemeContext'
function Heading({children}) {
if (children == null) {
return null;
}
// 使用 useContext 在這里不會生效 ，因為存在早期返回。
const theme = use(ThemeContext);
return (
<h1 style={{color: theme.color}}>
{children}
</h1>
);
}use API 的調用僅限于渲染階段，與 React 的 Hook 類似。然而，與 Hook 不同的是，use API 允許在條件語句中靈活調用。展望未來，React 團隊計劃進一步擴展 use API 的功能，提供更多在渲染時消費資源的方式。
React 服務器組件
服務器組件
服務器組件是一種創(chuàng)新性的技術，它允許在打包前，在獨立于客戶端應用程序或服務器端渲染（SSR）服務器的環(huán)境中預先渲染組件。這個獨立的環(huán)境即為React服務器組件中的“服務器”。服務器組件有兩種運行模式：一種是在構建時（例如在持續(xù)集成服務器上）運行一次；另一種是針對每個請求，通過 Web 服務器進行實時運行。
React 19 全面集成了來自 Canary 頻道的所有服務器組件特性。這意味著，那些帶有服務器組件的庫現(xiàn)在可以將 React 19 作為對等依賴項進行目標定位，并通過 react-server 導出條件，為支持全棧 React 架構的框架提供強大的支持。
服務器操作
服務器動作是一項強大功能，它允許客戶端組件調用并執(zhí)行在服務端的異步函數(shù)。
通過“use server”指令定義服務器操作后，框架將智能地創(chuàng)建一個指向服務端函數(shù)的引用，并安全地將該引用傳遞給客戶端組件。當客戶端組件需要調用這個函數(shù)時，React 會負責向服務器發(fā)送請求，執(zhí)行相應的函數(shù)，并將結果返回給客戶端。
服務器操作的創(chuàng)建非常靈活，既可以在服務器組件內部創(chuàng)建，并作為屬性傳遞給客戶端組件使用；也可以直接在客戶端組件中導入并調用。這種設計使得服務器操作能夠無縫集成到應用中，實現(xiàn)前后端數(shù)據(jù)的流暢交互。
功能改進
ref 作為屬性
從 React 19 開始，可以將 ref 作為函數(shù)組件的參數(shù)進行訪問：
function MyInput({placeholder, ref}) {
return <input placeholder={placeholder} ref={ref} />
}
//...
<MyInput ref={ref} />新的函數(shù)組件將不再需要 forwardRef，React 團隊將會發(fā)布一個代碼轉換工具來自動更新組件，以使用新的 ref 屬性。在未來的版本中，將棄用并移除 forwardRef。
水合錯誤報告
React 19 在 react-dom 中對水合錯誤的報告進行了優(yōu)化。過去，在開發(fā)模式下遇到水合不匹配時，系統(tǒng)往往只記錄多個錯誤，而缺乏關于不匹配內容的具體信息?，F(xiàn)在，引入了 diff 功能，使得客戶端渲染與服務端渲染內容之間的差異一目了然。這一改進不僅提升了錯誤報告的清晰度，更有助于開發(fā)者迅速定位并修復水合相關問題，從而大幅提升開發(fā)效率。
現(xiàn)在只會記錄一條包含不匹配內容差異的消息：
作為提供者
React 19 允許直接將 <Context> 用作提供者，而無需使用傳統(tǒng)的 <Context.Provider> 寫法：
const ThemeContext = createContext('');
function App({children}) {
return (
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}這種新的語法更加簡潔直觀。為了方便開發(fā)者升級現(xiàn)有代碼，React 團隊將發(fā)布一個代碼轉換工具，能夠自動將現(xiàn)有的 <Context.Provider> 轉換為新的 <Context> 提供者。未來版本中，將逐步棄用 <Context.Provider>，以推動 React 社區(qū)向更加簡化的語法過渡。
refs 清理函數(shù)
現(xiàn)在支持從 ref 回調函數(shù)中返回一個清理函數(shù)：
<input
ref={(ref) => {
// 創(chuàng)建 ref
// 新增：返回一個清理函數(shù)，當元素從 DOM 中移除時重置 ref。
return () => {
// ref 的清理工作
};
}}
/>當組件卸載時，React 將調用從 ref 回調函數(shù)中返回的清理函數(shù)。這適用于 DOM refs、類組件的 refs 以及 useImperativeHandle。
由于引入了 ref 清理函數(shù)的機制，現(xiàn)在 TypeScript 將拒絕從 ref 回調函數(shù)中返回除清理函數(shù)以外的任何內容。為了避免這個問題，我們通常建議避免使用隱式返回，比如將賦值操作放在花括號中，如下所示：
- 原來的寫法：
<div ref={current => (instance = current)} />- 優(yōu)化后的寫法：
<div ref={current => { instance = current; }} />這種改變是因為 TypeScript 無法判斷原始代碼中返回的是否應該是清理函數(shù)，還是無意中的隱式返回值。通過將賦值操作明確地包裹在花括號中，確保了 ref 回調中不會意外地返回任何值，除非有意為之。
為了自動化這種模式的轉換，可以使用 no-implicit-ref-callback-return 規(guī)則進行代碼轉換。這將幫助你在升級 React 版本時更順暢地處理 ref 相關的代碼。
useDeferredValue 的初始值
React 19 為 useDeferredValue 引入了 initialValue 選項，該選項允許指定組件首次渲染時返回的值。
function Search({ deferredValue }) {
// 在組件首次渲染時，返回 initialValue 作為 value。
// 隨后，useDeferredValue 會在后臺計劃一次重渲染，使用 deferredValue 作為新的 value。
const value = useDeferredValue(deferredValue, { initialValue: '' });
return (
<Results query={value} />
);
}使用 initialValue 可以確保組件在首次渲染時能夠立即顯示一個占位值，而無需等待 deferredValue 的異步計算完成。隨后，當 deferredValue 準備好時，useDeferredValue 會觸發(fā)組件的后臺重渲染，以顯示最新的值。這有助于提升應用的響應性和用戶體驗。
文檔元數(shù)據(jù)支持
在HTML中，諸如<title>、<link>和<meta>等文檔元數(shù)據(jù)標簽通常放置在<head>區(qū)域內。然而，在React應用中，決定哪些元數(shù)據(jù)適用于當前頁面的組件可能并不直接位于渲染<head>的位置，甚至React可能根本不直接渲染<head>。過去，這些元數(shù)據(jù)標簽需要手動通過effect或借助如react-helmet這樣的庫進行插入，且在服務器渲染React應用時需要特別小心處理。
React 19引入了原生支持在組件中渲染文檔元數(shù)據(jù)標簽的功能。這意味著可以直接在組件內部定義這些標簽，React會自動將它們提升到文檔的<head>部分。這一改進確保了元數(shù)據(jù)標簽能夠在僅客戶端應用、流式服務端渲染（SSR）以及服務器組件等場景下正常工作。
下面是一個簡單的示例，展示了如何在React組件中定義并使用這些元數(shù)據(jù)標簽：
function BlogPost({ post }) {
return (
<article>
<h1>{post.title}</h1>
{/* 直接在組件內部定義元數(shù)據(jù)標簽 */}
<title>{post.title}</title>
<meta name="author" content="Josh" />
<link rel="author" />
<meta name="keywords" content={post.keywords.join(', ')} />
<p>
Eee equals em-see-squared...
</p>
</article>
);
}在這個BlogPost組件中，盡管<title>、<meta>和<link>標簽被定義在了<article>內部，但React會在渲染時自動將它們移至文檔的<head>區(qū)域。這種方式簡化了元數(shù)據(jù)的管理，還增強了React應用在各種渲染模式下的兼容性和靈活性。
樣式表支持
在Web開發(fā)中，樣式表的管理至關重要，無論是通過外部鏈接（<link rel="stylesheet" href="...">）還是內嵌方式（<style>...</style>）引入，都需要在 DOM 中精準布局，以確保樣式優(yōu)先級得到妥善處理。然而，構建一個能夠支持組件內部樣式表組合的機制往往十分繁瑣，因此開發(fā)者常常面臨權衡：要么將樣式遠離其依賴的組件加載，犧牲組織性；要么依賴外部樣式庫，增加額外的復雜性。
React 19 針對這一挑戰(zhàn)提供了內置支持，不僅簡化了樣式表的管理流程，還進一步增強了與客戶端并發(fā)渲染和服務器端流式渲染的集成能力。通過指定樣式表的優(yōu)先級，React 將自動處理樣式表在DOM中的插入順序，確保在展示依賴于特定樣式規(guī)則的內容之前，相關的樣式表（無論外部還是內嵌）已經被加載并應用。
function ComponentOne() {
return (
<Suspense fallback="loading...">
<link rel="stylesheet" href="foo" precedence="default" />
<link rel="stylesheet" href="bar" precedence="high" />
<article class="foo-class bar-class">
{...}
</article>
</Suspense>
)
}
function ComponentTwo() {
return (
<div>
<p>{...}</p>
<link rel="stylesheet" href="baz" precedence="default" /> <-- will be inserted between foo & bar
</div>
)
}在服務端渲染過程中，React會將樣式表包含在<head>標簽中，以確保瀏覽器在加載完成前不會進行頁面繪制。如果在已經開始流式傳輸后才發(fā)現(xiàn)樣式表，React 將確保在客戶端將樣式表插入到<head>標簽中，然后再展示依賴于該樣式表的Suspense邊界的內容。
在客戶端渲染過程中，React會等待新渲染的樣式表加載完成后再提交渲染結果。如果在應用中的多個位置渲染了這個組件，React將確保樣式表在文檔中只被包含一次。
function App() {
return <>
<ComponentOne />
...
<ComponentOne /> // 不會導致 DOM 中出現(xiàn)重復的樣式表鏈接
</>
}對于那些習慣于手動加載樣式表的開發(fā)者來說，React 19 的這一改進為他們提供了一個便利的機會。現(xiàn)在，可以將樣式表直接放在依賴它們的組件旁邊，這不僅有助于提升代碼的可讀性和可維護性，使得開發(fā)者可以更加清晰地了解每個組件的樣式依賴關系，而且還能夠確保只加載真正需要的樣式表。
此外，樣式庫和與打包器集成的樣式工具也可以采用這一新特性。即使開發(fā)者不直接渲染自己的樣式表，只要他們所使用的工具升級到支持這一功能，他們同樣能夠享受到這一改進帶來的好處。
異步腳本支持
在HTML中，普通腳本（<script src="...">）和延遲腳本（<script defer src="...">）按照文檔順序加載，這限制了它們在組件樹深處的靈活使用。然而，異步腳本能夠以任意順序加載，為開發(fā)者提供了更大的靈活性。
React 19 針對異步腳本提供了增強的支持，允許開發(fā)者在組件樹的任何位置渲染它們，直接放在實際依賴該腳本的組件內部。這大大簡化了腳本的管理，無需再擔心腳本實例的重新定位和去重問題。
現(xiàn)在，你可以在組件中這樣使用異步腳本：
function MyComponent() {
return (
<div>
<script async src="..." />
Hello World
</div>
);
}
function App() {
return (
<html>
<body>
<MyComponent />
...
<MyComponent /> // 不會導致DOM中出現(xiàn)重復的腳本
</body>
</html>
);
}在所有渲染環(huán)境中，異步腳本都將進行去重處理，因此即使多個不同的組件渲染了同一個腳本，React 也只會加載和執(zhí)行該腳本一次。
在服務端渲染中，異步腳本將被包含在<head>標簽中，并優(yōu)先于阻止繪制的更關鍵資源（如樣式表、字體和圖像預加載）之后加載。
資源預加載支持
在文檔初始加載和客戶端更新時，及時告知瀏覽器可能即將需要加載的資源，對于提升頁面性能至關重要。React 19 引入了一系列新的API，旨在簡化瀏覽器資源的加載和預加載過程，讓開發(fā)者能夠構建出流暢且高效的用戶體驗。
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
function MyComponent() {
preinit('https://.../path/to/some/script.js', { as: 'script' }); // 提前加載并執(zhí)行腳本
preload('https://.../path/to/font.woff', { as: 'font' }); // 預加載字體
preload('https://.../path/to/stylesheet.css', { as: 'style' }); // 預加載樣式表
prefetchDNS('https://...'); // 當可能會從該主機請求資源但尚不確定時
preconnect('https://...'); // 當確定會從該主機請求資源但不確定具體資源時
}這些 API 調用會在渲染組件時生成相應的DOM標簽，如下所示：
<html>
<head>
<!-- 鏈接根據(jù)其對頁面加載的貢獻程度進行優(yōu)先級排序 -->
<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 async src="https://.../path/to/some/script.js"></script> <!-- 異步加載并執(zhí)行腳本 -->
</head>
<body>
...
</body>
</html>通過利用這些API，開發(fā)者可以優(yōu)化頁面的初始加載速度，減少用戶等待時間。同時，在客戶端更新時，預取和預加載資源也能幫助加快導航速度，提升用戶體驗。無論是通過預加載字體和樣式表來減少頁面渲染阻塞，還是通過預取DNS和預連接來加速資源請求，這些API都為開發(fā)者提供了強大的工具，使資源加載更加智能和高效。
與第三方腳本和擴展的兼容性
在React 19中，對掛載過程進行了優(yōu)化，以更好地兼容第三方腳本和瀏覽器擴展。
在客戶端掛載時，如果渲染的元素與服務器返回的HTML中的元素不一致，React會觸發(fā)客戶端的重新渲染，以確保內容的正確性。然而，過去，若第三方腳本或瀏覽器擴展插入了某些元素，這會導致不匹配錯誤并觸發(fā)不必要的客戶端渲染。
現(xiàn)在，React 19 能夠智能地跳過<head>和<body>中的意外標簽，從而避免了因這些元素引發(fā)的不匹配錯誤。即使因為其他原因需要進行整個文檔的重新渲染，React也會保留由第三方腳本和瀏覽器擴展插入的樣式表，確保頁面的完整性和一致性。
更好的錯誤報告
React 19 對錯誤處理進行了優(yōu)化，旨在消除錯誤信息的重復，并為處理捕獲和未捕獲的錯誤提供了更多選項。例如，當渲染過程中發(fā)生錯誤并被錯誤邊界捕獲時，以前 React 會重復拋出相同的錯誤（一次是原始錯誤，另一次是在嘗試自動恢復失敗后），然后調用console.error輸出錯誤發(fā)生位置的信息。
這種處理方式導致每個被捕獲的錯誤都會被報告三次：
在 React 19 中將記錄單個錯誤，并包含所有錯誤信息：
此外，為了提供更細粒度的錯誤處理控制，還新增了兩個根選項來與onRecoverableError相輔相成：
- onCaughtError：當React在錯誤邊界中成功捕獲到錯誤時，此選項將被調用。
- onUncaughtError：當錯誤被拋出且未能被任何錯誤邊界捕獲時，此選項將被觸發(fā)。
- onRecoverableError：當錯誤發(fā)生但React能夠自動恢復時，該選項將起作用。
這些新增選項不僅增強了React的錯誤處理能力，還賦予了開發(fā)者在不同錯誤場景下執(zhí)行特定邏輯的能力。無論是進行錯誤日志的記錄、發(fā)送錯誤報告，還是執(zhí)行其他自定義操作，這些選項都能滿足開發(fā)者的需求，幫助他們更有效地管理和應對React應用中的錯誤情況。
自定義元素支持
React 19 現(xiàn)已正式加入對自定義元素的全方位支持，并成功通過 Custom Elements Everywhere 的所有測試。
在過去，React 對于自定義元素的處理并不盡如人意，因為它往往將未識別的屬性（props）默認為屬性（attributes）而非屬性（properties）。然而，在 React 19 中增加了對屬性的支持，這種支持既適用于客戶端也適用于服務器端渲染（SSR），具體策略如下：
- 在服務端渲染時，如果傳遞給自定義元素的屬性（props）是基本數(shù)據(jù)類型（如字符串、數(shù)字或值為true），它們將作為屬性（attributes）進行渲染。相反，如果屬性的類型是非基本類型（如對象、符號、函數(shù)或值為false），它們將不會被渲染，確保了數(shù)據(jù)的正確性和一致性。
- 在客戶端渲染時，React 19 則更加智能地處理屬性。如果屬性（props）與自定義元素實例上的屬性（properties）相匹配，它們將被直接設置為屬性（properties）。否則，它們將作為屬性（attributes）進行分配。這種處理方式不僅提升了性能，還使得React在處理自定義元素時更加準確和高效。
React 19 升級指南
React 19 的升級帶來了一系列重要的改進，盡管其中涉及到一些破壞性變更，但 React 團隊已經努力使升級過程變得更順暢，預計對大多數(shù)應用的影響有限。
注意： 此 beta 版的主要目的是幫助庫開發(fā)者為即將到來的React 19做好準備。對于應用開發(fā)者而言，建議先升級到React 18.3.0 版本，并耐心等待 React 19 穩(wěn)定版的發(fā)布。React 團隊正與庫開發(fā)者緊密合作，并根據(jù)他們的反饋進行必要的調整和改進。為了降低升級難度，React 同步推出了 18.3 版本，以幫助開發(fā)者更好地適應未來的變更。
React 19 升級指南：https://react.dev/blog/2024/04/25/react-19-upgrade-guide。
