React 19 引入了许多新特性和改进，旨在简化开发流程、提升性能，并增强与现代开发需求的兼容性。以下是对 React 19 新特性的详细解读：
1. useTransition
useTransition 是一个 Hook，用于在并发模式下管理过渡状态（transition state）。它允许你将状态更新标记为低优先级，从而优化用户体验，避免页面卡顿或延迟。
示例
import { useState, useTransition } from 'react';
function App() {
const [isPending, startTransition] = useTransition();
const [inputValue, setInputValue] = useState('');
const [list, setList] = useState([]);
const handleInputChange = (e) => {
const value = e.target.value;
setInputValue(value); // 高优先级更新，立即执行
// 使用 startTransition 将低优先级更新推迟
startTransition(() => {
const newList = [];
for (let i = 0; i < 20000; i++) {
newList.push(value);
}
setList(newList); // 低优先级更新，推迟执行
});
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="Type something..."
/>
{isPending ? (
<p>Loading...</p>
) : (
<ul>
{list.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
)}
</div>
);
}
2. React Compiler
React Compiler 是 React 19 中引入的一个重要特性，旨在通过自动优化 React 应用的渲染性能，减少开发者手动优化的工作量。
核心功能
- 自动记忆化：React Compiler 会自动将
React.memo、useMemo和useCallback等进行记忆化，避免不必要的重新渲染。 - 细粒度优化：编译器能够识别哪些部分的代码是静态的（即不会随状态变化而变化），并将其缓存起来。
- 回退机制：如果遇到无法优化的代码（例如非最佳实践或复杂逻辑），React Compiler 会回退到原始的转换器，确保代码的稳定性和正确性。
3. Form Action
formAction 是 React 19 中引入的一个新特性，用于增强表单处理的能力。它允许开发者在表单提交时执行自定义操作，例如异步数据提交、状态更新或导航。
示例
function MyForm() {
const handleSubmit = async (formData) => {
const response = await fetch('/api/submit', {
method: 'POST',
body: formData,
});
const result = await response.json();
console.log(result);
};
return (
<form action={handleSubmit}>
<input type="text" name="username" />
<button type="submit">Submit</button>
</form>
);
}
4. useActionState
useActionState 是一个新的 Hook，用于管理表单提交时的状态。它结合了 useState 和异步操作的能力，能够根据表单提交的结果更新状态，并自动处理加载状态（isPending）。
示例
import { useActionState } from "react";
async function submitForm(previousState, formData) {
const name = formData.get("name");
if (!name) {
return { error: "Name is required" };
}
return { message: `Hello, ${name}!` };
}
function NameForm() {
const [state, formAction, isPending] = useActionState(submitForm, null);
return (
<form action={formAction}>
<input type="text" name="name" />
<button type="submit" disabled={isPending}>
{isPending ? "Submitting..." : "Submit"}
</button>
{state?.error && <p style={{ color: "red" }}>{state.error}</p>}
{state?.message && <p>{state.message}</p>}
</form>
);
}
5. useOptimistic
useOptimistic 是一个新的 Hook，用于实现乐观更新（Optimistic Update）。它允许在异步操作完成之前立即更新 UI，从而提升用户体验。
示例
import { useOptimistic, useState } from "react";
function LikeButton({ initialLikes }) {
const [likes, setLikes] = useState(initialLikes);
const [optimisticLikes, setOptimisticLikes] = useOptimistic(likes, (state, newLike) => state + 1);
const handleClick = async () => {
setOptimisticLikes(1); // 立即更新 UI
await likePost(); // 发送请求
setLikes((prev) => prev + 1); // 更新实际状态
};
return (
<button onClick={handleClick}>
{optimisticLikes} Likes
</button>
);
}
6. useFormStatus
useFormStatus 是一个新的 Hook，用于在表单提交期间获取表单的状态信息，例如表单是否正在提交（pending 状态）。
示例
import { useFormStatus } from "react-dom";
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button type="submit" disabled={pending}>
{pending ? "Submitting..." : "Submit"}
</button>
);
}
function MyForm() {
return (
<form action="/submit">
<input type="text" name="username" />
<SubmitButton />
</form>
);
}
7. Refs as Props
在 React 19 中，ref 可以直接作为函数组件的 props 传递，而不再需要通过 forwardRef 来转发。这一变化使得 ref 的使用更加直观和简洁。
示例
function MyInput({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
function App() {
const inputRef = useRef(null);
return <MyInput ref={inputRef} />;
}
8. use
use 是一个新的 Hook，用于在渲染期间读取资源（如 Promise 或 Context）。它允许条件调用，并与 Suspense 结合使用。
示例
import { use } from "react";
function Comments({ commentsPromise }) {
const comments = use(commentsPromise);
return comments.map(comment => <p key={comment.id}>{comment}</p>);
}
9. Document Metadata
React 19 原生支持 <title>、<meta> 和 <link> 等文档元数据标签。这些标签可直接在组件中声明，React 会自动将它们提升至 <head>，并确保与服务端渲染和客户端渲染兼容。
示例
function BlogPost({ post }) {
return (
<article>
<h1>{post.title}</h1>
<title>{post.title}</title>
<meta name="author" content={post.author} />
<meta name="keywords" content={post.keywords} />
<link rel="canonical" href={post.canonicalUrl} />
<p>{post.content}</p>
</article>
);
}
总结
React 19 通过引入 useTransition、React Compiler、formAction、useActionState、useOptimistic、useFormStatus、use 和 Document Metadata 等新特性，显著提升了开发体验和应用性能。这些新特性使得 React 开发更加高效和易用，同时也提供了更多的功能和灵活性。
