React 19 RC更新指南

type

status

date

slug

summary

📝 React 19更新特性：

删除已经弃用的API, propTypes 和 defaultProps

自行选择迁移到TypeScript或者其他类型检查工具
类组件将继续支持 defaultProps，因为没有 ES6 替代方案。

删除了refs字符串引用

删除了模块模式工厂

这种模式很少使用，支持它会导致 React 比必要的稍大和慢。在 React 19 中，我们将删除对模块模式工厂的支持，您需要迁移到常规函数：

删除了React.createFactory

在 JSX 得到广泛支持之前，使用 createFactory 很常见，但现在很少使用，可以用 JSX 替换。在 React 19 中，我们将删除 createFactory，您需要迁移到 JSX：

Actions

React 应用程序中的一个常见用例是执行数据突变，然后更新状态作为响应。例如，当用户提交表单以更改其姓名时，您将发出 API 请求，然后处理响应。过去，您需要手动处理挂起状态、错误、乐观更新和顺序请求。
在 React 19 中，我们添加了对在转换中使用异步函数的支持，以自动处理挂起状态、错误、表单和乐观更新。
例如，您可以使用useTransition来为您处理挂起状态：
异步转换将立即将isPending状态设置为 true，发出异步请求，并在任何转换后将isPending切换为 false。这使您可以在数据更改时保持当前 UI 的响应能力和交互性。
React 19 构建在 Actions 之上，引入了useOptimistic来管理乐观更新，并引入了一个新的钩子React.useActionState来处理 Actions 的常见情况。在react-dom中，我们添加<form>操作来自动管理表单，并useFormStatus来支持表单中操作的常见情况。

新hooks: useActionState ，删除了useFromState hooks

useActionState接受一个函数（“Action”），并返回一个包装的 Action 来调用。这是有效的，因为动作是组合的。当调用包装的 Action 时， useActionState将返回 Action 的最后结果作为data ，并将 Action 的挂起状态返回为pending
Actions 还与 React 19 的react-dom的新<form>功能集成。我们添加了对传递函数作为<form> 、 <input>和<button>元素的action和formAction属性的支持，以自动提交带有 Actions 的表单：
当<form>操作成功时，React 将自动重置不受控制组件的表单。如果需要手动重置<form> ，可以调用新的requestFormReset React DOM API。

新hooks: useFormStatus

在设计系统中，通常会编写需要访问其所在<form>信息的设计组件，而无需将 props 深入到组件。这可以通过 Context 来完成，但为了使常见情况更容易，我们添加了一个新的钩子useFormStatus ：
useFormStatus读取父级<form>的状态，就好像该表单是上下文提供程序一样。

新hooks: useOptimistic

执行数据突变时的另一种常见 UI 模式是在异步请求正在进行时乐观地显示最终状态。在 React 19 中，我们添加了一个名为useOptimistic的新钩子，以简化此操作：
当updateName请求正在进行时， useOptimistic钩子将立即渲染optimisticName 。当更新完成或出错时，React 会自动切换回currentName值。

新API: use

在 React 19 中，我们引入了一个新的 API 来读取渲染中的资源： use
例如，您可以use读取 Promise，React 将 Suspend 直到 Promise 解析，也可以读取Context，简化了Context的操作，同时use可以在if或者循环语句中使用

简化了Ref和Context

组件之间传递ref时不再通过forwardRef, 而是将ref作为props值进行传递

Context包装组件时不再需要使用Provider包装组件, 直接通过Context包装组件即可

ref支持清理函数

当组件卸载时，React 将调用从ref回调返回的清理函数。这适用于 DOM 引用、类组件的引用和useImperativeHandle 。

useDeferredValue初始值

我们为useDeferredValue添加了一个initialValue选项：
当提供了initialValue时， useDeferredValue会将其作为组件初始渲染的value返回，并使用返回的deferredValue在后台安排重新渲染。

对文档元数据的支持

在 HTML 中，文档元数据标记（例如<title> 、 <link>和<meta>被保留放置在文档的<head>部分中。在 React 中，决定哪些元数据适合应用程序的组件可能距离渲染<head>的位置很远，或者 React 根本不渲染<head> 。在过去，这些元素需要手动插入到效果中，或者通过像react-helmet这样的库插入，并且在服务器渲染React应用程序时需要仔细处理。
当 React 渲染此组件时，它将看到<title> <link>和<meta>标记，并自动将它们提升到文档的<head>部分。通过原生支持这些元数据标签，我们能够确保它们与仅限客户端的应用程序、流式 SSR 和服务器组件配合使用。

支持样式表

