當前位置：首頁 > 科技 > 軟件

React 19 全覽，新特性進行一次深度的體驗學習

來源：責編：時間：2024-06-14 08:53:46 133觀看

導讀最近 React 發布了 V19 RC 版本，按照慣例，我們對 React 19 的新特性進行一次深度的體驗學習，以便盡快上手新特性。這篇文章，我會通過豐富的示例，演示 React 19 的新特性，以及相較于老版本的差異。同時會附上自己對部分新特

最近 React 發布了 V19 RC 版本，按照慣例，我們對 React 19 的新特性進行一次深度的體驗學習，以便盡快上手新特性。

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

本文所有示例代碼可以在這里查看：https://codesandbox.io/p/sandbox/react19-demo-lmygpv^[2]

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

在 React Hooks 中，最基本的網絡請求我們可能會這樣寫：

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 兩個請求相關的狀態。

useTransition 支持異步函數

useTransition 是 React 18 新增的一個 Hook，主要用來標記低優先級更新，低優先級更新是可以被中斷的。在 React 18 中，useTransition 返回的 isPending 代表這次低優先級的更新正在等待中。

const [isPending, startTransition] = useTransition();

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

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

上述寫法有兩個好處：

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

useActionState 管理異步函數狀態

useActionState 是 React 19 新增的一個 Hook，用來管理異步函數，自動維護了 data、action、pending 等狀態。經過 useActionState 改造的代碼如下：

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。

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

返回參數含義：

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

傳入參數含義：

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

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

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

你可以能注意到了上面 demo 中使用了 startTransition 來包裹調用 handleSubmit。因為不用 startTransition 來包裹，useActionState 就沒用。

官方提供的 demo 是通過 form action 觸發的 handleSubmit，其內置了 startTransition ，所以不需要手動設置。

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

有沒有覺得很難用？我是這么覺得的。

useOptimistic 樂觀更新

樂觀更新是一種常見的體驗優化手段，在發送異步請求之前，我們默認請求是成功的，讓用戶立即看到成功后的狀態。

先來看看官方提供的例子：提交表單更新 name，可以立即將新的 name 更新到 UI 中。請求成功則 UI 不變，請求失敗則 UI 回滾。

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 的樂觀更新。

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

返回參數含義：

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

傳入參數含義：

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

這個 Hook API 看起來還是挺簡單的。

但是關于上面的 Demo 示例，我有個困惑：如果請求失敗了，是怎么讓狀態回滾呢？

經過測試，上面的代碼確實有失敗狀態回滾的能力。

其奧秘就是異步函數執行結束后，無論是成功還是失敗，optimisticName 都會重置成和最新 state 一樣。

也就是我們調用了 setName(newName)，那 optimisticName 就變成新的狀態。如果沒調用，則變成之前的狀態。

關于樂觀更新，我在日常開發中，經常會用到。經典的場景是點贊場景，用戶點贊后，立即更新 UI 為點贊成功，如果請求失敗后，再回滾 UI。

使用 useOptimistic 后，其代碼如下：

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

上面代碼看起來很簡單，但是沒用，會報錯。

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 里面。

根據告警再優化下代碼。

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 后，功能可以正常使用。

為什么官方的示例代碼不用加 startTransition 呢？因為官方示例是通過 form 的 action 調用的，其默認內置了 startTransition。

體驗下來，我覺得這個 Hook，確實是沒啥用，我普通代碼實現個樂觀更新，更簡單。

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

上面我們介紹了 React 19 新增的幾個 Hook，不知道大家看下來什么感受？說說我個人的感受。

React 19 之前的 Hook，基本都是原子級別的，必要的，比如 useState、useEffect、useTransition等，沒有它就有些功能實現不了。

但 React 19 新增的幾個 Hook 明顯不是這樣的，而是更上層的封裝，并且和 form 耦合很嚴重。

我覺得在實際業務開發中，幾乎不會用到上述 Hook。

useFormStatus 獲取表單狀態

useFormStatus 是 React 19 新增的一個 Hook，主要用來快捷讀取到最近的父級 form 表單的數據，其實就是類似 Context 的封裝。

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 的狀態：

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

useFormStatus 使用場景較窄，絕大部分開發者不會用到。

use

use 是 React 19 新增的一個特性，支持處理 Promise 和 Context。

假如我們要實現這樣一個需求：請求接口數據，請求過程中，顯示 loading，請求成功，展示數據。

以前我們可能會這樣寫代碼。

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 我們可以把代碼改造成下面這樣。

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 來處理異常狀態。

另外 use 也支持接收 Context，類似之前的 useContext，但比 useContext 更靈活，可以在條件語句和循環中使用。

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

use 的使用有一些注意事項。

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

ref

在之前，父組件傳遞 ref 給子組件，子組件如果要消費，則必須通過 forwardRef 來消費。

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 了。

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

未來在某個版本會刪除掉 forwardRef。

Context

在 React 19 之前，我們需要使用 Context.Provider，比如：

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

在 React 19 中，我們可以使用 Context來代替 Context.Provider了。

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

