早在數(shù)月前，React 團(tuán)隊(duì)便預(yù)告了 React 19 的積極開發(fā)，并預(yù)計(jì)上半年發(fā)布。 4 月 25 日，React 終于發(fā)布了 v19 測試版。該版本主要面向各大庫，以確保它們與 React 19 的兼容性。因此，建議開發(fā)者先升級至最新的穩(wěn)定版 18.3.0，靜待 React 19 的正式版發(fā)布。

React 19 帶來了諸多新特性和改進(jìn)，不僅提升了開發(fā)者的使用體驗(yàn)，還進(jìn)一步優(yōu)化了 React 應(yīng)用的性能。為了讓開發(fā)者能夠平穩(wěn)過渡到 React 19，React 團(tuán)隊(duì)特意準(zhǔn)備了一份詳盡的升級指南，詳細(xì)列出了升級步驟和可能遇到的重大變化。

接下來，本文將剖析 React 18.3 與 React 19 的更新內(nèi)容，并探索 React 19 的升級指南，助力更好地?fù)肀н@一重大更新！

React 18.3 更新內(nèi)容

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

1. React

• 允許向 this.refs 寫入以支持字符串 ref 的代碼模式轉(zhuǎn)換。
• 在 StrictMode 外部使用已廢棄的 findDOMNode 時(shí)，將發(fā)出警告。
• 對使用已廢棄的測試工具方法時(shí)發(fā)出警告。
• 在 StrictMode 外部使用已廢棄的遺留 Context 時(shí)，將發(fā)出警告。
• 在 StrictMode 外部使用已廢棄的字符串 ref 時(shí)，將發(fā)出警告。
• 對函數(shù)組件中使用已廢棄的 defaultProps 發(fā)出警告。
• 當(dāng)在組件或元素中展開 key 時(shí)，將發(fā)出警告。
• 從測試工具中使用 act 時(shí)，如果方式不當(dāng)，將發(fā)出警告。

2. React DOM
3. 對使用已廢棄的 unmountComponentAtNode 方法時(shí)發(fā)出警告。
4. 對使用已廢棄的 renderToStaticNodeStream 方法時(shí)發(fā)出警告。

React 19 更新內(nèi)容

Actions

在React應(yīng)用中，執(zhí)行數(shù)據(jù)變更并據(jù)此更新狀態(tài)是一個(gè)常見的需求。比如，用戶提交表單以更改姓名時(shí)，我們會(huì)發(fā)起API請求并處理其響應(yīng)。以往，我們不得不手動(dòng)管理掛起狀態(tài)、錯(cuò)誤處理、樂觀更新以及順序請求等邏輯。

例如，可以使用useState來處理掛起和錯(cuò)誤狀態(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 中增加了對在轉(zhuǎn)換中使用異步函數(shù)的支持，以自動(dòng)處理掛起狀態(tài)、錯(cuò)誤、表單和樂觀更新。

例如，可以使用useTransition來自動(dòng)處理掛起狀態(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>
  );
}

異步轉(zhuǎn)換會(huì)立刻將isPending狀態(tài)設(shè)為true，發(fā)起異步請求，并在轉(zhuǎn)換完成后將isPending設(shè)置為false。這樣可以確保數(shù)據(jù)變化時(shí)，UI 仍然保持響應(yīng)和交互性。

在 Actions 功能的基礎(chǔ)上，React 19 還推出了useOptimistic Hook 來簡化樂觀更新的管理，以及 React.useActionState Hook來處理 Actions 的常見場景。同時(shí)，在 react-dom 中，新增了<form> Actions 來自動(dòng)管理表單操作，并提供了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 用例更加簡便，因此添加了一個(gè)名為useActionState的新 Hook：

const [error, submitAction, isPending] = useActionState(async (previousState, newName) => {  
  const error = await updateName(newName);  
  
  if (error) {  
    // 可以返回Action的任何結(jié)果，這里只返回錯(cuò)誤信息。  
    return error;  
  }  
  
  // 處理成功的情況  
});

