React 19新增的Action和表单相关API

宋一玮

你好，我是宋一玮，好久不见，欢迎回到 React 应用开发的学习。
专栏完结到现在，已经过去了两年时间。这两年里，前端开发技术仍然在不断发展、推陈出新，技术社区也非常活跃。尽管市面上涌现出了不少新的前端框架、前端库，React 仍然是众多前端技术中的佼佼者，在市场上占据着主要地位。在这两年间，React 有没有什么变化呢？
2024 年 12 月 5 日，React 正式发布了新版本 React 19，这是距离上一个大版本（React 18）发布两年半以来最大的一次更新。React 19 加入了新的 API 和 Hooks，改进了不少已有的 API，也进一步增强了服务器端渲染的能力。我将用 3 节加餐来介绍 React 19 的主要新内容：
React 19 的新概念 action，以及与表单处理相关的新 API。
React 19 的新use API、ref 的改进，以及 JSX 新支持的 HTML 标签。
React 19 在服务器端渲染领域的新功能：服务器组件和服务器 action。
在介绍这些新内容的同时，我也会补充相关的背景知识，确保新内容能平滑地融入整个专栏的知识体系中。除了上面这些，React 19 还包含一些额外的新 API 和部分既有 API 在参数细节上的改进，以及整体可调试性的增强，这些知识较为零散，你可以参考官方文档，随用随查即可，这次加餐中不再赘述。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
法语
德语
日语
韩语
俄语
西班牙语
解释
总结

1. React 19引入了新的API和Hooks，改进了已有的API，增强了服务器端渲染的能力。 2. React 19的新概念action和与表单处理相关的新API，包括`useActionState`、`useFormStatus`和`useOptimistic`。 3. React 18引入了transition概念，用于定义非关键的state更新，以提高渲染效率。 4. React 19中的transition可以是异步函数，扩展了transition的使用场景，提升组件性能，避免竞争条件问题，自动维护待定状态。 5. 新Hook：`useFormStatus` 可以返回最近的表单提交的状态信息，用于获取transition的待定状态。 6. 新Hook：`useActionState` 用于处理表单提交后的服务器返回值，创建一个增强版的action。 7. 新Hook：`useOptimistic` 用于乐观更新组件的state，实现更友好的用户体验。 8. 下一节将介绍React 19的新API `use` 的两种用法、`ref` 和`forwardRef` 的变化，以及一些新支持的HTML标签。 9. 思考题：可以举例说明哪些交互是区别于transition的关键交互，以及如何绕开表单自动重置的特性限制。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《现代 React Web 开发实战》，新⼈⾸单¥59

立即购买

登录后留言

精选留言

由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。

收起评论