# React 19 新特性详解

React 19 是 React 的最新重大版本，带来了一系列激动人心的新特性和改进。本文将详细介绍 React 19 的主要新功能。

# 📋 目录

use hook
Server Components
Server Actions
Ref as Prop
Actions API
Suspense 改进
编译器优化
use hook 详解

# 1. use hook

React 19 引入了全新的 use hook，这是一个用于读取资源状态的革命性 API。

# 基本用法

import { use } from 'react';

function Comments({ commentsResource }) {
  const comments = use(commentsResource);
  return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul>;
}

# 特性

同步读取：use 可以同步读取 Promise 或 Context
** Suspense 集成**：自动与 Suspense 配合使用
条件调用：可以在条件语句和回调中调用

# 与 useEffect 的区别

特性	use	useEffect
调用时机	同步	异步
条件调用	✅ 支持	❌ 不支持
返回值	资源值	cleanup 函数

# 2. Server Components

服务器组件允许你在服务器上渲染组件，减少客户端 bundle 大小。

# 基本示例

// Server Component (.server.jsx)
import { db } from './database';

export default async function Page({ id }) {
  const post = await db.posts.get(id);
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

# 优势

🚀 零 bundle 大小：服务器组件不会增加客户端 bundle
💾 直接数据库访问：可以直接查询数据库
🔒 敏感逻辑安全：敏感逻辑可以在服务器上处理

# 3. Server Actions

Server Actions 允许直接从客户端组件调用服务器端函数。

# 基本用法

// actions.js
'use server';

export async function addToCart(productId, quantity) {
  await db.cart.add(productId, quantity);
  return { success: true };
}

// Component.jsx
'use client';
import { addToCart } from './actions';

function AddToCartButton({ productId }) {
  return (
    <button onClick={() => addToCart(productId, 1)}>
      Add to Cart
    </button>
  );
}

# 特性

✨ 类型安全：自动推断参数和返回类型
🔄 渐进式增强：即使 JS 加载失败也能工作
📊 自动重验证：数据变更后自动重验证相关数据

# 4. Ref as Prop

React 19 允许将 ref 作为普通 prop 传递给组件。

# 以前的方式（需转发 ref）

// 以前需要使用 forwardRef
const FancyButton = forwardRef((props, ref) => (
  <button ref={ref} className="fancy">
    {props.children}
  </button>
));

# React 19 新方式

// 直接接收 ref 作为 prop
function FancyButton({ ref, children }) {
  return <button ref={ref} className="fancy">{children}</button>;
}

// 使用
<FancyButton ref={buttonRef}>Click me</FancyButton>

# 优势

📦 简化代码：不再需要 forwardRef
🎯 明确意图：ref 作为显式 prop，意图更清晰
🔧 灵活性：可以在组件内部决定如何使用 ref

# 5. Actions API

新的 Actions API 简化了表单处理和数据变更。

# 基本用法

import { useActionState } from 'react';

async function addToCart(prevState, formData) {
  const productId = formData.get('productId');
  const quantity = formData.get('quantity');
  
  try {
    await addToCart(productId, quantity);
    return { success: true, message: '添加成功' };
  } catch (error) {
    return { success: false, message: '添加失败' };
  }
}

function AddToCartForm() {
  const [state, action, isPending] = useActionState(addToCart, null);
  
  return (
    <form action={action}>
      <input type="text" name="productId" />
      <input type="number" name="quantity" />
      <button disabled={isPending}>
        {isPending ? '添加中...' : '添加'}
      </button>
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

# 6. Suspense 改进

React 19 对 Suspense 进行了重大改进，使其更加强大和可靠。

# 流式渲染

import { Suspense } from 'react';
import { Post } from './Post';

<PostPage>
  <Suspense fallback={<Skeleton />}>
    <Post id={postId} />
  </Suspense>
</PostPage>

# 改进点

🎯 更精确的边界：Suspense 边界更精确
⚡ 更快的恢复：组件准备好后更快恢复渲染
🦋 更好的错误处理：改进的错误边界支持

# 7. 编译器优化

React 19 编译器进行了重大升级，自动优化更多场景。

# 自动 memoization

// 以前需要手动 memo
const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
  // 复杂计算
});

// React 19 编译器自动优化
function ExpensiveComponent({ data }) {
  // 复杂计算 - 编译器自动跳过不必要的重新渲染
}

# 优化范围

📊 自动记忆：自动识别并记忆纯组件
🔍 依赖追踪：精确追踪状态变化
⚡ 死代码消除：移除未使用的代码

# 8. use hook 详解

深入了解 use hook 的高级用法。

# 读取 Promise

function UserProfile({ userPromise }) {
  const user = use(userPromise);
  
  if (!user) {
    return <div>加载中...</div>;
  }
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
    </div>
  );
}

// 使用
<UserProfile userPromise={fetchUser(userId)} />

# 读取 Context

const ThemeContext = createContext(null);

function ThemedContent() {
  const theme = use(ThemeContext);
  return <div className={theme}>主题内容</div>;
}

# 错误处理

function AsyncContent({ promise }) {
  try {
    const data = use(promise);
    return <div>{data}</div>;
  } catch (error) {
    return <ErrorBoundary error={error} />;
  }
}

# 📚 总结

React 19 为开发者带来了许多强大的新特性：

特性	作用
use hook	更灵活的资源读取方式
Server Components	减少 bundle 大小
Server Actions	简化服务器通信
Ref as Prop	简化 ref 使用
Actions API	更好的表单处理
Suspense 改进	更好的用户体验
编译器优化	自动性能优化

# 升级建议

✅ 逐步升级：从新项目开始使用 React 19
📖 阅读文档：详细了解每个新特性
🧪 充分测试：确保现有代码兼容
🔄 渐进式采用：选择适合团队的新特性

# 参考资源

💡 提示：React 19 向下兼容大多数 React 18 代码，升级相对平滑。建议在生产环境使用前充分测试。