react19更新哪些东西

React 19（截至2025年中仍处于发布候选阶段）带来了一些重大更新和新特性。以下是React 19的主要更新内容整理，基于React团队在React官方博客和2024年React Conf上发布的信息：

---

✅ 1. 正式引入新特性：Actions（原"Use"提案）

背景：

React 19 引入了新语法机制，让服务器操作和异步数据变得更优雅，主要通过 use 和 actions 实现。

示例：

// actions.ts
'use server';

export async function submitForm(data: FormData) {
  // 服务端代码
  await db.save(data);
}

// Client component
'use client';
import { submitForm } from './actions';

function MyForm() {
  const formAction = useFormState(submitForm);

  return (
    <form action={formAction}>
      <input name="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

---

✅ 2. 正式发布 useOptimistic Hook

功能：

用于构建"乐观更新"，比如你点击"点赞"按钮后，立即看到UI变化，而后端数据还在同步中。

const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (currentLikes, newLike) => {
  return currentLikes + 1;
});

function onClick() {
  addOptimisticLike();
  likeOnServer(); // 异步更新服务器
}

---

✅ 3. Transition 扩展支持：支持表单、导航等

React 19 的 startTransition 不再局限于 setState，它现在也支持：

• 表单提交
• 页面导航
• 含异步任务的更新（配合 actions）

---

✅ 4. 更强大的 use 支持：

你现在可以直接在客户端组件中使用 await 的值（例如 Suspense 或数据请求结果）：

function MyComponent() {
  const data = use(fetchData()); // 直接挂载 Promise

  return <div>{data.title}</div>;
}

---

✅ 5. 新的 React DOM 事件系统：

React 19 更新了事件处理系统（在内部通过 createEventHandle 支持更精细的事件绑定），事件处理的性能更高，冒泡机制更灵活。

---

✅ 6. 改进 Suspense 行为

特点：

• 更好支持并发渲染（concurrent rendering）
• 支持 use() 的 Suspense 触发
• 服务端和客户端 hydrate 更稳定

---

✅ 7. 性能优化

React 19 带来多个底层性能提升，尤其是：

• 更快的 hydration（服务器端渲染到客户端激活）
• 更精细的更新粒度（避免不必要的重渲染）
• 改进内存管理，特别是在大型组件树中

---

✅ 8. React Server Components（RSC）更成熟

虽然不是React 19专属，但 RSC 与 React 19 的新特性整合得更紧密了。你可以将组件声明为 use server，仅在服务端执行，极大提升初始加载性能。

---

✅ 9. React DevTools 改进

React 19 对 DevTools 做了适配，支持：

• 调试 useFormState, useOptimistic, use 等 Hook
• 显示 Suspense 状态
• 识别 Server Actions 触发路径

---

✅ 10. 更强的TypeScript类型支持

React 19 更新了类型定义，增强以下支持：

• JSX 属性的类型推断
• Hook 的参数/返回值类型
• 更好支持 StrictMode 下的泛型和递归组件

---

📦 额外补充：相关库更新

• react-dom@19
• react@19
• react-server-dom-webpack@latest
• next.js@14+ 与 React 19 紧密集成
• remix@2.x 也开始支持 React 19 的 server actions

---

🚧 React 19 并不是破坏性更新

不会影响已有的 React 18 应用，升级过程相对平滑。但若想使用新功能，推荐配合：

• 最新的 react-dom/client 创建 root
• 包裹在 StrictMode 和 Suspense 中使用异步逻辑

---

如果你正在开发一个新项目，并希望利用 React 19 的能力，可以使用：

npm install react@19 react-dom@19

或用 Next.js 14 开启 app router（已内置 React 19 支持）。

---