React 19 中的新增功能-js教程-PHP中文网

React 19 中的新增功能

Linda Hamilton

发布： 2024-12-23 13:37:23

原创

728 人浏览过

What’s new in React 19

行动

React 应用程序中的一个常见用例是执行数据突变，然后更新状态作为响应。例如，当用户提交表单以更改其姓名时，您将发出 API 请求，然后处理响应。过去，您需要手动处理挂起状态、错误、乐观更新和顺序请求。

例如，您可以在 useState 中处理挂起和错误状态：

// Before 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>
  );
}

登录后复制

在 React 19 中，我们添加了对在转换中使用异步函数的支持，以自动处理挂起状态、错误、表单和乐观更新。

例如，您可以使用 useTransition 为您处理挂起状态：

// Using pending state from 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。这使您可以在数据更改时保持当前 UI 的响应能力和交互性。

笔记

按照惯例，使用异步转换的函数称为“操作”。
操作会自动为您管理提交数据：

挂起状态：操作提供一个挂起状态，该状态在请求开始时启动，并在提交最终状态更新时自动重置。
乐观更新：操作支持新的 useOptimistic 挂钩，因此您可以在提交请求时向用户显示即时反馈。
错误处理：操作提供错误处理，以便您可以在请求失败时显示错误边界，并自动将乐观更新恢复为其原始值。
表格：元素现在支持将函数传递给 action 和 formAction 属性。将函数传递给操作属性默认使用操作，并在提交后自动重置表单。

基于 Actions 构建，React 19 引入了 useOptimistic 来管理乐观更新，并引入了一个新的钩子 React.useActionState 来处理 Actions 的常见情况。在react-dom中我们添加了

;自动管理表单的操作，并使用FormStatus支持表单中操作的常见情况。

在 React 19 中，上面的例子可以简化为：

// Using <form> Actions and useActionState
function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

登录后复制

在下一节中，我们将详细介绍 React 19 中的每个新 Action 功能。

新钩子：useActionState

为了使操作的常见情况更容易，我们添加了一个名为 useActionState 的新钩子：

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // You can return any result of the action.
      // Here, we return only the error.
      return error;
    }

    // handle success
    return null;
  },
  null,
);

登录后复制

useActionState 接受一个函数（“Action”），并返回一个包装的 Action 来调用。这是有效的，因为动作是组合的。当调用包装好的 Action 时，useActionState 会返回该 Action 的最后结果作为数据，并将该 Action 的挂起状态为待处理。