React 19 已正式发布了稳定版，现已在 npm 上可用！它包含许多特性和增强，旨在简化开发、提高性能并简化常见 UI 模式的处理操作。本文将介绍 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 钩子允许你在等待异步响应时向用户提供即时反馈。
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 允许你有条件地渲染 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 lay-src="script.js"></script
React 服务端组件现已稳定，允许提前渲染组件。与服务端动作（通过“use server”指令启用）配对后，客户端组件可以无缝调用异步服务端函数。
React 19 整合了错误报告，提供简洁且可操作的错误消息。开发人员现在可以使用 onCaughtError、onUncaughtError 和 onRecoverableError 进行细粒度的错误处理。
函数组件现在可以接受 ref 作为 prop，通过消除对 forwardRef 的需求来简化代码。
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
声明：本文为 InfoQ 翻译，未经许可禁止转载。
硅谷 1/10 程序员在摸鱼？拿20-30万美元年薪却几乎不干活
裁掉 1.5 万人后，英特尔传奇 CEO 被逼下台：18 岁入职，风雨 40 载，如今成了“背锅侠”？
GitHub谎报了Copilot的统计数据！两年了，我们还是没办法证明AI编程助手能提高代码质量
12 月 13 日至 14 日（周五至周六），AICon 全球人工智能开发与应用大会将在北京盛大开幕！本次大会汇聚 70+ 位 AI 及技术领域的顶尖专家，深入探讨大模型与推理、AI Agent、多模态、具身智能等前沿话题。此外还有丰富的圆桌论坛、以及展区活动，带你深入探索大模型的最新实践与未来趋势。年度最后一次 AI 盛宴，让我们一起见证 AI 未来。
