打开网易新闻 查看精彩图片

作者 | Gladiators Battle

译者 | 王强

策划 | Tina

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 (



Update
{error && {error}}

);
}

使用 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 (


Your name is: {optimisticName}


);
}

use API

use API 允许你有条件地渲染 Promise 和上下文，从而实现更灵活的组件设计。

import { use } from 'react';
function Comments({ commentsPromise }) {
const comments = use(commentsPromise);
return comments.map(comment => {comment});
}

原生元数据管理

React 19 支持直接在组件中渲染标签，并自动将它们提升到对应部分。

function BlogPost({ post }) {
return (


{post.title}


);
}

增强的样式表和脚本管理

React 19 引入了对以下项的内置支持：

使用可控优先级的样式表。

在组件树中渲染的异步脚本，确保重复数据删除和正确的执行顺序。