`、`<link>`和）`<meta>`保留用于放置在`<head>`文档的部分中。在 React 中，决定哪些元数据适合应用程序的组件可能距离您渲染的位置非常远，`<head>`或者 React`<head>`根本不渲染。过去，这些元素需要手动插入到效果中，或者通过等库插入[react-helmet](https://github.com/nfl/react-helmet)，并且在服务器渲染 React 应用程序时需要小心处理。在 React 19 中，我们添加了对在组件中原生渲染文档元数据标签的支持： ```js function BlogPost({post}) { return ( <article> <h1>{post.title}</h1> <title>{post.title}

2024 年 4 月 25 日，作者：[React 团队](https://react.dev/community/team) * * * ### 笔记此测试版用于为 React 19 做准备的库。应用程序开发人员应升级到 18.3.0 并等待 React 19 稳定版本，因为我们将使用库并根据反馈进行更改。 React 19 Beta 现已在 npm 上可用！在我们的[React 19 Beta 升级指南](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)中，我们分享了将应用升级到 React 19 Beta 的分步说明。在这篇文章中，我们将概述 React 19 中的新功能以及如何采用它们。 - [React 19 中的新功能](https://react.dev/blog/2024/04/25/react-19#whats-new-in-react-19) - [React 19 中的改进](https://react.dev/blog/2024/04/25/react-19#improvements-in-react-19) - [如何升级](https://react.dev/blog/2024/04/25/react-19#how-to-upgrade) 有关重大变更的列表，请参阅[升级指南](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)。 * * * ## React 19 中的新功能 ### 操作 React 应用中的一个常见用例是执行数据突变，然后更新响应状态。例如，当用户提交表单以更改其姓名时，您将发出 API 请求，然后处理响应。过去，您需要手动处理待处理状态、错误、乐观更新和顺序请求。例如，您可以处理待处理和错误状态`useState`： ```js // 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 (

setName(event.target.value)} /> {error &&

{error}

}

); } ``` 在 React 19 中，我们添加了在转换中使用异步函数的支持，以自动处理待处理状态、错误、表单和乐观更新。例如，您可以使用`useTransition`来处理待处理状态： ```js // Using pending state from Actions function UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useState(null); const [isPending, startTransition] = useTransition(); const handleSubmit = async () => { startTransition(async () => { const error = await updateName(name); if (error) { setError(error); return; } redirect("/path"); }) }; return (

setName(event.target.value)} /> {error &&

{error}

}

); } ``` 异步转换会立即将`isPending`状态设置为 true，发出异步请求，并`isPending`在任何转换后切换为 false。这可让您在数据发生变化时保持当前 UI 的响应和交互。 ### 笔记 #### 按照惯例，使用异步转换的功能称为“动作”。操作会自动为您管理提交数据： - **待处理状态**：操作提供待处理状态，该状态从请求开始时开始，并在提交最终状态更新时自动重置。 - **乐观更新**：操作支持新的[useOptimistic](https://react.dev/blog/2024/04/25/react-19#new-feature-optimistic-updates)钩子，因此您可以在提交请求时向用户显示即时反馈。 - **错误处理**：操作提供错误处理，以便您可以在请求失败时显示错误边界，并自动将乐观更新恢复为其原始值。 - **表单**：`

`元素现在支持将函数传递给`action`和`formAction`道具。将函数传递给`action`道具默认使用 Actions，并在提交后自动重置表单。在 Actions 的基础上，React 19 引入了[useOptimistic](https://react.dev/blog/2024/04/25/react-19#new-hook-optimistic-updates)管理乐观更新的功能，以及一个[React.useActionState](https://react.dev/blog/2024/04/25/react-19#new-hook-useactionstate)处理 Actions 常见情况的新钩子。`react-dom`我们添加了[Actions](https://react.dev/blog/2024/04/25/react-19#form-actions)来自动管理表单并[useFormStatus](https://react.dev/blog/2024/04/25/react-19#new-hook-useformstatus)支持表单中 Actions 的常见情况。在 React 19 中，上面的例子可以简化为： ```js // Using 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 ( {error &&

{error}

}

); } ``` 在下一部分中，我们将分解 React 19 中的每个新 Action 功能。 ### 新钩子：`useActionState` 为了使操作更容易处理常见情况，我们添加了一个新的钩子，称为`useActionState`： ```js 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 }); ``` `useActionState`接受一个函数（“Action”），并返回要调用的包装的 Action。这是因为 Actions 是组合而成的。当调用包装的 Action 时，`useActionState`将以的形式返回 Action 的最后结果`data`，以的形式返回 Action 的待处理状态`pending`。 ### 笔记 `React.useActionState``ReactDOM.useFormState`之前在 Canary 版本中被称为，但是我们已将其重命名并弃用`useFormState`。请参阅[#28491](https://github.com/facebook/react/pull/28491)以了解更多信息。有关详细信息，请参阅文档[useActionState](https://react.dev/reference/react/useActionState)。 ### React DOM：`

`操作 ``Actions 还与 React 19 的新功能集成`react-dom`。我们增加了将函数作为、和元素的`action`和属性传递的支持，以便使用 Actions 自动提交表单：`formAction` `` `` `

{children}