SuperAPI AI 工具集

react

前端与建站

查看项目

更新于 10-15 20:09

技能介绍

用途:在编写或修改 React 代码时,按项目实际 React 版本选择正确 API,避免混用版本或凭记忆写不存在的能力。适用于编辑 .jsx / .tsx、React 组件、Hooks,以及涉及 react / react-dom 的场景。默认函数组件 + Hooks;路由、数据请求、CSS、状态库、构建工具跟随项目,不指定 Next、Remix 或 Vite。

主要能力与用法:先读取已安装 react 版本(node_modules/react/package.json 的 version 或 lockfile),不能只看 package.json 的 ^ 范围;react 与 react-dom 必须同一 minor。取 minor(如 19.2.8 → 19.2),按对应文件写代码:19.0 用 references/19.0.md,19.1 用 references/19.1.md,19.2 用 references/19.2.md。未列出的更新 minor,以已覆盖的最高 minor 为底再查官方 blog / changelog;更旧版本不使用本技能的新 API,React 18 不套用 19 API。

实践要点:Effect 只用于同步外部系统,能在渲染中计算的不放进 useEffect + setState;事件用事件处理函数或 Action;重置子树用稳定 key;列表选中项存 selectedId 渲染时查找;拉数据跟项目已有框架或库。状态能算就不存,表单优先非受控 + form action,变更服务端数据用 Action。use() 读 Promise 或 Context,Promise 须来自框架、cache 或父组件缓存的资源,禁止在 Client 组件 render 中 use(fetch())。函数组件 ref 当普通 prop,不再包 forwardRef;Context 直接当 provider。组件单文件约 500 行以内,列表 key 用稳定 id,文档元数据可直接书写由 React 提升到 head;"use server" 仅标记 Server Action,无 RSC 支持则不写。

限制:资料未提供具体安装命令、收费、价格或更多平台与效果信息;未覆盖版本的 API 需查官方 changelog,本技能仅描述上述版本实践。