React 于 2024 年 12 月 06 日正式发布，为开发者带来了诸多令人兴奋的新特性和改进。下面对 React 19 版本中的核心更新和主要改进做一个快速介绍。

React 19 核心更新

Actions

React 19 引入了 Actions 概念，通过支持异步函数，简化了处理待定状态、错误、乐观更新以及表单的逻辑。

• Pending 状态管理：使用useActionState 和useFormStatus 等新hook轻松处理表单的加载状态。
• React DOM:
  Actions
• 错误处理（errors）：集成错误边界，简化错误回退逻辑。
• 乐观更新（optimistic updates）：通过useOptimistic 实现实时数据更新。

function ChangeName({currentName, onUpdateName}) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async formData => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    
      
Your name is: {optimisticName}
      

        Change Name:
        
      
    
  );
}

新的 React DOM 静态 API

在 React 19 中，为react-dom/static 新增了prerender 和prerenderToNodeStream两个 API，用于改进静态 HTML 生成。它们专为支持流式环境（如 Node.js Streams 和 Web Streams）而设计。

import { prerender } from 'react-dom/static';

async function handler(request) {
  const {prelude} = await prerender(, {
    bootstrapScripts: ['/main.js']
  });
  return new Response(prelude, {
    headers: { 'content-type': 'text/html' },
  });
}

在返回静态 HTML 流之前，预渲染 API 会等待所有数据加载完毕。 流可以转换为字符串，也可以与流响应一起发送。 它们不支持加载时的流式内容，而现有的 React DOM 服务器呈现 API 支持流式内容。

React 服务端组件

React 19 将 Server Components 功能推向稳定，并引入了相关的 API 和最佳实践。

Server Components：

Server Components 是一种新选项，允许在客户端应用或 SSR 服务端之外的环境中预先渲染组件。这一独立环境即为 React 服务端组件中的“服务端”。Server Components可以在 CI 服务器上构建时运行一次，也可以在每个请求时通过 Web 服务器运行。

React 19 包括来自 Canary 版本的所有服务端组件功能。这意味着支持服务端组件的库现在可以将 React 19 作为对等依赖项（peer dependency），并通过 react-server 导出条件在支持全栈 React 架构的框架中使用。

Server Actions：

Server Actions 允许客户端组件调用在服务器上执行的异步函数。 当使用use server 指令定义服务器动作时，框架会自动创建服务器函数的引用，并将该引用传递给客户端组件。 当客户端调用该函数时，React 将向服务器发送请求以执行该函数，并返回结果。

React 19 主要改进

ref 作为属性

从 React 19 开始，函数组件可以通过属性访问ref，不再需要forwardRef，未来将弃用并移除forwardRef。

function MyInput({placeholder, ref}) {
  return 
}

//...

Hydration 错误的差异报告

在 React 19 中，我们改进了 react-dom 对 hydration 错误的差异报告。例如，之前在开发环境中，React 可能会记录多个没有详细信息的错误：

现在，我们会记录一条包含错误差异的消息：

as a provider

在 React 19 中，您可以将 作为 provider，无需再使用：

const ThemeContext = createContext('');

function App({children}) {
  return (
    
      {children}
    
  );  
}

Ref 清理函数

从 React 19 开始，支持从 ref 回调中返回一个 Ref 清理函数（当元素从 DOM 中被移除）：

 {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

原生支持 Document Metadata

React 19 现在原生支持

Eee equals em-see-squared...