SuperAPI AI 工具集

react-syntax-components

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:在创建 React 组件、用 TypeScript 标注 props、转发 ref 或实现组件组合模式时提供规范指引,避免常见写法错误。

主要能力:给出函数组件类型标注模式(Props 接口、解构 props、泛型组件、默认值);组件 API 速查(React.memo、forwardRef、React.lazy、createPortal、useImperativeHandle 在 React 18 与 19 的差异);组件模式选择决策树;children 类型(React.ReactNode、PropsWithChildren);memo 与自定义比较;ref 转发(React 19 用 ref 作为普通 prop,React 18 需 forwardRef);useImperativeHandle 自定义 ref API;React 19 ref 清理函数;React.lazy 代码分割与 Suspense;createPortal 渲染到 DOM 树外;组合模式(复合组件、render props、HOC)。

关键约束:新代码一律用函数组件与 Hook,不用类组件;组件定义在模块作用域,不在组件内定义组件;Hook 只在顶层调用;props 用 TypeScript 接口并标 readonly;children 用 React.ReactNode;lazy 组件须在模块顶层声明并用 Suspense 包裹;memo 需父级用 useCallback 稳定回调;React 19 中 forwardRef 已废弃,改用 ref prop。

适用场景:React 组件库与业务组件开发、TypeScript 类型设计、性能优化与代码分割、模态框与浮层实现。

限制:资料未提供安装命令、版本要求、收费与平台信息;部分模式细节指向 references 目录文件,正文未展开。