IFr28資訊網——每日最新資訊28at.com

最近 React 發布了 V19 RC 版本，按照慣例，我們對 React 19 的新特性進行一次深度的體驗學習，以便盡快上手新特性。IFr28資訊網——每日最新資訊28at.com

這篇文章，我會通過豐富的示例，演示 React 19 的新特性，以及相較于老版本的差異。同時會附上自己對部分新特性的評價，如有不對，煩請指正。IFr28資訊網——每日最新資訊28at.com

本文所有示例代碼可以在這里查看：https://codesandbox.io/p/sandbox/react19-demo-lmygpv^[2]IFr28資訊網——每日最新資訊28at.com

React 19 的最重要改動，是新增了幾個 Hook，均是針對 form 和異步網絡請求通用能力的封裝。有點類似 react-query 的 useQuery^[3]，或者 ahooks 的 useRequest^[4]。IFr28資訊網——每日最新資訊28at.com

在 React Hooks 中，最基本的網絡請求我們可能會這樣寫：IFr28資訊網——每日最新資訊28at.com

function BasicDemo() {  const [name, setName] = useState("");  const [error, setError] = useState(null);  const [isPending, setIsPending] = useState(false);  const handleSubmit = async () => {    setIsPending(true);    try {      await updateName(name);      console.log("Name updated successfully");    } catch (e) {      setError(e.message);    }    setIsPending(false);  };  return (    <div>      <input value={name} onChange={(event) => setName(event.target.value)} />      <button onClick={handleSubmit} disabled={isPending}>        Update      </button>      {error && <p>{error}</p>}    </div>  );}

上面是一個最簡單的網絡請求示例，點擊按鈕后，請求 updateName 接口，同時維護了 isPending 和 error 兩個請求相關的狀態。IFr28資訊網——每日最新資訊28at.com

useTransition 支持異步函數

useTransition 是 React 18  新增的一個 Hook，主要用來標記低優先級更新，低優先級更新是可以被中斷的。在 React 18 中，useTransition 返回的 isPending 代表這次低優先級的更新正在等待中。IFr28資訊網——每日最新資訊28at.com

const [isPending, startTransition] = useTransition();

在 18 中，useTransition 返回的 startTransition 只支持傳遞同步函數，而在 19 中，增加了對異步函數的支持。通過這個特性，我們可以用來自動維護異步請求的 isPending 狀態。代碼如下：IFr28資訊網——每日最新資訊28at.com

export default function BasicDemo() {  const [name, setName] = useState("");  const [error, setError] = useState(null);  const [isPending, startTransition] = useTransition();  const handleSubmit = () => {    startTransition(async () => {      try {        await updateName(name);        console.log("Name updated successfully");      } catch (e) {        setError(e.message);      }    });  };  return (    <div>      <input value={name} onChange={(event) => setName(event.target.value)} />      <button onClick={handleSubmit} disabled={isPending}>        Update      </button>      {error && <p>{error}</p>}    </div>  );}

上述寫法有兩個好處：IFr28資訊網——每日最新資訊28at.com

• 自動維護了 isPending 狀態。
• 標記 updateName 觸發的更新為低優先更新，不會阻塞 UI 渲染。

useActionState 管理異步函數狀態

useActionState 是 React 19 新增的一個 Hook，用來管理異步函數，自動維護了 data、action、pending 等狀態。經過 useActionState 改造的代碼如下：IFr28資訊網——每日最新資訊28at.com

export default function ActionStateDemo() {  const [name, setName] = useState("");  // 接受一個異步請求函數，返回 [data、action、pending]  const [error, handleSubmit, isPending] = useActionState(    async (previousState, name) => {      try {        await updateName(name);        console.log("Name updated successfully");        return null;      } catch (e) {        console.log("error");        return e.message;      }    }  );  return (    <div>      <input value={name} onChange={(event) => setName(event.target.value)} />      <button        onClick={() => {          startTransition(() => {            handleSubmit(name);          });        }}        disabled={isPending}      >        Update      </button>      {error && <p>{error}</p>}    </div>  );}

上面代碼乍一看，感覺很熟悉，好像和大家經常用的 useRequest、useQuery、useSWR 等都差不多。我們通過 API 來仔細了解一下 useActionState。IFr28資訊網——每日最新資訊28at.com

const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);

返回參數含義：IFr28資訊網——每日最新資訊28at.com

• state：代表 fn 函數返回的內容，fn 未執行時，等于 initialState。
• formAction：用來觸發 fn 函數執行，可以直接調用，也可以傳遞給 form 的 action 屬性。
• isPending：fn 函數是否正在執行中。

