Next.js
React 19 新特性全景：useActionState, useOptimistic, use() 与 Actions 范式
Waitwalker2026-08-2915 min
## 1. useActionState 与 Actions
```tsx
'use client'
import { useActionState } from 'react';
import { updateNameAction } from './actions';
export function ProfileForm() {
const [state, formAction, isPending] = useActionState(updateNameAction, null);
return (
<form action={formAction}>
<input name="name" />
<button type="submit" disabled={isPending}>
{isPending ? "更新中..." : "保存"}
</button>
{state?.error && <p className="error">{state.error}</p>}
</form>
);
}
```
#React 19#Hooks#useActionState#乐观UI
回到文章列表 →