React 19 来了:新特性一览与迁移指南

React 19 带来了很多令人兴奋的新特性。本文用通俗的语言介绍这些变化,以及如何平滑迁移。

ZH

2026年3月22日 · 1 分钟阅读

React 19 到底新在哪?

每次 React 大版本更新,社区都要沸腾一次。这次 React 19 也不例外。

最重要的变化

1. React Server Components(正式版)
RSC 终于不是实验特性了。这意味着你可以在服务端渲染组件,减少客户端 JavaScript 体积。

// 这个组件只在服务端运行
async function BlogPost({ slug }) {
  const post = await db.query(`SELECT * FROM posts WHERE slug = $1`, [slug])
  return <article>{post.content}</article>
}

2. Actions
表单处理终于有了官方方案:

function LoginForm() {
  const login = async (formData) => {
    "use server"
    await authenticate(formData)
  }
  return <form action={login}>...</form>
}

3. use() Hook
可以在条件语句中使用 hook 了:

const data = use(promise)

要不要升级?

建议升级的情况:

  • 新项目直接上 React 19
  • 现有项目如果用了 Next.js 15+,升级很平滑

建议等等的情况:

  • 项目依赖了很多第三方库(等它们兼容)
  • 项目快上线了(不要在生产前升级)

迁移步骤

1. npm install react@19 react-dom@19
2. 检查第三方库兼容性
3. 修复 breaking changes
4. 跑测试
5. 上线观察

React 19 不是革命,而是进化。它让好的实践变成了默认行为。