外部链接的样式表 ( <link rel="stylesheet" href="..."> ) 和内联样式表 ( <style>...</style> )，由于样式的原因，需要在 DOM 中仔细定位优先规则。构建允许组件内可组合性的样式表功能很困难，因此用户通常最终要么加载远离可能依赖于它们的组件的所有样式，要么使用封装这种复杂性的样式库。
在 React 19 中，我们正在解决这种复杂性，并提供对客户端并发渲染和服务器上流式渲染的更深入集成，并内置对样式表的支持。如果你告诉 React 样式表的precedence ，它将管理 DOM 中样式表的插入顺序，并确保在显示依赖于这些样式规则的内容之前加载样式表（如果是外部的）。
在服务器端渲染期间，React 将在<head>中包含样式表，这确保浏览器在加载之前不会绘制。如果样式表是在我们开始流式传输之后才发现的，React 将确保在显示依赖于该样式表的 Suspense 边界的内容之前将样式表插入到客户端上的<head>中。
在客户端渲染期间，React 将等待新渲染的样式表加载，然后再提交渲染。如果您从应用程序中的多个位置渲染此组件，React 将仅在文档中包含一次样式表：
对于习惯于手动加载样式表的用户来说，这是一个将这些样式表与依赖于它们的组件一起定位的机会，从而可以更好地进行本地推理，并更轻松地确保您只加载实际依赖的样式表。
样式库和与捆绑器的样式集成也可以采用此新功能，因此即使您不直接渲染自己的样式表，您仍然可以受益，因为您的工具升级为使用此功能。

支持异步脚本

在 HTML 中，普通脚本 ( <script src="..."> ) 和延迟脚本 ( <script defer="" src="..."> ) 按文档顺序加载，这使得在深层渲染这些类型的脚本你的组件树具有挑战性。但是，异步脚本 ( <script async="" src="..."> ) 将以任意顺序加载。
在 React 19 中，我们对异步脚本提供了更好的支持，允许您在组件树中的任何位置、实际依赖于脚本的组件内渲染它们，而无需管理重新定位和重复数据删除脚本实例。
在所有渲染环境中，异步脚本都会被去重，这样即使脚本由多个不同的组件渲染，React 也只会加载并执行一次脚本。
在服务器端渲染中，异步脚本将包含在<head>中，并优先于阻止绘制的更关键资源（例如样式表、字体和图像预加载）。

支持预加载资源

在初始文档加载和客户端更新期间，告诉浏览器可能需要尽早加载的资源可能会对页面性能产生巨大影响。
React 19 包含许多用于加载和预加载浏览器资源的新 API，以便尽可能轻松地构建不受低效资源加载阻碍的出色体验。
这些 API 可用于通过将字体等其他资源的发现移出样式表加载来优化初始页面加载。他们还可以通过预取预期导航使用的资源列表，然后在单击甚至悬停时急切地预加载这些资源，从而加快客户端更新速度。

与第三方脚本和扩展的兼容性

我们改进了水合作用，以考虑第三方脚本和浏览器扩展。
水合时，如果客户端渲染的元素与服务器 HTML 中找到的元素不匹配，React 将强制客户端重新渲染以修复内容。以前，如果由第三方脚本或浏览器扩展插入元素，则会触发不匹配错误和客户端渲染。
在 React 19 中， <head>和<body>中的意外标签将被跳过，避免不匹配错误。如果 React 由于不相关的水合作用不匹配而需要重新渲染整个文档，它将保留由第三方脚本和浏览器扩展插入的样式表。

更好的错误报告

我们改进了 React 19 中的错误处理，以消除重复并提供处理捕获和未捕获错误的选项。例如，当渲染中出现错误并被错误边界捕获时，以前的 React 会抛出错误两次（一次是针对原始错误，然后在无法自动恢复后再次抛出），然后调用console.error并提供有关错误位置的信息发生。
在 React 19 中，我们记录一个错误，其中包含所有错误信息：
此外，我们添加了两个新的根选项来补充onRecoverableError ：

createRoot 和 hydrateRoot 添加了用于自定义错误处理的新方法

如果没有自定义错误处理的方法，react默认会做出相应的处理方式：

未捕获的错误：未被错误边界捕获的错误将报告给 window.reportError。
捕获的错误：由错误边界捕获的错误将报告给 console.error。
onRecoverableError ：抛出错误时调用并自动恢复。

反应服务器组件(RSC)

服务器组件是一个新选项，允许在捆绑之前在与客户端应用程序或 SSR 服务器分开的环境中提前渲染组件。这个单独的环境是 React Server Components 中的“服务器”。服务器组件可以在构建时在 CI 服务器上运行一次，也可以使用 Web 服务器针对每个请求运行。
服务器操作允许客户端组件调用在服务器上执行的异步函数。
服务器操作可以在服务器组件中创建并作为属性传递给客户端组件，也可以在客户端组件中导入和使用。