useActionState接受一個(gè)函數(shù)（即“Action”），并返回一個(gè)可調(diào)用的包裝 Action。這之所以能夠工作是因?yàn)锳ctions是可組合的。當(dāng)調(diào)用包裝后的Action時(shí)，useActionState將返回Action的最后一個(gè)結(jié)果作為數(shù)據(jù)，并將Action的掛起狀態(tài)作為pending返回。

React DOM: <form> Actions

在 React 19 中，Actions 與 react-dom 的新 <form> 特性進(jìn)行了深度整合?，F(xiàn)在，可以將函數(shù)作為<form>、<input>和<button>元素的action和formAction屬性，以便自動(dòng)使用 Actions 提交表單：

<form action={actionFunction}>

當(dāng)<form>的action成功執(zhí)行時(shí)，React會(huì)自動(dòng)為不受控組件重置表單狀態(tài)。如果需要手動(dòng)重置<form>，React DOM API 提供了全新的requestFormReset方法。

React DOM 新 Hook：useFormStatus

在構(gòu)建設(shè)計(jì)系統(tǒng)時(shí)，經(jīng)常需要?jiǎng)?chuàng)建一些設(shè)計(jì)組件，這些組件需要能夠訪問其所在表單的狀態(tài)信息，而不必通過層層傳遞props來實(shí)現(xiàn)。雖然通過Context也可以實(shí)現(xiàn)這一功能，但為了簡化常見場景下的使用，React 19 引入了一個(gè)新的 Hook useFormStatus：

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

useFormStatus可以讀取父級<form>的狀態(tài)，就像該表單是一個(gè)Contextprovider 一樣。

全新 Hook：useOptimistic

在數(shù)據(jù)變更操作中，一種常見的 UI 模式是在異步請求執(zhí)行期間樂觀地顯示預(yù)期的最終狀態(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>
  );
}

在這個(gè)例子中，useOptimistic Hook 允許在updateName請求還在進(jìn)行時(shí)，立即將輸入框的值（即newName）設(shè)置為optimisticName，從而樂觀地更新UI。如果更新成功，則通過onUpdateName回調(diào)函數(shù)來確認(rèn)狀態(tài)的更改；如果更新失敗或發(fā)生錯(cuò)誤，可以通過setOptimisticName回滾到原始狀態(tài)currentName。

全新 API：use

在React 19中，引入了一個(gè)全新的API——use，它允許在組件渲染時(shí)直接讀取資源。

舉個(gè)例子，可以使用use來讀取一個(gè)Promise對象，而React將會(huì)自動(dòng)掛起（Suspend）組件的渲染，直到該P(yáng)romise解析完成：

import { use } from 'react';  
  
function Comments({ commentsPromise }) {  
  // 使用use讀取Promise，React會(huì)在Promise解析前掛起組件渲染  
  const comments = use(commentsPromise);  
  
  return (  
    <div>  
      {comments.map((comment) => (  
        <p key={comment.id}>{comment.text}</p>  
      ))}  
    </div>  
  );  
}  
  
function Page({ commentsPromise }) {  
  // 當(dāng)Comments組件因use掛起時(shí)，這里會(huì)顯示Suspense的fallback內(nèi)容  
  return (  
    <Suspense fallback={<div>加載中...</div>}>  
      <Comments commentsPromise={commentsPromise} />  
    </Suspense>  
  );  
}

同樣可以使用use來讀取上下文（Context），從而實(shí)現(xiàn)在特定條件下（例如早期返回之后）按需讀取上下文數(shù)據(jù)。

早期返回指的是在函數(shù)或方法中的某個(gè)點(diǎn)提前結(jié)束執(zhí)行，并返回結(jié)果或退出，而不是繼續(xù)執(zhí)行剩余的代碼。在函數(shù)內(nèi)部，根據(jù)某些條件或邏輯，你可能會(huì)決定不需要繼續(xù)執(zhí)行后續(xù)的代碼，此時(shí)可以使用return語句來立即退出函數(shù)。

import {use} from 'react';
import ThemeContext from './ThemeContext'

function Heading({children}) {
  if (children == null) {
    return null;
  }
   
  // 使用 useContext 在這里不會(huì)生效 ，因?yàn)榇嬖谠缙诜祷亍?  const theme = use(ThemeContext);
  return (
    <h1 style={{color: theme.color}}>
      {children}
    </h1>
  );
}

