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()); // 直接挂载 Promisereturn <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 支持)。