React 19 useActionState 并发控制与表单体验实践

概览useActionState 能将服务端动作结果回传到客户端状态，并自然处理并发场景。与 Server Actions 协同可实现无刷新提交与状态治理，减少自定义状态机复杂度。Server Actionsapp/actions.ts'use server' export async function register(data: FormData) { await new Promise((r) => setTimeout(r, 500)) const email = String(data.get('email') || '') const ok = /@/.test(email) return ok ? { ok, message: '注册成功' } : { ok, message: '邮箱格式错误' } } 客户端表单'use client' import { useActionState } from 'react' import { register } from '../actions' export default function SignupForm() { const [state, formAction, pending] = useActionState(async (_prev, formData) => { 'use server' return register(formData) }, { ok: false, message: '' }) return ( <form action={formAction} aria-describedby="hint"> <label htmlFor="email">邮箱</label> <input id="email" name="email" type="email" required /> <button disabled={pending}>{pending ? '提交中…' : '提交'}</button> <p id="hint" role="status">{state.message || '请输入邮箱'}</p> </form> ) } 治理要点使用 `pending` 控制禁用态，避免并发重复提交。将提示信息挂到 `role="status"` 确保读屏器反馈。与缓存失效与导航策略协作，完成后做轻量刷新或跳转。验证与指标React：19.0+；Next.js：15.0+在弱网下并发提交受控；表单提示清晰，用户反馈及时