use API 的調(diào)用僅限于渲染階段，與 React 的 Hook 類似。然而，與 Hook 不同的是，use API 允許在條件語句中靈活調(diào)用。展望未來，React 團(tuán)隊(duì)計(jì)劃進(jìn)一步擴(kuò)展 use API 的功能，提供更多在渲染時(shí)消費(fèi)資源的方式。

React 服務(wù)器組件

服務(wù)器組件

服務(wù)器組件是一種創(chuàng)新性的技術(shù)，它允許在打包前，在獨(dú)立于客戶端應(yīng)用程序或服務(wù)器端渲染（SSR）服務(wù)器的環(huán)境中預(yù)先渲染組件。這個(gè)獨(dú)立的環(huán)境即為React服務(wù)器組件中的“服務(wù)器”。服務(wù)器組件有兩種運(yùn)行模式：一種是在構(gòu)建時(shí)（例如在持續(xù)集成服務(wù)器上）運(yùn)行一次；另一種是針對每個(gè)請求，通過 Web 服務(wù)器進(jìn)行實(shí)時(shí)運(yùn)行。

React 19 全面集成了來自 Canary 頻道的所有服務(wù)器組件特性。這意味著，那些帶有服務(wù)器組件的庫現(xiàn)在可以將 React 19 作為對等依賴項(xiàng)進(jìn)行目標(biāo)定位，并通過 react-server 導(dǎo)出條件，為支持全棧 React 架構(gòu)的框架提供強(qiáng)大的支持。

服務(wù)器操作

服務(wù)器動(dòng)作是一項(xiàng)強(qiáng)大功能，它允許客戶端組件調(diào)用并執(zhí)行在服務(wù)端的異步函數(shù)。

通過“use server”指令定義服務(wù)器操作后，框架將智能地創(chuàng)建一個(gè)指向服務(wù)端函數(shù)的引用，并安全地將該引用傳遞給客戶端組件。當(dāng)客戶端組件需要調(diào)用這個(gè)函數(shù)時(shí)，React 會(huì)負(fù)責(zé)向服務(wù)器發(fā)送請求，執(zhí)行相應(yīng)的函數(shù)，并將結(jié)果返回給客戶端。

服務(wù)器操作的創(chuàng)建非常靈活，既可以在服務(wù)器組件內(nèi)部創(chuàng)建，并作為屬性傳遞給客戶端組件使用；也可以直接在客戶端組件中導(dǎo)入并調(diào)用。這種設(shè)計(jì)使得服務(wù)器操作能夠無縫集成到應(yīng)用中，實(shí)現(xiàn)前后端數(shù)據(jù)的流暢交互。

功能改進(jìn)

ref 作為屬性

從 React 19 開始，可以將 ref 作為函數(shù)組件的參數(shù)進(jìn)行訪問：

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

新的函數(shù)組件將不再需要 forwardRef，React 團(tuán)隊(duì)將會(huì)發(fā)布一個(gè)代碼轉(zhuǎn)換工具來自動(dòng)更新組件，以使用新的 ref 屬性。在未來的版本中，將棄用并移除 forwardRef。

水合錯(cuò)誤報(bào)告

React 19 在 react-dom 中對水合錯(cuò)誤的報(bào)告進(jìn)行了優(yōu)化。過去，在開發(fā)模式下遇到水合不匹配時(shí)，系統(tǒng)往往只記錄多個(gè)錯(cuò)誤，而缺乏關(guān)于不匹配內(nèi)容的具體信息。現(xiàn)在，引入了 diff 功能，使得客戶端渲染與服務(wù)端渲染內(nèi)容之間的差異一目了然。這一改進(jìn)不僅提升了錯(cuò)誤報(bào)告的清晰度，更有助于開發(fā)者迅速定位并修復(fù)水合相關(guān)問題，從而大幅提升開發(fā)效率。

現(xiàn)在只會(huì)記錄一條包含不匹配內(nèi)容差異的消息：

作為提供者

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

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

