用途:这是面向 React Hook Form 应用的性能优化实践指南,包含 8 个类别、41 条规则,按影响优先级排列,用于指导表单开发、自动化重构与代码生成。适用时机包括:使用 React Hook Form 编写新表单、配置 useForm 选项(mode、defaultValues、validation)、用 watch/useWatch 订阅表单值、集成受控 UI 组件(MUI、shadcn、Ant Design)、用 useFieldArray 管理动态字段数组,以及审查表单性能问题。
规则类别与优先级:1)表单配置(formcfg-,CRITICAL);2)字段订阅(sub-,CRITICAL);3)受控组件(ctrl-,HIGH);4)校验模式(valid-,HIGH);5)字段数组(array-,MEDIUM-HIGH);6)状态管理(formstate-,MEDIUM);7)集成模式(integ-,MEDIUM);8)高级模式(adv-,LOW)。
代表性规则:配置方面用 onSubmit 模式、reValidateMode 设为 onBlur、始终提供 defaultValues、异步 defaultValues、按需 shouldUnregister;订阅方面优先 useWatch 以获得隔离重渲染、只监听具体字段、避免在渲染中调用 watch()、为 useWatch 提供 defaultValue;受控组件用 useController 隔离重渲染并避免重复注册;校验方面在组件外定义 schema 以缓存 resolver、用 schema factory 处理动态校验、复杂规则优先用 resolver;字段数组用 field.id 作为 key、为操作提供完整默认对象;状态管理在渲染前解构 formState、用 useFormState 隔离订阅;集成方面注意 shadcn Form 的导入来源及 Select 的 onValueChange 接线、MUI 用 Controller;高级模式包括用 React.memo 包裹 FormProvider 子节点、生产环境禁用 DevTools、为测试创建含 QueryClient 和 AuthProvider 的 wrapper。
使用方式:可查阅各参考文件获取详细说明与代码示例,规则位于 references/{prefix}-{slug}.md;完整指南见 AGENTS.md。相关技能:Zod resolver 见 zod 技能,React 19 server actions 见 react-19 技能,表单 UI/UX 设计见 frontend-design 技能。限制:以上为规则与方法型指导,未提供具体版本兼容范围、收费信息或效果数据。