React 19 新特性全解析：Actions、useOptimistic、use()

前言

React 19 是一次面向"数据变更"的重大升级。它把过去需要手写的一堆样板（loading 状态、乐观更新、错误边界）收敛进了框架本身。这篇文章拆解三个最值得关注的能力。

Actions：表单提交的新范式

在 React 19 之前，处理一次表单提交往往需要维护 isPending、error、data 三个状态。现在 useActionState 把它们打包：

import { useActionState } from "react";

function UpdateName() {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const name = formData.get("name") as string;
      const error = await updateName(name);
      if (error) return error;
      redirect("/profile");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input name="name" />
      <button disabled={isPending}>更新</button>
      {error && <p className="text-red-500">{error}</p>}
    </form>
  );
}

action 直接接收一个异步函数，React 自动管理 pending 状态并在提交期间阻止重复提交。

useOptimistic：乐观更新一等公民

聊天、点赞、评论这类交互需要"先更新 UI，再等服务器确认"。useOptimistic 让这件事变得声明式：

function Thread({ messages, sendMessage }) {
  const [optimisticMessages, addOptimistic] = useOptimistic(
    messages,
    (state, newMessage: string) => [
      ...state,
      { text: newMessage, sending: true },
    ],
  );

  async function formAction(formData: FormData) {
    const text = formData.get("message") as string;
    addOptimistic(text);          // 立即渲染
    await sendMessage(text);      // 后台确认
  }

  return (/* 渲染 optimisticMessages */);
}

当异步操作完成后，React 会自动用真实数据替换乐观状态。

use()：读取 Promise 与 Context

use() 打破了"Hooks 不能在条件语句里调用"的限制，可以直接读取一个 Promise 或 Context：

import { use, Suspense } from "react";

function Comments({ commentsPromise }) {
  // use 会在 Promise resolve 前挂起组件
  const comments = use(commentsPromise);
  return comments.map((c) => <p key={c.id}>{c.text}</p>);
}

function Page({ commentsPromise }) {
  return (
    <Suspense fallback={<Spinner />}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

小结

• Actions 消灭表单样板，配合 useActionState / useFormStatus。
• useOptimistic 把乐观更新变成声明式。
• use() 让数据读取与 Suspense 深度结合。

三者共同指向一个方向：让"异步数据变更"成为 React 的原生表达。