這種新的語法更加簡潔直觀。為了方便開發(fā)者升級現(xiàn)有代碼，React 團(tuán)隊(duì)將發(fā)布一個(gè)代碼轉(zhuǎn)換工具，能夠自動(dòng)將現(xiàn)有的 <Context.Provider> 轉(zhuǎn)換為新的 <Context> 提供者。未來版本中，將逐步棄用 <Context.Provider>，以推動(dòng) React 社區(qū)向更加簡化的語法過渡。

refs 清理函數(shù)

現(xiàn)在支持從 ref 回調(diào)函數(shù)中返回一個(gè)清理函數(shù)：

<input  
  ref={(ref) => {  
    // 創(chuàng)建 ref  
  
    // 新增：返回一個(gè)清理函數(shù)，當(dāng)元素從 DOM 中移除時(shí)重置 ref。  
    return () => {  
      // ref 的清理工作  
    };  
  }}  
/>

當(dāng)組件卸載時(shí)，React 將調(diào)用從 ref 回調(diào)函數(shù)中返回的清理函數(shù)。這適用于 DOM refs、類組件的 refs 以及 useImperativeHandle。

由于引入了 ref 清理函數(shù)的機(jī)制，現(xiàn)在 TypeScript 將拒絕從 ref 回調(diào)函數(shù)中返回除清理函數(shù)以外的任何內(nèi)容。為了避免這個(gè)問題，我們通常建議避免使用隱式返回，比如將賦值操作放在花括號中，如下所示：

• 原來的寫法：

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

• 優(yōu)化后的寫法：

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

這種改變是因?yàn)?TypeScript 無法判斷原始代碼中返回的是否應(yīng)該是清理函數(shù)，還是無意中的隱式返回值。通過將賦值操作明確地包裹在花括號中，確保了 ref 回調(diào)中不會(huì)意外地返回任何值，除非有意為之。

為了自動(dòng)化這種模式的轉(zhuǎn)換，可以使用 no-implicit-ref-callback-return 規(guī)則進(jìn)行代碼轉(zhuǎn)換。這將幫助你在升級 React 版本時(shí)更順暢地處理 ref 相關(guān)的代碼。

useDeferredValue 的初始值

React 19 為 useDeferredValue 引入了 initialValue 選項(xiàng)，該選項(xiàng)允許指定組件首次渲染時(shí)返回的值。

function Search({ deferredValue }) {  
  // 在組件首次渲染時(shí)，返回 initialValue 作為 value。  
  // 隨后，useDeferredValue 會(huì)在后臺(tái)計(jì)劃一次重渲染，使用 deferredValue 作為新的 value。  
  const value = useDeferredValue(deferredValue, { initialValue: '' });  
  
  return (  
    <Results query={value} />  
  );  
}

使用 initialValue 可以確保組件在首次渲染時(shí)能夠立即顯示一個(gè)占位值，而無需等待 deferredValue 的異步計(jì)算完成。隨后，當(dāng) deferredValue 準(zhǔn)備好時(shí)，useDeferredValue 會(huì)觸發(fā)組件的后臺(tái)重渲染，以顯示最新的值。這有助于提升應(yīng)用的響應(yīng)性和用戶體驗(yàn)。

文檔元數(shù)據(jù)支持

在HTML中，諸如<title>、<link>和<meta>等文檔元數(shù)據(jù)標(biāo)簽通常放置在<head>區(qū)域內(nèi)。然而，在React應(yīng)用中，決定哪些元數(shù)據(jù)適用于當(dāng)前頁面的組件可能并不直接位于渲染<head>的位置，甚至React可能根本不直接渲染<head>。過去，這些元數(shù)據(jù)標(biāo)簽需要手動(dòng)通過effect或借助如react-helmet這樣的庫進(jìn)行插入，且在服務(wù)器渲染React應(yīng)用時(shí)需要特別小心處理。

React 19引入了原生支持在組件中渲染文檔元數(shù)據(jù)標(biāo)簽的功能。這意味著可以直接在組件內(nèi)部定義這些標(biāo)簽，React會(huì)自動(dòng)將它們提升到文檔的<head>部分。這一改進(jìn)確保了元數(shù)據(jù)標(biāo)簽?zāi)軌蛟趦H客戶端應(yīng)用、流式服務(wù)端渲染（SSR）以及服務(wù)器組件等場景下正常工作。

