React 19 中的新增功能-js教程-PHP中文網

React 19 中的新增功能

Linda Hamilton

發布： 2024-12-23 13:37:23

原創

728 人瀏覽過

What’s new in React 19

行動

React 應用程式中的一個常見用例是執行資料突變，然後更新狀態作為回應。例如，當使用者提交表單以變更其姓名時，您將發出 API 請求，然後處理回應。過去，您需要手動處理掛起狀態、錯誤、樂觀更新和順序請求。

例如，您可以在 useState 中處理掛起和錯誤狀態：

// Before Actions
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 中，我們添加了在轉換中使用非同步函數的支持，以自動處理掛起狀態、錯誤、表單和樂觀更新。

例如，您可以使用 useTransition 為您處理掛起狀態：

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    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 狀態設為 true，發出非同步請求，並在任何轉換後將 isPending 切換為 false。這使您可以在資料變更時保持當前 UI 的回應能力和互動性。

筆記

依照慣例，使用非同步轉換的函數稱為「操作」。
操作會自動為您管理提交資料：

掛起狀態：操作提供一個掛起狀態，在請求開始時啟動，並在提交最終狀態更新時自動重設。
樂觀更新：操作支援新的 useOptimistic 掛鉤，因此您可以在提交請求時向使用者顯示即時回饋。
錯誤處理：操作提供錯誤處理，以便您可以在請求失敗時顯示錯誤邊界，並自動將樂觀更新恢復為其原始值。
表格：元素現在支援將函數傳遞給 action 和 formAction 屬性。將函數傳遞給操作屬性預設使用操作，並在提交後自動重設表單。

基於 Actions 構建，React 19 引入了 useOptimistic 來管理樂觀更新，並引入了一個新的鉤子 React.useActionState 來處理 Actions 的常見情況。在react-dom中我們新增了

;自動管理表單的操作，並使用FormStatus支援表單中操作的常見情況。

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

// Using <form> Actions and useActionState
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 null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

登入後複製

在下一節中，我們將詳細介紹 React 19 中的每個新 Action 功能。

新鉤子：useActionState

為了讓操作的常見情況更容易，我們新增了一個名為 useActionState 的新鉤子：

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // You can return any result of the action.
      // Here, we return only the error.
      return error;
    }

    // handle success
    return null;
  },
  null,
);

登入後複製

useActionState 接受一個函數（「Action」），並傳回一個包裝好的 Action 來呼叫。這是有效的，因為動作是組合的。當呼叫包裝好的 Action 時，useActionState 會傳回該 Action 的最後結果作為數據，並將該 Action 的掛起狀態為待處理。