SuperAPI AI 工具集

react-19

前端与建站

查看项目

更新于 10-16 00:30

技能介绍

用途:该技能聚焦 React 19 相对 React 18 的变化,而非完整 React 参考,用于在编写 React 19 组件与 Hooks(.tsx)时查阅新写法与迁移要点。

主要能力:

  1. 范式转变:从默认客户端渲染转向服务端优先(RSC 默认)、由 React Compiler 自动记忆化、用异步 Server Components 取数、用 Form Actions 处理表单、用 Suspense 边界替代加载布尔值。
  2. 新写法:ref 作为普通 prop(forwardRef 将被弃用);ref 回调可返回清理函数;Context 可直接作为 Provider 使用(<Context value={}>)。
  3. 新 Hooks:useActionState、useOptimistic、use()(可读取 Promise、可在条件语句后读取 Context)、useFormStatus(来自 react-dom,需在 form 内使用)。
  4. 表单 Actions:函数可直接传给 form action,支持按钮级 formAction 与 requestFormReset 手动重置。
  5. 文档元数据:title、meta、link 可在任意组件中声明并自动提升到 head;支持资源预加载 prefetchDNS、preconnect、preload、preinit 与带 precedence 的样式表。
  6. 自定义元素:完整支持 Web Components,属性与特性按元素实例区分赋值。
  7. 水合改进:单一错误加 diff 提示,兼容第三方脚本注入内容。
  8. 破坏性变更:移除 ReactDOM.render、hydrate、unmountComponentAtNode、findDOMNode、propTypes、函数 defaultProps、字符串 ref、旧版 Context、createFactory、react-dom/test-utils 等,并给出迁移方式。
  9. TypeScript 变更:useRef 必须传参、ref 回调不得隐式返回值、ReactElement props 变为 unknown、JSX 需显式导入。
  10. 19.2+ 特性:Activity 组件(隐藏时保留状态)、useEffectEvent(提取非响应式 Effect 逻辑)。

使用方式:作为技能文档在编码时参考;迁移可运行 npx codemod@latest react/19/migration-recipe 等 codemod,TypeScript 类型可用 npx types-react-codemod@latest preset-19 ./src。建议先升级到 React 18.3 查看弃用警告,再升级到 19。

适用场景:React 18 升级到 19 的迁移、编写使用新 Hooks 与 Actions 的组件、处理 RSC 与 Suspense 流式渲染、适配 TypeScript 类型变化。

限制:资料未提供该技能的安装方式、收费、平台与效果信息;内容为变更要点汇总,非完整 API 参考,具体细节需查阅其 references 目录下的文档。