下面是一個(gè)簡單的示例，展示了如何在React組件中定義并使用這些元數(shù)據(jù)標(biāo)簽：

function BlogPost({ post }) {  
  return (  
    <article>  
      <h1>{post.title}</h1>  
      {/* 直接在組件內(nèi)部定義元數(shù)據(jù)標(biāo)簽 */}  
      <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>  
  );  
}

在這個(gè)BlogPost組件中，盡管<title>、<meta>和<link>標(biāo)簽被定義在了<article>內(nèi)部，但React會(huì)在渲染時(shí)自動(dòng)將它們移至文檔的<head>區(qū)域。這種方式簡化了元數(shù)據(jù)的管理，還增強(qiáng)了React應(yīng)用在各種渲染模式下的兼容性和靈活性。

樣式表支持

在Web開發(fā)中，樣式表的管理至關(guān)重要，無論是通過外部鏈接（<link rel="stylesheet" href="...">）還是內(nèi)嵌方式（<style>...</style>）引入，都需要在 DOM 中精準(zhǔn)布局，以確保樣式優(yōu)先級得到妥善處理。然而，構(gòu)建一個(gè)能夠支持組件內(nèi)部樣式表組合的機(jī)制往往十分繁瑣，因此開發(fā)者常常面臨權(quán)衡：要么將樣式遠(yuǎn)離其依賴的組件加載，犧牲組織性；要么依賴外部樣式庫，增加額外的復(fù)雜性。

React 19 針對這一挑戰(zhàn)提供了內(nèi)置支持，不僅簡化了樣式表的管理流程，還進(jìn)一步增強(qiáng)了與客戶端并發(fā)渲染和服務(wù)器端流式渲染的集成能力。通過指定樣式表的優(yōu)先級，React 將自動(dòng)處理樣式表在DOM中的插入順序，確保在展示依賴于特定樣式規(guī)則的內(nèi)容之前，相關(guān)的樣式表（無論外部還是內(nèi)嵌）已經(jīng)被加載并應(yīng)用。

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>
  )
}

在服務(wù)端渲染過程中，React會(huì)將樣式表包含在<head>標(biāo)簽中，以確保瀏覽器在加載完成前不會(huì)進(jìn)行頁面繪制。如果在已經(jīng)開始流式傳輸后才發(fā)現(xiàn)樣式表，React 將確保在客戶端將樣式表插入到<head>標(biāo)簽中，然后再展示依賴于該樣式表的Suspense邊界的內(nèi)容。

在客戶端渲染過程中，React會(huì)等待新渲染的樣式表加載完成后再提交渲染結(jié)果。如果在應(yīng)用中的多個(gè)位置渲染了這個(gè)組件，React將確保樣式表在文檔中只被包含一次。

function App() {
  return <>
    <ComponentOne />
    ...
    <ComponentOne /> // 不會(huì)導(dǎo)致 DOM 中出現(xiàn)重復(fù)的樣式表鏈接
  </>
}

對于那些習(xí)慣于手動(dòng)加載樣式表的開發(fā)者來說，React 19 的這一改進(jìn)為他們提供了一個(gè)便利的機(jī)會(huì)。現(xiàn)在，可以將樣式表直接放在依賴它們的組件旁邊，這不僅有助于提升代碼的可讀性和可維護(hù)性，使得開發(fā)者可以更加清晰地了解每個(gè)組件的樣式依賴關(guān)系，而且還能夠確保只加載真正需要的樣式表。

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

異步腳本支持

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

React 19 針對異步腳本提供了增強(qiáng)的支持，允許開發(fā)者在組件樹的任何位置渲染它們，直接放在實(shí)際依賴該腳本的組件內(nèi)部。這大大簡化了腳本的管理，無需再擔(dān)心腳本實(shí)例的重新定位和去重問題。

現(xiàn)在，你可以在組件中這樣使用異步腳本：

function MyComponent() {  
  return (  
    <div>  
      <script async src="..." />  
      Hello World  
    </div>  
  );  
}  
  
function App() {  
  return (  
    <html>  
      <body>  
        <MyComponent />  
        ...  
        <MyComponent /> // 不會(huì)導(dǎo)致DOM中出現(xiàn)重復(fù)的腳本  
      </body>  
    </html>  
  );  
}

