React 19 新特性说明

React 19 是 React 的一个重要里程碑版本，主要集中在 性能优化（React Compiler） 和 服务器端功能（Server Actions/Components） 的原生支持上，同时大幅简化了开发体验。

以下是 React 19 的核心新特性总结：

1. 核心性能升级：React Compiler (React Forget)

虽然编译器本身通常作为一个独立的构建工具引入，但它是 React 19 时代的标志性功能。

自动记忆化 (Automatic Memoization): 你不再需要手动编写 useMemo、useCallback 或 memo。编译器会自动分析代码，对组件、Props 和依赖项进行记忆化处理。
精细化更新: 只有真正发生变化的部分才会重新渲染，解决了长期以来 React 应用中因为父组件渲染导致子组件无意义重绘的问题。

2. 全新的 "Actions" 机制

React 19 将数据变更（Mutations）和表单处理提升为一等公民，统称为 Actions。

支持 Async Transitions: startTransition 现在支持异步函数。你可以直接在事件处理函数中通过 async/await 发起请求，React 会自动处理 Pending 状态。
<form> Action 增强: <form> 标签的 action 属性现在可以接收一个函数（Server Action 或 Client Action），React 会自动接管提交生命周期。

3. 四个新增 Hook

为了配合 Actions 机制，React 19 引入了几个强大的 Hook 来简化状态管理：

useActionState (曾用名 useFormState):
用于管理 Action 的结果（如 data、error）和 pending 状态。
JavaScript
```
const [state, formAction, isPending] = useActionState(fn, initialState);
```
useFormStatus:
允许子组件直接获取父级 <form> 的提交状态（如 pending），无需通过 Props 层层传递 isLoading。
JavaScript
```
const { pending } = useFormStatus();
```
useOptimistic:
用于乐观更新（Optimistic UI）。在服务器返回结果之前，立即在界面上显示预期的结果（如点赞后立即变红），如果失败则自动回滚。
JavaScript
```
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);
```
use API:
这不是一个标准的 Hook（可以在循环和条件语句中使用），用于读取资源的值。
- 读取 Context: 替代 useContext，如 const theme = use(ThemeContext)。
- 读取 Promise: 可以直接在组件中等待 Promise 解析，配合 Suspense 使用。

4. 开发体验 (DX) 改进

React 19 移除了一些长期存在的样板代码：

ref 作为普通 Prop:
你不再需要 forwardRef 了！现在可以直接将 ref 作为 prop 传递给函数组件。
JavaScript
```
// React 19 写法
function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}
```
Context 无需 Provider:
你可以直接使用 <Context> 标签，不再需要 <Context.Provider>。
JavaScript
```
// React 19 写法
<ThemeContext value="dark">
  <App />
</ThemeContext>
```
清理 Ref 回调:
ref 回调函数现在支持返回一个清理函数（类似 useEffect），用于在组件卸载时执行清理逻辑。

5. 原生支持文档元数据 (Document Metadata)

不再需要 react-helmet 等第三方库来管理 SEO 标签。React 19 原生支持在组件中渲染 <title>、<meta> 和 <link>，React 会自动将它们提升（Hoist）到文档的 <head> 中。

JavaScript

function BlogPost({ title }) {
  return (
    <article>
      <title>{title}</title>
      <meta name="description" content="React 19 details" />
      <h1>{title}</h1>
    </article>
  );
}

6. 服务器组件 (RSC) 与指令

React 19 进一步稳定了 Server Components 的架构：

Directives: 正式确立了 'use client' 和 'use server' 指令，用于明确区分代码是在服务端运行还是客户端运行。
Server Actions: 允许客户端组件直接调用运行在服务端的函数（通常用于数据库操作），消除了手动创建 API 路由的繁琐过程。

总结

React 19 的目标非常明确：写更少的代码，获得更好的性能。它通过编译器消除了手动优化的心智负担，并通过 Actions 简化了从前复杂的异步数据流处理。

你想看一个使用 useActionState 和 useOptimistic 实现表单提交的具体代码示例吗？