未來在某個版本會刪除掉 Context.Provider。

ref 支持返回 cleanup 函數

ref 支持返回一個 cleanup 函數，在組件卸載時會調用該函數。

<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，指定初始化值。

const value = useDeferredValue(deferredValue, initialValue);

支持 Document Metadata

在之前，如果我們希望動態的在組件中指定 meta、title、link等文檔屬性，我們可能會這樣做：

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

在 React 19 中，原生支持了這三個文檔屬性，支持在組件中設置。

在渲染過程中，React 發現這三種標簽，會自動提升到上。

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 標簽能力支持
支持預加載資源

參考資料

[1]React 18 全覽: https://github.com/brickspert/blog/issues/48。

[2]https://codesandbox.io/p/sandbox/react19-demo-lmygpv: https://codesandbox.io/p/sandbox/react19-demo-lmygpv。

[3]useQuery: https://tanstack.com/query/latest/docs/framework/react/overview。

[4]useRequest: https://ahooks.js.org/hooks/use-request/index。

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

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

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

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

標簽：

熱門焦點

vivo TWS Air開箱體驗：真輕臻好聽

在vivo S15系列新機的發布會上，vivo的最新款真無線藍牙耳機vivo TWS Air也一同發布，本次就這款耳機新品給大家帶來一個簡單的分享。外包裝盒上，vivo TWS Air保持了vivo自家產
Raft算法：保障分布式系統共識的穩健之道

1. 什么是Raft算法？Raft 是英文”Reliable、Replicated、Redundant、And Fault-Tolerant”（“可靠、可復制、可冗余、可容錯”）的首字母縮寫。Raft算法是一種用于在分布式系統
這款新興工具平臺，讓你的電腦效率翻倍

隨著信息技術的發展,我們獲取信息的渠道越來越多,但是處理信息的效率卻成為一個瓶頸。于是各種工具應運而生,都在爭相解決我們的工作效率問題。今天我要給大家介紹一款效率
三分鐘白話RocketMQ系列—— 如何發送消息

我們知道RocketMQ主要分為消息生產、存儲（消息堆積）、消費三大塊領域。那接下來，我們白話一下，RocketMQ是如何發送消息的，揭秘消息生產全過程。注意，如果白話中不小心提到相關代
微軟邀請 Microsoft 365 商業用戶，測試視頻編輯器 Clipchamp

8 月 1 日消息，微軟近日宣布即將面向 Microsoft 365 商業用戶，開放 Clipchamp 應用，邀請用戶通過該應用來編輯視頻。微軟于 2021 年收購 Clipchamp，隨后開始逐步整合到 Microsof
消費結構調整丨巨頭低價博弈，拼多多還卷得動嗎？

來源：征探財經作者：陳香羽隨著流量紅利的退潮，電商的存量博弈越來越明顯。曾經主攻中高端與品質的淘寶天貓、京東重拾“低價”口號。而過去與他們錯位競爭的拼多多，靠
阿里瓴羊One推出背后，零售企業迎數字化新解

作者:劉曠近年來隨著數字經濟的高速發展，各式各樣的SaaS應用服務更是層出不窮，但本質上SaaS大多局限于單一業務流層面，對用戶核心關切的增長問題等則沒有提供更好的解法。在Saa
3699元！iQOO Neo8 Pro頂配版今日首銷：1TB UFS 4.0同價位唯一

5月23日，iQOO推出了全新的iQOO Neo8系列，包含iQOO Neo8和iQOO Neo8 Pro兩個版本，其中標準版搭載高通驍龍8+，而Pro版更是首發搭載了聯發科天璣9200+旗艦
質感不錯！OPPO K11渲染圖曝光：旗艦IMX890傳感器首次下放

一直以來，OPPO K系列機型都保持著較為均衡的產品體驗，歷來都是2K價位的明星機型，去年推出的OPPO K10和OPPO K10 Pro兩款機型憑借各自的出色配置，堪稱有

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

React 19 全覽，新特性進行一次深度的體驗學習

useTransition 支持異步函數

useActionState 管理異步函數狀態

useOptimistic 樂觀更新

useFormStatus 獲取表單狀態

use

ref

Context

ref 支持返回 cleanup 函數

useDeferredValue 增加了 initialValue 參數

支持 Document Metadata

其它更多特性

vivo TWS Air開箱體驗：真輕臻好聽

Raft算法：保障分布式系統共識的穩健之道

這款新興工具平臺，讓你的電腦效率翻倍

三分鐘白話RocketMQ系列—— 如何發送消息

微軟邀請 Microsoft 365 商業用戶，測試視頻編輯器 Clipchamp

消費結構調整丨巨頭低價博弈，拼多多還卷得動嗎？

阿里瓴羊One推出背后，零售企業迎數字化新解

3699元！iQOO Neo8 Pro頂配版今日首銷：1TB UFS 4.0同價位唯一

質感不錯！OPPO K11渲染圖曝光：旗艦IMX890傳感器首次下放

最新推薦

猜你喜歡

熱門推薦

相關資訊