參考文檔：react@18.3.1官方文檔

一些概念：
React 的 Canary 和 Experimental 頻道是 React 團(tuán)隊(duì)用于發(fā)布和測(cè)試新功能的渠道。

useActionState

useActionState 是一個(gè)可以根據(jù)某個(gè)表單動(dòng)作的結(jié)果更新 state 的 Hook。

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

參數(shù)

• fn：當(dāng)按鈕被按下或者表單被提交時(shí)觸發(fā)的函數(shù)。當(dāng)函數(shù)被調(diào)用時(shí)，該函數(shù)會(huì)接收到表單的上一個(gè) state（初始值為傳入的 initialState 參數(shù)，否則為上一次執(zhí)行完該函數(shù)的結(jié)果）作為函數(shù)的第一個(gè)參數(shù)，余下參數(shù)為普通表單動(dòng)作接到的參數(shù)。
• initialState ：state 的初始值。任何可序列化的值都可接收。當(dāng) action 被調(diào)用一次后該參數(shù)會(huì)被忽略。
• 可選的permalink ：通常是一個(gè)布爾值或字符串，用于指示是否將當(dāng)前的狀態(tài)與 URL 進(jìn)行關(guān)聯(lián)。如果 permalink 為 true，useActionState 可能會(huì)將狀態(tài)信息保存到 URL 中，允許用戶在刷新頁(yè)面或分享鏈接時(shí)保留當(dāng)前的表單狀態(tài)。

返回

• state：當(dāng)前的 state。第一次渲染期間，該值為傳入的 initialState 參數(shù)值。在 action 被調(diào)用后該值會(huì)變?yōu)?action 的返回值。
• formAction：通常是一個(gè)函數(shù)，用于處理表單的提交或其他動(dòng)作。它封裝了提交表單所需的邏輯，可以通過調(diào)用這個(gè)函數(shù)來觸發(fā)與服務(wù)器的交互或狀態(tài)更新。調(diào)用 formAction 后，useActionState 會(huì)根據(jù) fn 的執(zhí)行結(jié)果更新 state 和 isPending，從而反映最新的狀態(tài)。
• isPending：指示當(dāng)前的操作（通常是表單提交或其他異步操作）是否正在進(jìn)行中

用法
假設(shè)我們要實(shí)現(xiàn)這樣一個(gè)功能：

點(diǎn)擊Submit，如果First Name值為空，提示：Name is required，如果不為空，提示：User save來模擬表單提交。
如果使用useState來實(shí)現(xiàn)

如果使用useActionState來實(shí)現(xiàn)

"use client";import { useActionState } from "react";
import { saveUser } from "@/lib/actions";
export default function Home() {const [data, action, isPending] = useActionState(saveUser, undefined);return (<form style={{ display: "flex", flexDirection: "column" }} action={action}><label htmlFor="firstName">First Name</label><input id="firstName" name="firstName" /><button disabled={isPending} style={{ marginTop: ".5rem" }}>{" "}Submit</button>{data?.error && <span style={{ color: "red" }}>{data?.error}</span>}{data?.message && <span style={{ color: "green" }}>{data?.message}</span>}</form>);
}

"use server";
export async function saveUser(previousState: unknown, formData: FormData) {// Do some fetch request to save user to databaseconst firstName = formData.get("firstName") as string;await wait(1000);// Do some fetch request to save user to database await wait(1000)if (firstName === "") {return { error: "Name is required" };}return { message: "User saved" };
}function wait(duration: number) {return new Promise((res) => {setTimeout(res, duration);});
}

useActionState 返回一個(gè)包含以下值的數(shù)組：

1. 該表單的 當(dāng)前 state，初始值為提供的 初始 state，當(dāng)表單被提交后則改為傳入的 action 的返回值。
2. 傳入 <form> 標(biāo)簽的 action 屬性的 新 action。
3. 一個(gè) pending state，可以在處理 action 的過程中使用它。

表單被提交后，傳入的 action 函數(shù)會(huì)被執(zhí)行。返回值將會(huì)作為該表單的新的 當(dāng)前 state。

傳入的 action 接受到的第一個(gè)參數(shù)將會(huì)變?yōu)樵摫韱蔚?當(dāng)前 state。當(dāng)表單第一次被提交時(shí)將會(huì)傳入提供的 初始 state，之后都將傳入上一次調(diào)用 action 函數(shù)的返回值。余下參數(shù)與未使用 useActionState 前接受的參數(shù)別無二致。

