React 团队于 2024 年 12 月 5 日正式发布了 React v19 稳定版，并在 npm 上可用。此次更新带来了许多令人期待的新特性和改进，开发者们可以通过 React 19 升级指南获取详细的升级步骤和注意事项。本文将对 React 19 的新功能进行概述，并介绍如何在项目中应用这些特性。

React v19 新特性

Actions 和异步过渡

在 React 应用中，数据更新和状态变更是常见的场景。React 19 引入了 Actions 概念，通过支持异步函数，简化了处理待定状态、错误、乐观更新以及表单的逻辑。例如，新的 useActionState 钩子和

function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    
      
      Update
      {error && 
{error}
}
    
  );
}

新钩子与 API

• useActionState: 简化了 Actions 的常见应用场景。
• useOptimistic: 提供乐观更新功能，允许在异步请求进行时即刻更新 UI。
• use: 支持在渲染时读取资源和上下文，使得在条件中使用 Context 成为可能。

React DOM 静态 API

React 19 引入了 prerender 和 prerenderToNodeStream 两个新的 API，用于改进静态 HTML 生成，支持流环境如 Node.js Streams 和 Web Streams。

服务器组件与服务器操作

React 服务器组件允许在构建时或每次请求时预先渲染组件，为开发者提供了新的选择。同时，服务器操作允许客户端组件调用在服务器上执行的异步函数，提升了客户端与服务器的协作能力。

改进与兼容性

• Ref 作为属性：函数组件现在可以直接通过属性访问 ref，不再需要 forwardRef。
• 文档元数据支持：React 19 原生支持在组件中渲染