2024 年 4 月 25 日 The React Team
React 19 RC 版本现在可以在 npm 上使用了!
在我们的 React 19 RC 升级指南 中, 我们分享了将应用程序升级到 React 19 的分步说明。在这篇文章中，我们将概述 React 19 的新特性，以及如何使用它们。
React 19 中的新功能React 19 中的改进如何升级有关破坏性更改的列表，请参阅 升级指南。
React 19 中的新功能 Actions在 React 应用中，一个常见的用例是执行数据变更，然后响应更新状态。例如，当用户提交一个表单来更改他们的名字，你会发起一个 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 ( setName(event.target.value)} /> Update {error && {error}} );}在 React 19 中，我们正在添加在过渡中使用异步函数的支持，以自动处理待定状态、错误、表单和乐观更新。
例如，你可以使用 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 ( setName(event.target.value)} /> Update {error && {error}} );}异步过渡会立即将 isPending 状态设置为 true，发出异步请求，然后在任何过渡后将 isPending 切换为 false。这使你能够在数据变化时保持当前 UI 的响应性和交互性。
注意按照惯例，使用异步过渡的函数被称为 “Actions”。Actions 自动为你管理数据提交：
待定状态: Actions 提供一个待定状态，该状态在请求开始时启动，并在最终状态更新提交时自动重置。乐观更新: Actions 支持新的 useOptimistic Hook，因此你可以在请求提交时向用户显示即时反馈。错误处理: Actions 提供错误处理，因此当请求失败时，你可以显示错误边界，并自动将乐观更新恢复到其原始值。表单: 元素现在支持将函数传递给 action 和 formAction 属性。将函数传递给 action 属性默认使用 Actions，并在提交后自动重置表单。在 Actions 的基础上，React 19 引入了 useOptimistic 来管理乐观更新，以及一个新的 Hook React.useActionState 来处理 Actions 的常见情况。在 react-dom 中我们添加了 Actions 来自动管理表单和 useFormStatus 来支持表单中 Actions 的常见情况。
在 React 19 中，上述示例可以简化为：
// 使用表单的 Actions 和 useActionStatefunction 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 ( Update {error && {error}} );}在下一节中，我们将详细介绍 React 19 中的每一个新的 Action 功能。
新的 Hook: useActionState为了使 Actions 的常见情况更加简单，我们添加了一个名为 useActionState 的新 Hook：
const [error, submitAction, isPending] = useActionState( async (previousState, newName) => { const error = await updateName(newName); if (error) { // 您可以返回操作的任何结果。 // 这里，我们只返回错误。 return error; } // 处理成功的情况。 return null; }, null,);useActionState 接受一个函数（“Action”），并返回一个被包装的用于调用的 Action。这是因为 Actions 是可以组合的。当调用被包装的 Action 时，useActionState 将返回 Action 的最后结果作为 data，以及 Action 的待定状态作为 pending。
注意React.useActionState 在 Canary 版本中曾被称为 ReactDOM.useFormState，但我们已经将其重命名并弃用了 useFormState。
有关