注意
useActionState Hook 當(dāng)前僅在 React Canary 與 experimental 渠道中可用。此外，需要一款完全支持 React 服務(wù)器組件 特性的框架才可以使用 useActionState 的所有特性。

在早期的 React Canary 版本中，這個(gè) API 是 React DOM 的一部分，稱為 useFormState。

• 在支持 React 服務(wù)器組件的框架中使用該功能時(shí)，useActionState 允許表單在服務(wù)器渲染階段時(shí)獲得部分交互性。當(dāng)不使用服務(wù)器組件時(shí)，它的特性與本地 state 相同。

• 與直接通過表單動(dòng)作調(diào)用的函數(shù)不同，傳入 useActionState 的函數(shù)被調(diào)用時(shí)，會(huì)多傳入一個(gè)代表 state 的上一個(gè)值或初始值的參數(shù)作為該函數(shù)的第一個(gè)參數(shù)。

useFormStatus

useFormStatus 是一個(gè)提供上次表單提交狀態(tài)信息的 Hook。

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

參數(shù)
useFormStatus 不接收任何參數(shù)
返回
useFormStatus 返回一個(gè)包含以下屬性的 status 對(duì)象：

• pending：布爾值。如果為 true，則表示父級(jí)<form>正在等待提交；否則為 false。
• data：實(shí)現(xiàn)了 FormData interface 的對(duì)象，包含父級(jí)<form>正在提交的數(shù)據(jù)；如果沒有進(jìn)行提交或沒有父級(jí) <form>，它將為 null。
• method：字符串，可以是 ‘get’ 或 ‘post’。表示父級(jí) <form> 使用 GET 或 POST HTTP 方法 進(jìn)行提交。默認(rèn)情況下，<form> 將使用 GET 方法，并可以通過 method 屬性指定。
• action：一個(gè)傳遞給父級(jí) <form> 的 action 屬性的函數(shù)引用。如果沒有父級(jí) <form>，則該屬性為 null。如果在 action 屬性上提供了 URI 值，或者未指定 action 屬性，status.action 將為 null。

用法

示例：使用從 useFormStatus 返回的狀態(tài)信息中的 data 屬性來顯示用戶正在提交的數(shù)據(jù)是什么。
UsernameForm.js:

import {useState, useMemo, useRef} from 'react';
import {useFormStatus} from 'react-dom';export default function UsernameForm() {const {pending, data} = useFormStatus();return (<div><h3>請(qǐng)求用戶名：</h3><input type="text" name="username" disabled={pending}/><button type="submit" disabled={pending}>提交  </button><br /><p>{data ? `請(qǐng)求 ${data?.get("username")}...`: ''}</p></div>);
}

App.js

import UsernameForm from './UsernameForm';
import { submitForm } from "./actions.js";
import {useRef} from 'react';export default function App() {const ref = useRef(null);return (<form ref={ref} action={async (formData) => {await submitForm(formData);ref.current.reset();}}><UsernameForm /></form>);
}

actions.js

export async function submitForm(query) {await new Promise((res) => setTimeout(res, 2000));
}

注意

• useFormStatus Hook 必須從在 內(nèi)渲染的組件中調(diào)用。
• useFormStatus 僅會(huì)返回父級(jí) 的狀態(tài)信息。它不會(huì)返回同一組件或子組件中渲染的任何 的狀態(tài)信息。

總結(jié)

useActionState鉤子旨在無縫處理服務(wù)器操作。當(dāng)您將服務(wù)器操作傳遞給 useActionState 時(shí)，它將返回一個(gè)包含錯(cuò)誤（或狀態(tài)）、isPending 狀態(tài)和操作本身的對(duì)象。此設(shè)置對(duì)于管理表單提交和在返回結(jié)果之前跟蹤加載狀態(tài)特別有用。

useFormStatus鉤子旨在讓您深入了解表單的當(dāng)前狀態(tài)，例如了解表單是否處于 “submitting” 狀態(tài)。這對(duì)于顯示 UI 元素（如加載指示器）或阻止多個(gè)表單提交（直到當(dāng)前提交完成）特別有用