傳入參數含義：IFr28資訊網——每日最新資訊28at.com

• fn：一個異步函數，接受兩個參數 previousState和 formData。

• previousState：代表上一次執行 fn 返回的內容，首次調用等于 initialState。
• formData：代表調用 formAction 時傳遞的參數。

• initialState：fn 沒執行時，默認的 state。
• permalink：一個 URL 字符串，通常和服務端組件有關系。（表示暫時沒看懂干啥的）。

你可以能注意到了上面 demo 中使用了 startTransition 來包裹調用 handleSubmit。因為不用 startTransition 來包裹，useActionState 就沒用。IFr28資訊網——每日最新資訊28at.com

官方提供的 demo 是通過 form action 觸發的 handleSubmit，其內置了 startTransition ，所以不需要手動設置。IFr28資訊網——每日最新資訊28at.com

<form action={handleSubmit}></form>

有沒有覺得很難用？我是這么覺得的。IFr28資訊網——每日最新資訊28at.com

useOptimistic 樂觀更新

樂觀更新是一種常見的體驗優化手段，在發送異步請求之前，我們默認請求是成功的，讓用戶立即看到成功后的狀態。IFr28資訊網——每日最新資訊28at.com

先來看看官方提供的例子：提交表單更新 name，可以立即將新的 name 更新到 UI 中。請求成功則 UI 不變，請求失敗則 UI 回滾。IFr28資訊網——每日最新資訊28at.com

