React 19 新特性全解析

React 19 带来了什么？

React 19 是 React 历史上最重要的版本之一，引入了全新的并发特性和开发体验改进。

Actions — 异步状态管理新范式

在 React 19 之前，处理异步操作需要手动管理 loading、error 等状态。Actions 将这一切自动化：

function UpdateName() {
const [error, submitAction, isPending] = useActionState(
async (prevState, 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 disabled={isPending}>Update</button>
{error && <p>{error}</p>}
</form>
);
}

use() Hook — 在渲染中读取资源

新的 use() API 允许你在渲染阶段直接读取 Promise 或 Context：

import { use } from 'react';
function Comments({ commentsPromise }) {
// use() will suspend until the promise resolves
const comments = use(commentsPromise);
return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

新的 Ref 传递方式

函数组件现在可以直接接受 ref 作为 prop，无需 forwardRef：

function MyInput({ placeholder, ref }) {
return <input placeholder={placeholder} ref={ref} />
}
// 使用
<MyInput ref={ref} />

Document Metadata 支持

可以在组件中直接渲染