在所有渲染環(huán)境中，異步腳本都將進(jìn)行去重處理，因此即使多個(gè)不同的組件渲染了同一個(gè)腳本，React 也只會(huì)加載和執(zhí)行該腳本一次。

在服務(wù)端渲染中，異步腳本將被包含在<head>標(biāo)簽中，并優(yōu)先于阻止繪制的更關(guān)鍵資源（如樣式表、字體和圖像預(yù)加載）之后加載。

資源預(yù)加載支持

在文檔初始加載和客戶端更新時(shí)，及時(shí)告知瀏覽器可能即將需要加載的資源，對于提升頁面性能至關(guān)重要。React 19 引入了一系列新的API，旨在簡化瀏覽器資源的加載和預(yù)加載過程，讓開發(fā)者能夠構(gòu)建出流暢且高效的用戶體驗(yàn)。

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' }); // 預(yù)加載字體  
  preload('https://.../path/to/stylesheet.css', { as: 'style' }); // 預(yù)加載樣式表  
  prefetchDNS('https://...'); // 當(dāng)可能會(huì)從該主機(jī)請求資源但尚不確定時(shí)  
  preconnect('https://...'); // 當(dāng)確定會(huì)從該主機(jī)請求資源但不確定具體資源時(shí)  
}

這些 API 調(diào)用會(huì)在渲染組件時(shí)生成相應(yīng)的DOM標(biāo)簽，如下所示：

<html>  
  <head>  
    <!-- 鏈接根據(jù)其對頁面加載的貢獻(xiàn)程度進(jìn)行優(yōu)先級排序 -->  
    <link rel="prefetch-dns" href="https://..."> <!-- DNS預(yù)獲取 -->  
    <link rel="preconnect" href="https://..."> <!-- 提前建立連接 -->  
    <link rel="preload" as="font" href="https://.../path/to/font.woff"> <!-- 預(yù)加載字體 -->  
    <link rel="preload" as="style" href="https://.../path/to/stylesheet.css"> <!-- 預(yù)加載樣式表 -->  
    <script async src="https://.../path/to/some/script.js"></script> <!-- 異步加載并執(zhí)行腳本 -->  
  </head>  
  <body>  
    ...  
  </body>  
</html>

通過利用這些API，開發(fā)者可以優(yōu)化頁面的初始加載速度，減少用戶等待時(shí)間。同時(shí)，在客戶端更新時(shí)，預(yù)取和預(yù)加載資源也能幫助加快導(dǎo)航速度，提升用戶體驗(yàn)。無論是通過預(yù)加載字體和樣式表來減少頁面渲染阻塞，還是通過預(yù)取DNS和預(yù)連接來加速資源請求，這些API都為開發(fā)者提供了強(qiáng)大的工具，使資源加載更加智能和高效。

與第三方腳本和擴(kuò)展的兼容性

在React 19中，對掛載過程進(jìn)行了優(yōu)化，以更好地兼容第三方腳本和瀏覽器擴(kuò)展。

在客戶端掛載時(shí)，如果渲染的元素與服務(wù)器返回的HTML中的元素不一致，React會(huì)觸發(fā)客戶端的重新渲染，以確保內(nèi)容的正確性。然而，過去，若第三方腳本或?yàn)g覽器擴(kuò)展插入了某些元素，這會(huì)導(dǎo)致不匹配錯(cuò)誤并觸發(fā)不必要的客戶端渲染。

現(xiàn)在，React 19 能夠智能地跳過<head>和<body>中的意外標(biāo)簽，從而避免了因這些元素引發(fā)的不匹配錯(cuò)誤。即使因?yàn)槠渌蛐枰M(jìn)行整個(gè)文檔的重新渲染，React也會(huì)保留由第三方腳本和瀏覽器擴(kuò)展插入的樣式表，確保頁面的完整性和一致性。

更好的錯(cuò)誤報(bào)告

