React 19 发生了什么变化
React 19 不是一个小更新，而是一个范式转变。稳定的服务器组件、新的钩子和 React 编译器从根本上改变了开发人员编写应用程序的方式。
稳定的服务器组件
React 服务器组件 (RSC) 现已投入生产。通过在服务器上渲染并将 HTML 发送到客户端，它们可以显着减小包的大小。
// app/page.jsx — Server Component (default)
export default async function Home() {
const posts = await db.query('SELECT * FROM posts');
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
使用 useState 或 useEffect 的组件必须在顶部声明“use client”。
use() 钩子
最值得注意的新功能是 use() 钩子，它允许您直接在组件内部解析 Promise。
function Comments({ commentsPromise }) {
const comments = use(commentsPromise);
return comments.map(c => <p key={c.id}>{c.text}</p>);
}
与传统的钩子不同，use() 在条件语句和循环内部工作。
表单的服务器操作
服务器操作让您无需编写客户端 JavaScript 即可处理表单提交。
export default function CreatePost() {
async function handleSubmit(formData) {
'use server';
const title = formData.get('title');
await db.execute('INSERT INTO posts (title) VALUES (?)', [title]);
revalidatePath('/');
}
return (
<form action={handleSubmit}>
<input name="title" required />
<button type="submit">Create</button>
</form>
);
}
反应编译器
React Compiler（以前称为 React Forget）会自动插入 useMemo 和 useCallback 调用。在 v19 兼容的代码库中不再需要手动优化挂钩。
已弃用的 API
- 完全删除了像 componentWillMount 这样的旧生命周期方法
- ReactDOM.render() 完全被 createRoot() 取代
- PropTypes 官方支持结束
从 React 18 迁移通常需要一天到一周的时间，具体取决于项目规模。