React 19 已正式稳定，现已在 npm 上提供！它具有丰富的功能和增强功能，旨在简化开发、提高性能并简化常见 UI 模式的处理。下面全面介绍了 React 19 中的新增功能以及如何在项目中采用这些功能。
React 19 中的关键新增内容
操作简化了异步操作的管理，例如数据突变、挂起状态、错误处理和乐观更新。通过使用 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 src="script.js"></script>
React Server 组件现已稳定，允许提前渲染组件。与服务器操作（通过“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' });
如何升级
按照 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 代表了一次飞跃，为开发人员提供了强大的工具来创建动态、高性能和可访问的应用程序。从今天开始探索！
以上是React 稳定版本：新增功能以及如何升级的详细内容。更多信息请关注PHP中文网其他相关文章！
