React 19 Actions：表单提交与服务器状态同步

React 19 引入了全新的 Actions 特性，专门用于简化表单提交与服务器状态同步的流程。该特性通过以下核心机制实现：

1. 声明式 Action 定义

使用 action 属性直接绑定异步函数：

async function submitForm(formData) {
  // 1. 解析表单数据
  const email = formData.get("email");
  
  // 2. 调用API（示例）
  const res = await fetch("/api/submit", {
    method: "POST",
    body: JSON.stringify({ email })
  });
  
  // 3. 返回结果（自动更新UI状态）
  return res.ok ? { success: true } : { error: "提交失败" };
}

function SignupForm() {
  return (
    <form action={submitForm}>
      <input type="email" name="email" />
      <button type="submit">注册</button>
    </form>
  );
}

2. 自动状态管理

React 自动处理三种关键状态：

function FormWithStatus() {
  const [state, formAction] = useActionState(submitForm);
  
  return (
    <>
      {state?.isPending && <p>提交中...</p>}
      {state?.error && <p class="error">{state.error}</p>}
      {state?.success && <p>注册成功！</p>}
    </>
  );
}

状态类型：

• isPending：提交进行中
• data：服务器响应数据
• error：错误信息

3. 原子化状态更新

使用 useOptimistic 实现即时 UI 反馈：

function TodoList({ items }) {
  const [optimisticItems, addOptimistic] = useOptimistic(
    items,
    (state, newItem) => [...state, { ...newItem, sending: true }]
  );

  async function handleSubmit(formData) {
    const newItem = { text: formData.get("text") };
    addOptimistic(newItem);  // 立即更新UI
    await actualSubmit(newItem); // 实际提交
  }

  return (
    <form action={handleSubmit}>
      {optimisticItems.map(item => (
        <div key={item.id}>{item.text} {item.sending && "⏳"}</div>
      ))}
    </form>
  );
}

4. 错误处理机制

结构化错误捕获：

async function paymentAction(formData) {
  try {
    const res = await pay(formData);
    if (!res.ok) throw new Error("支付失败");
    return { receipt: res.data };
  } catch (error) {
    return {
      error: error.message,
      fieldErrors: { card: "卡号无效" } // 字段级错误
    };
  }
}

5. 与 Suspense 集成

支持加载状态封装：

<Suspense fallback={<Spinner />}>
  <CheckoutForm action={paymentAction} />
</Suspense>

最佳实践

1. 原子操作：每个 Action 只处理单一逻辑
2. 幂等设计：支持重复提交而不产生副作用
3. 乐观更新：先更新 UI 再等待服务器确认
4. 错误隔离：使用 error boundaries 捕获意外异常

graph TD
  A[用户提交表单] --> B[触发Action]
  B --> C{状态更新}
  C --> D[乐观UI更新]
  C --> E[发送服务器请求]
  E --> F{请求结果}
  F -->|成功| G[更新持久化状态]
  F -->|失败| H[回滚UI+显示错误]

此特性大幅简化了数据提交流程，将原本分散的状态管理、错误处理和异步逻辑统一封装，使代码更简洁且可维护性更高。