React 19 對錯(cuò)誤處理進(jìn)行了優(yōu)化，旨在消除錯(cuò)誤信息的重復(fù)，并為處理捕獲和未捕獲的錯(cuò)誤提供了更多選項(xiàng)。例如，當(dāng)渲染過程中發(fā)生錯(cuò)誤并被錯(cuò)誤邊界捕獲時(shí)，以前 React 會(huì)重復(fù)拋出相同的錯(cuò)誤（一次是原始錯(cuò)誤，另一次是在嘗試自動(dòng)恢復(fù)失敗后），然后調(diào)用console.error輸出錯(cuò)誤發(fā)生位置的信息。

這種處理方式導(dǎo)致每個(gè)被捕獲的錯(cuò)誤都會(huì)被報(bào)告三次：

在 React 19 中將記錄單個(gè)錯(cuò)誤，并包含所有錯(cuò)誤信息：

此外，為了提供更細(xì)粒度的錯(cuò)誤處理控制，還新增了兩個(gè)根選項(xiàng)來與onRecoverableError相輔相成：

• onCaughtError：當(dāng)React在錯(cuò)誤邊界中成功捕獲到錯(cuò)誤時(shí)，此選項(xiàng)將被調(diào)用。
• onUncaughtError：當(dāng)錯(cuò)誤被拋出且未能被任何錯(cuò)誤邊界捕獲時(shí)，此選項(xiàng)將被觸發(fā)。
• onRecoverableError：當(dāng)錯(cuò)誤發(fā)生但React能夠自動(dòng)恢復(fù)時(shí)，該選項(xiàng)將起作用。

這些新增選項(xiàng)不僅增強(qiáng)了React的錯(cuò)誤處理能力，還賦予了開發(fā)者在不同錯(cuò)誤場景下執(zhí)行特定邏輯的能力。無論是進(jìn)行錯(cuò)誤日志的記錄、發(fā)送錯(cuò)誤報(bào)告，還是執(zhí)行其他自定義操作，這些選項(xiàng)都能滿足開發(fā)者的需求，幫助他們更有效地管理和應(yīng)對React應(yīng)用中的錯(cuò)誤情況。

自定義元素支持

React 19 現(xiàn)已正式加入對自定義元素的全方位支持，并成功通過 Custom Elements Everywhere 的所有測試。

在過去，React 對于自定義元素的處理并不盡如人意，因?yàn)樗鶎⑽醋R(shí)別的屬性（props）默認(rèn)為屬性（attributes）而非屬性（properties）。然而，在 React 19 中增加了對屬性的支持，這種支持既適用于客戶端也適用于服務(wù)器端渲染（SSR），具體策略如下：

• 在服務(wù)端渲染時(shí)，如果傳遞給自定義元素的屬性（props）是基本數(shù)據(jù)類型（如字符串、數(shù)字或值為true），它們將作為屬性（attributes）進(jìn)行渲染。相反，如果屬性的類型是非基本類型（如對象、符號、函數(shù)或值為false），它們將不會(huì)被渲染，確保了數(shù)據(jù)的正確性和一致性。
• 在客戶端渲染時(shí)，React 19 則更加智能地處理屬性。如果屬性（props）與自定義元素實(shí)例上的屬性（properties）相匹配，它們將被直接設(shè)置為屬性（properties）。否則，它們將作為屬性（attributes）進(jìn)行分配。這種處理方式不僅提升了性能，還使得React在處理自定義元素時(shí)更加準(zhǔn)確和高效。

React 19 升級指南

React 19 的升級帶來了一系列重要的改進(jìn)，盡管其中涉及到一些破壞性變更，但 React 團(tuán)隊(duì)已經(jīng)努力使升級過程變得更順暢，預(yù)計(jì)對大多數(shù)應(yīng)用的影響有限。

注意： 此 beta 版的主要目的是幫助庫開發(fā)者為即將到來的React 19做好準(zhǔn)備。對于應(yīng)用開發(fā)者而言，建議先升級到React 18.3.0 版本，并耐心等待 React 19 穩(wěn)定版的發(fā)布。React 團(tuán)隊(duì)正與庫開發(fā)者緊密合作，并根據(jù)他們的反饋進(jìn)行必要的調(diào)整和改進(jìn)。為了降低升級難度，React 同步推出了 18.3 版本，以幫助開發(fā)者更好地適應(yīng)未來的變更。

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