React 19 已正式发布了稳定版，现已在 npm 上可用！它包含许多特性和增强，旨在简化开发、提高性能并简化常见 UI 模式的处理操作。本文将介绍 React 19 中的新特性以及如何在项目中采用这些特性。
React 19 中的关键新增特性
动作和异步转换
动作（Action）简化了很多异步操作（如数据突变、待处理状态、错误处理和乐观更新）的管理。你可以使用 useTransition 或新的 useActionState 钩子来：
自动处理待处理状态。
提供更好的错误处理。
使用 action 或 formAction 属性管理表单提交元素。
示例：使用 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> );}使用 useOptimistic 进行乐观更新
新的 useOptimistic 钩子允许你在等待异步响应时向用户提供即时反馈。
function ChangeName({ currentName, onUpdateName }) { const [optimisticName, setOptimisticName] = useOptimistic(currentName); const submitAction = async (formData) => { const newName = formData.get("name"); setOptimisticName(newName); const updatedName = await updateName(newName); onUpdateName(updatedName); }; return ( <form action={submitAction}> <p>Your name is: {optimisticName}</p> <input type="text" name="name" /> </form> );}use API
use API 允许你有条件地渲染 Promise 和上下文，从而实现更灵活的组件设计。
import { use } from 'react';function Comments({ commentsPromise }) { const comments = use(commentsPromise); return comments.map(comment => <p key={comment.id}>{comment}</p>);}原生元数据管理
React 19 支持直接在组件中渲染标签，并自动将它们提升到对应部分。
function BlogPost({ post }) { return ( <article> <title>{post.title}</title> <meta name="author" content="Author Name" /> </article> );}增强的样式表和脚本管理
React 19 引入了对以下项的内置支持：
使用可控优先级的样式表。
在组件树中渲染的异步脚本，确保重复数据删除和正确的执行顺序。
<link rel="stylesheet" href="styles.css" precedence="default" /><script async src="script.js"></script服务端组件和动作
React 服务端组件现已稳定，允许提前渲染组件。与服务端动作（通过“use server”指令启用）配对后，客户端组件可以无缝调用异步服务端函数。
改进的错误处理
React 19 整合了错误报告，提供简洁且可操作的错误消息。开发人员现在可以使用 onCaughtError、onUncaughtError 和 onRecoverableError 进行细粒度的错误处理。
Ref 作为 Prop
函数组件现在可以接受 ref 作为 prop，通过消除对 forwardRef 的需求来简化代码。
水合（Hydration）和第三方集成
React 19 改进了水合，可以优雅地处理浏览器扩展或第三方脚本插入的意外元素。
预加载资源
使用资源预加载 API（例如 preload 和 preinit）优化性能：
import { preload, preinit } from 'react-dom';preinit('script.js', { as: 'script' });preload('font.woff', { as: 'font' });两个用于预渲染的新 API 改进了现有的 renderToString 函数，它们会等待所有数据加载后再返回静态 HTML 流。这两个函数称为 prerender 和 prerenderToNodeStream。虽然它们是为流式传输环境设计的，但它们不会在内容加载时进行流式传输，后者在 renderToPipeableStream 和 renderToReadableStream 中已经能做到了。在这两种情况下，文档都指出这些函数通常由框架调用，并且“大多数组件不需要导入或使用它们”。
Suspense 也有所改进。React 19 中的预热特性意味着临时回退内容会立即渲染，而之前它会等待其他兄弟组件先渲染。
如何升级
请遵循 React 19 升级指南_（_https://react.dev/blog/2024/12/05/react-19），内有分步说明。主要注意事项包括：
重大更改（指南中有文档）。
测试应用程序的兼容性。
更新使用 React 作为对等依赖项的依赖项。
立即开始
通过 npm 将你的项目升级到 React 19：
npm install react@19 react-dom@19浏览官方 React 19 文档_（https://react.dev/blog/2024/12/05/react-19）_ 以深入了解这些新特性和最佳实践。
React 19 代表了一次飞跃，它为开发人员提供了强大的工具来创建动态、高性能和可访问的应用程序。立即开始探索吧！
原文链接：
https://dev.to/gladiatorsbattle/react-19-stable-release-whats-new-and-how-to-upgrade-299d
