React 19 新特性：Actions 和 useTransition

React 19 已正式发布稳定版本，并已在 npm 上提供！它集成了众多特性和增强功能，旨在简化开发流程、提升性能，并简化常见 UI 模式的处理。

本文主要介绍 React 19 新增的 Actions 概念和 useTransition 钩子的变化。

1、Actions

在 React 19 中，增加了对在转换中使用异步函数的支持，以自动处理挂起状态、错误、表单和乐观更新。这种使用异步转换的函数被称为 Actions。

2、useTransition

useTransition 在 React 19 中支持异步函数，可以用来自动处理挂起状态。

在使用 useTransition 之前，例如，当用户提交表单以更改其名称时，需要发出 API 请求，并处理响应，这些需要手动处理挂起状态、错误、乐观更新以及顺序请求。

看下面例子，在 useState 中手动处理挂起状态和错误状态：

// 使用 Actions 之前
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

当使用 useTransition 来处理挂起状态：

// 从 Actions 中获取挂起状态
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

异步转换会立即将 isPending 状态设置为 true，发起异步请求，并在任何转换完成后将 isPending 切换为 false。这样，省去了手动处理挂起状态，在数据变化的过程中，可以保持当前用户界面的响应性和交互性。