function ChangeName() {  const [name, setName] = useState("");  // 定義樂觀更新的狀態  const [optimisticName, setOptimisticName] = useOptimistic(name);  const submitAction = async (formData) => {    const newName = formData.get("name");    // 請求之前，先把狀態更新到 optimisticLike    setOptimisticName(newName);    try {      await updateName(newName);      // 成功之后，更新最終狀態      setName(newName);    } catch (e) {      console.error(e);    }  };  return (    <form action={submitAction}>      <p>Your name is: {optimisticName}</p>      <p>        <label>Change Name:</label>        <input type="text" name="name" disabled={name !== optimisticName} />      </p>    </form>  );}

useOptimistic 用來維護臨時狀態，保證 UI 的樂觀更新。IFr28資訊網——每日最新資訊28at.com

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

返回參數含義：IFr28資訊網——每日最新資訊28at.com

• optimisticState：樂觀更新的狀態，UI 上應該始終消費這個狀態。默認等于真正的 state。
• addOptimistic：更新 optimisticState，可以通過 updateFn 指定更新邏輯。

傳入參數含義：IFr28資訊網——每日最新資訊28at.com

• state：真正的狀態。
• updateFn：(currentState, optimisticValue) => newOptimisticState，調用 addOptimistic 的時候會通過這個函數生成新的 optimisticState。

這個 Hook API 看起來還是挺簡單的。IFr28資訊網——每日最新資訊28at.com

但是關于上面的 Demo 示例，我有個困惑：如果請求失敗了，是怎么讓狀態回滾呢？IFr28資訊網——每日最新資訊28at.com

經過測試，上面的代碼確實有失敗狀態回滾的能力。IFr28資訊網——每日最新資訊28at.com

其奧秘就是異步函數執行結束后，無論是成功還是失敗，optimisticName 都會重置成和最新 state 一樣。IFr28資訊網——每日最新資訊28at.com

也就是我們調用了 setName(newName)，那 optimisticName 就變成新的狀態。如果沒調用，則變成之前的狀態。IFr28資訊網——每日最新資訊28at.com

關于樂觀更新，我在日常開發中，經常會用到。經典的場景是點贊場景，用戶點贊后，立即更新 UI 為點贊成功，如果請求失敗后，再回滾 UI。IFr28資訊網——每日最新資訊28at.com

使用 useOptimistic 后，其代碼如下：IFr28資訊網——每日最新資訊28at.com

function LikeDemo() {  const [like, setLike] = useState(false);  // 定義樂觀更新的狀態  const [optimisticLike, setOptimisticLike] = useOptimistic(like);  const handleLike = async () => {    const targetLike = !like;    try {      // 請求之前，先把狀態更新到 optimisticLike      setOptimisticLike(targetLike);      await updateLike(like);      // 成功之后，更新最終狀態      setLike(targetLike);    } catch (e) {      console.error(e);    }  };  return (    <div>      <div onClick={handleLike}>{optimisticLike ? "收藏" : "未收藏"}</div>    </div>  );}

上面代碼看起來很簡單，但是沒用，會報錯。IFr28資訊網——每日最新資訊28at.com

Warning: An optimistic state update occurred outside a transition or action. To fix, move the update to an action, or wrap with startTransition.

意思是 optimistic state 的更新，必須包裹在 startTransition 里面。IFr28資訊網——每日最新資訊28at.com

根據告警再優化下代碼。IFr28資訊網——每日最新資訊28at.com

function LikeDemo() {  const [like, setLike] = useState(false);  const [pending, startTransition] = useTransition();  const [optimisticLike, setOptimisticLike] = useOptimistic(like);  const handleLike = () => {    const targetLike = !like;    startTransition(async () => {      try {        setOptimisticLike(targetLike);        await updateLike(like);        setLike(targetLike);      } catch (e) {        console.error(e);      }    });  };  return (    <div>      <div onClick={handleLike}>{optimisticLike ? "收藏" : "未收藏"}</div>    </div>  );}

增加了 startTransition 后，功能可以正常使用。IFr28資訊網——每日最新資訊28at.com

為什么官方的示例代碼不用加 startTransition 呢？因為官方示例是通過 form 的 action 調用的，其默認內置了 startTransition。IFr28資訊網——每日最新資訊28at.com

體驗下來，我覺得這個 Hook，確實是沒啥用，我普通代碼實現個樂觀更新，更簡單。IFr28資訊網——每日最新資訊28at.com

const [like, setLike] = useState(false);  const handleLike = async () => {    try {      setLike((s) => !s);      await updateLike(like);    } catch (e) {      setLike((s) => !s);    }  };

上面我們介紹了 React 19 新增的幾個 Hook，不知道大家看下來什么感受？說說我個人的感受。IFr28資訊網——每日最新資訊28at.com

React 19 之前的 Hook，基本都是原子級別的，必要的，比如 useState、useEffect、useTransition等，沒有它就有些功能實現不了。IFr28資訊網——每日最新資訊28at.com

但 React 19 新增的幾個 Hook 明顯不是這樣的，而是更上層的封裝，并且和 form 耦合很嚴重。IFr28資訊網——每日最新資訊28at.com

我覺得在實際業務開發中，幾乎不會用到上述 Hook。IFr28資訊網——每日最新資訊28at.com

useFormStatus 獲取表單狀態

useFormStatus 是 React 19 新增的一個 Hook，主要用來快捷讀取到最近的父級 form 表單的數據，其實就是類似 Context 的封裝。IFr28資訊網——每日最新資訊28at.com

import { useFormStatus } from "react-dom";import action from './actions';function Submit() {  const status = useFormStatus();  return <button disabled={status.pending}>Submit</button>}export default function App() {  return (    <form action={action}>      <Submit />    </form>  );}

const { pending, data, method, action } = useFormStatus();

useFormStatus 能拿到父級最近的 form 的狀態：IFr28資訊網——每日最新資訊28at.com

• pending：是否正在提交中。
• data：表單正在提交的數據，如果 form 沒有被提交，則為 null。
• method：form 的 method 屬性，get 或 post。
• action：form 的 action 屬性，如果 action 不是函數，則為 null。

useFormStatus 使用場景較窄，絕大部分開發者不會用到。IFr28資訊網——每日最新資訊28at.com

use

use 是 React 19 新增的一個特性，支持處理 Promise 和 Context。IFr28資訊網——每日最新資訊28at.com

假如我們要實現這樣一個需求：請求接口數據，請求過程中，顯示 loading，請求成功，展示數據。IFr28資訊網——每日最新資訊28at.com

以前我們可能會這樣寫代碼。IFr28資訊網——每日最新資訊28at.com

function ReactUseDemo() {  const [data, setData] = useState("");  const [loading, setLoading] = useState(false);  useEffect(() => {    setLoading(true);    getList()      .then((res) => {        setData(res);        setLoading(false);      })      .catch(() => {        setLoading(false);      });  }, []);  if (loading) return <div>Loading...</div>;  return <div>{data}</div>;}

通過 use 我們可以把代碼改造成下面這樣。IFr28資訊網——每日最新資訊28at.com

export default function ReactUseDemo() {  return (    <Suspense fallback={<div>Loading...</div>}>      <ChildCompont />    </Suspense>  );}function ChildCompont() {  const data = use(getData());  return <div>{data}</div>;}

use 接收一個 Promise，會阻塞 render 繼續渲染，通常需要配套 Suspense 處理 loading 狀態，需要配套 ErrorBoundary 來處理異常狀態。IFr28資訊網——每日最新資訊28at.com

另外 use 也支持接收 Context，類似之前的 useContext，但比 useContext 更靈活，可以在條件語句和循環中使用。IFr28資訊網——每日最新資訊28at.com

function MyPage() {  return (    <ThemeContext.Provider value="dark">      <Form />    </ThemeContext.Provider>  );}function Form() {  const theme = use(ThemeContext);  ......}

use 的使用有一些注意事項。IFr28資訊網——每日最新資訊28at.com

• 需要在組件或 Hook 內部使用。
• use 可以在條件語句（比如 if）或者循環（比如 for）里面調用。

ref

在之前，父組件傳遞 ref 給子組件，子組件如果要消費，則必須通過 forwardRef 來消費。IFr28資訊網——每日最新資訊28at.com

function RefDemo() {  const inputRef = useRef(null);  const focusInput = () => {    inputRef.current.focus();  };  return (    <div>      <Input ref={inputRef} />      <button onClick={focusInput}>Focus</button>    </div>  );}const Input = forwardRef((props, ref) => {  return <input ref={ref} />;});

React 19 開始，不需要使用 forwardRef 了，ref 可以作為一個普通的 props 了。IFr28資訊網——每日最新資訊28at.com

export const Input = ({ ref }) => {  return <input ref={ref} />;};

未來在某個版本會刪除掉 forwardRef。IFr28資訊網——每日最新資訊28at.com

Context

在 React 19 之前，我們需要使用 Context.Provider，比如：IFr28資訊網——每日最新資訊28at.com

import React, { createContext } from 'react'; const ThemeContext = createContext(''); function App({ children }) {  return (    <ThemeContext.Provider value="dark">      {children}    </ThemeContext.Provider>  );}

在 React 19 中，我們可以使用 Context來代替 Context.Provider了。IFr28資訊網——每日最新資訊28at.com

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

未來在某個版本會刪除掉 Context.Provider。IFr28資訊網——每日最新資訊28at.com

ref 支持返回 cleanup 函數

ref 支持返回一個 cleanup 函數，在組件卸載時會調用該函數。IFr28資訊網——每日最新資訊28at.com

<input  ref={(ref) => {    // ref created    // NEW: return a cleanup function to reset    // the ref when element is removed from DOM.    return () => {      // ref cleanup    };  }}/>

useDeferredValue 增加了 initialValue 參數

useDeferredValue 現在增加了第二個參數 initialValue，指定初始化值。IFr28資訊網——每日最新資訊28at.com

const value = useDeferredValue(deferredValue, initialValue);

支持 Document Metadata

在之前，如果我們希望動態的在組件中指定 meta、title、link等文檔屬性，我們可能會這樣做：IFr28資訊網——每日最新資訊28at.com

• 在 useEffect 中，通過 JS 手動創建
• 使用 react-helmet 這類三方庫

在 React 19 中，原生支持了這三個文檔屬性，支持在組件中設置。IFr28資訊網——每日最新資訊28at.com

在渲染過程中，React 發現這三種標簽，會自動提升到  上。IFr28資訊網——每日最新資訊28at.com

function BlogPost({post}) {  return (    <div>      <meta name="author" content="Josh" />      <link rel="author"  />      <meta name="keywords" content={post.keywords} />    </div>  );}

其它更多特性

• Server Components 和 Server Actions 將成為穩定特性
• 更多外聯樣式表能力支持：比如支持通過 precedence指定樣式表的優先級，同樣優先級的樣式表會被放到一起
• 更多 script 標簽能力支持
• 支持預加載資源

參考資料IFr28資訊網——每日最新資訊28at.com

[1]React 18 全覽: https://github.com/brickspert/blog/issues/48。IFr28資訊網——每日最新資訊28at.com

[2]https://codesandbox.io/p/sandbox/react19-demo-lmygpv: https://codesandbox.io/p/sandbox/react19-demo-lmygpv。IFr28資訊網——每日最新資訊28at.com

[3]useQuery: https://tanstack.com/query/latest/docs/framework/react/overview。IFr28資訊網——每日最新資訊28at.com

[4]useRequest: https://ahooks.js.org/hooks/use-request/index。IFr28資訊網——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-93707-0.htmlReact 19 全覽，新特性進行一次深度的體驗學習

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 轉轉回收持久層的架構演進

下一篇： 淺析Spring中Async注解底層異步線程池原理