SuperAPI AI 工具集

react-hook-form

前端与建站

查看项目

更新于 10-16 09:28

技能介绍

用途:面向 React Hook Form 应用的性能优化指南,包含 41 条规则、8 个类别,按影响程度排序,可用于表单开发、自动化重构与代码生成。

适用时机:编写新表单、配置 useForm 选项(mode、defaultValues、validation)、用 watch/useWatch 订阅表单值、集成受控 UI 组件(MUI、shadcn、Ant Design)、用 useFieldArray 管理动态字段数组、审查表单性能问题。

规则类别与优先级:1 表单配置(CRITICAL,前缀 formcfg-);2 字段订阅(CRITICAL,sub-);3 受控组件(HIGH,ctrl-);4 校验模式(HIGH,valid-);5 字段数组(MEDIUM-HIGH,array-);6 状态管理(MEDIUM,formstate-);7 集成模式(MEDIUM,integ-);8 高级模式(LOW,adv-)。

要点示例:用 onSubmit 模式、reValidateMode 设为 onBlur、始终提供 defaultValues、异步 defaultValues 处理服务端数据、shouldUnregister 提升动态表单内存效率;用 useWatch 替代 watch 实现隔离重渲染、只订阅特定字段、避免在 render 中调用 watch;用 useController 隔离重渲染、避免重复注册、正确接线 Controller 字段属性;schema 定义在组件外以缓存 resolver、用 schema 工厂处理动态校验、用 delayError 防抖错误显示;useFieldArray 用 field.id 作 key、提供完整默认对象、每个字段名单一实例、虚拟化时用 FormProvider;解构 formState 属性、用 useFormState 隔离订阅、用 getFieldState 访问单字段状态;shadcn 组件校验导入来源、Select 用 onValueChange 接线、MUI 用 Controller、在 Controller 层做值转换;FormProvider 子元素用 React.memo 包裹、生产环境与性能测试时禁用 DevTools、创建含 QueryClient 与 AuthProvider 的测试包装器。

使用方式:阅读 references/{prefix}-{slug}.md 参考文件获取详细说明与代码示例;完整指南见 AGENTS.md。相关技能:Zod resolver 见 zod 技能,React 19 server actions 见 react-19 技能,UI/UX 表单设计见 frontend-design 技能。

限制:资料未提供安装命令、收费、价格、平台与效果数据,暂未提供。