← 返回

React 19 正式发布：服务端组件、全新编译器与 Actions API 深度解析 精华

后端大刘 874 阅读

React 团队终于在最近发布了 React 19 稳定版，这是自 React 18 以来最大的一次更新。我花了周末两天时间通读了 Changelog 和 RFC 文档，整理了一些我认为最值得关注的变化。

一、React Server Components（RSC）正式落地

React 19 将服务端组件作为一等公民支持。简单来说，RSC 允许你在服务端渲染组件，组件可以直接访问数据库、文件系统等后端资源，而无需通过 API 层中转。

// 这是一个服务端组件——可以直接访问数据库
async function BlogPosts() {
  const posts = await db.query('SELECT * FROM posts ORDER BY created_at DESC LIMIT 10');
  return (
    <ul>
      {posts.map(post => <PostCard key={post.id} post={post} />)}
    </ul>
  );
}

关键区别：服务端组件不会被打包到客户端 JS bundle 中，这意味着：

  • 更小的客户端 bundle 体积
  • 更快的首屏渲染（FCP 可降低 30-50%）
  • 直接访问后端资源，减少 API 样板代码

二、React Compiler（原 React Forget）

Meta 团队开源了实验性的 React 编译器，它能自动为组件注入 useMemo 和 useCallback。不再需要手动记忆化！

编译器遵循 "Rules of React" 进行静态分析：

  • 组件和 Hooks 必须在顶层调用
  • 不要在条件语句或循环中调用 Hooks
  • 副作用要在 useEffect 或事件处理中

如果你的代码已经遵循这些规则，编译器可以零配置接入。我们团队在内部项目中试了一下，bundle 体积减少了约 12%，有几个复杂表单组件的渲染性能提升很明显。

三、Actions API

React 19 引入了全新的 Actions 机制来处理表单和异步操作：

async function updateProfile(formData) {
  'use server';
  const name = formData.get('name');
  await db.updateUser(name);
}

function ProfileForm() {
  return (
    <form action={updateProfile}>
      <input name="name" placeholder="Your name" />
      <button type="submit">更新</button>
    </form>
  );
}

结合 useActionState、useFormStatus 和 useOptimistic 三个新 Hook，表单开发体验直接提升了一个档次。

四、其他值得注意的变化

  • Document Metadata 原生支持：<title>、<meta>、<link> 标签现在可以直接写在组件中，不需要 react-helmet
  • ref 作为 prop：不再需要 forwardRef
  • 更好的错误报告：错误信息包含了更清晰的组件堆栈
  • use() Hook：可以在渲染期间读取 Promise 和 Context

我的建议

如果是新建项目，强烈建议直接上 React 19 + Next.js 15（App Router）。存量项目升级的话，React 19 向后兼容性做得不错，我们一个 30 万行代码的项目升级只花了不到一天。

但要注意：RSC 引入了一种新的心智模型——你需要思考"这个组件应该在服务端还是客户端运行"。这需要团队有一个适应期。

大家怎么看？你们有计划升级到 React 19 吗？欢迎讨论！

回复 (4)