React Hook Form 入门指南用非受控 Hooks 实现高性能表单校验德语文档精读【免费下载链接】react-hook-form React Hooks for form state management and validation (Web React Native)项目地址: https://gitcode.com/gh_mirrors/re/react-hook-form本文以仓库内 docs/README.de-DE.mdReact Hook Form 官方德语版 README为骨架结合当前仓库 src、examples 与 app 中的源码与示例系统讲解 React Hook Form 的核心特性、安装方式、快速上手流程与底层校验原理。读完本文你将掌握useForm/register/handleSubmit的完整用法、各类校验规则required、pattern、min/max、minLength/maxLength、validate的写法与触发时机以及这些能力在仓库源码中的实际实现位置可直接照搬示例开始开发自己的表单。一、React Hook Form 是什么React Hook Form 是面向 ReactWeb 与 React Native的表单状态管理与校验库其德语 README 将其定位为 Schnellladende, flexible und erweiterbare Formulare mit benutzerfreundlicher Eingabeprüfung——即快速加载、灵活且可扩展、并带有友好输入校验的表单解决方案。当前仓库版本为 package.json 中标注的7.88.0通过 Hooks 的方式核心入口见 src/useForm.ts把表单状态、注册、校验与提交能力全部封装进useForm这一个 Hook 中。与把每个输入框都变成受控组件、每次按键都触发重渲染的典型方案不同React Hook Form 采用非受控组件 ref 注册的设计表单状态由库内部管理React 组件本身几乎不因输入而重渲染这正是其高性能的来源。二、安装德语 README 给出的安装命令只有一条适用于 npm 生态npm install react-hook-form当前仓库使用 pnpm 作为包管理器见 pnpm-workspace.yaml因此也可等价地使用pnpm add react-hook-form从仓库 package.json 可以看到peerDependencies为react: ^16.8.0 || ^17 || ^18 || ^19即 React 16.8 及以上Hooks 可用均兼容当前仓库开发环境使用 React 19零运行时依赖devDependencies 仅用于构建与测试这也呼应了 README 中Wenig Speicherbedarf ohne Abhängigkeiten无依赖、占用体积小的特性提供 ESMdist/index.esm.mjs、CJSdist/index.cjs.js与 UMDdist/index.umd.js多种产物并配有react-server产物见 package.json 的exports字段浏览器端、Node 端与 React Server Components 场景均可使用。三、核心特性逐项解读德语 README 的 Eigenschaften特性列表是理解这个库设计目标的最佳入口。下面逐项展开并给出仓库内的源码佐证。3.1 面向性能与开发者体验而设计Mit Hinblick auf Leistung und Entwicklererfahrung geschriebenuseForm返回的方法与状态在组件生命周期内保持引用稳定配合非受控 订阅模型输入变化不会导致表单组件重渲染。从 src/useForm.ts 可以看到useForm通过React.useRef持有唯一的_formControl并将formState用React.useMemo(() getProxyFormState(formState, control), [control, formState])代理src/logic/getProxyFormState.ts只在真正被订阅的状态片段变化时才触发更新。仓库中的性能测试 src/tests/performance.test.tsx 对渲染次数等指标做了回归守护。3.2 接受非受控输入校验Akzeptiert unkontrollierter Eingabeprüfung这是 React Hook Form 的基石通过register返回的ref把 DOM 节点直接登记到库内部_fields表值的变化由浏览器原生管理库在校验与提交时从 ref 读取值。register返回onChange、onBlur、name、ref等属性类型定义见 src/types/form.ts 的UseFormRegisterReturn可直接展开到input/select/textarea上。3.3 与 UI 组件库无缝集成Einfache integration mit Benutzeroberflaechen Bibliotheken对于需要自定义渲染如日期选择器、下拉框、富文本编辑器等无法直接挂 ref 的第三方组件React Hook Form 提供了Controller包装组件src/controller.tsx与底层 HookuseControllersrc/useController.ts。Controller通过 render prop 把field、fieldState、formState传给自定义组件import { Controller, useForm } from react-hook-form; function App() { const { control, handleSubmit } useForm(); return ( form onSubmit{handleSubmit((data) console.log(data))} Controller control{control} namemySelect render{({ field }) ( select {...field} option valueaA/option option valuebB/option /select )} / input typesubmit / /form ); }3.4 体积小、零依赖Wenig Speicherbedarf ohne Abhängigkeiten如第二节所述仓库 package.json 的 devDependencies 仅服务于构建与测试链路运行时没有任何第三方依赖bundlewatch配置同文件将 CJS 产物体积上限约束在 15 kB 以内作为 CI 守护项防止体积膨胀。3.5 遵循 HTML 标准的输入校验Entspricht HTML Standart für EingabeprüfungReact Hook Form 支持浏览器原生的校验语义required、min、max、minLength、maxLength、pattern等常量定义见 src/constants.ts并可通过useForm({ shouldUseNativeValidation: true })开启原生校验 UI使用setCustomValidityreportValidity实现见 src/logic/validateField.ts。同时register返回的min/max/pattern/required等原生属性会直接透传到 DOM 上即便不开启该选项浏览器自身的校验提示也依然可用。3.6 兼容 React NativeKompatibel mit React Native由于核心逻辑src/logic/createFormControl.ts只依赖抽象的值与注册表不直接耦合 DOM因此同样适用于 React Native 环境。仓库中还提供了 React Server 产物index.react-server.ts与 package.json 的react-serverexport服务端渲染场景也被覆盖。3.7 支持 Schema 校验库与自定义校验Unterstützt Yup, Joi, Superstruct oder frei programierbarReact Hook Form 不绑定任何特定校验库通过resolver选项对接第三方 Schema类型定义见 src/types/resolvers.tsYup、Joi、Superstruct、zod 等均可作为 resolver 接入也支持完全不依赖外部库用register选项里的validate函数编写任意自定义校验逻辑见下文第五节的validate示例。仓库的 resolver 相关测试见 src/tests/useForm/resolver.test.tsx。3.8 表单构建器Erstelle Formulare schnell mit dem Formular Erseller官方提供了可视化表单构建器react-hook-form.com/form-builder用于拖拽生成表单代码属于配套的在线工具此处仅作了解即可。四、快速开始第一个表单德语 README 的 Schneller Einstieg快速开始给出了最经典的入门代码本文完整继承并补充注释与进阶用法import React from react; import { useForm } from react-hook-form; function App() { // 初始化 Hookregister 注册字段handleSubmit 处理提交errors 存放校验错误 const { register, handleSubmit, errors } useForm(); const onSubmit (data) { console.log(data); }; return ( form onSubmit{handleSubmit(onSubmit)} input namefirstname ref{register} / {/* 注册一个输入框 */} input namelastname ref{register({ required: true })} / {errors.lastname Last name is required.} input nameage ref{register({ pattern: /\d/ })} / {errors.age Please enter number for age.} input typesubmit / /form ); }提示上面是文档撰写时代的经典写法。当前 v7 版本更推荐使用展开运算符{...register(firstname)}等价且更符合现代 React 风格errors也已收敛到formState之下即const { register, handleSubmit, formState: { errors } } useForm()。两种写法在当前版本中均可用src/useForm.ts 的 JSDoc 示例即采用formState.errors写法。对应现代 v7 的完整示例可参考 examples/V7/basic.tsx 与 app/src/basic.tsx后者覆盖了几乎全部校验规则含嵌套字段nestItem.nest1、数组字段arrayItem[0].test1、日期min/max、多选、radio/checkbox 等并配有对应的端到端测试 e2e/basic.spec.ts。五、校验规则详解与源码实现register的第二参数字段选项支持以下规则常量见 src/constants.ts 的INPUT_VALIDATION_RULES实际校验逻辑集中在 src/logic/validateField.ts规则说明触发示例required必填可传布尔值或字符串字符串作为错误消息register(lastName, { required: 姓氏必填 })min/max数值或日期的下限/上限支持数值与日期字符串比较register(age, { min: 18, max: 60 })minLength/maxLength字符串长度对 field array 也支持数组长度register(name, { minLength: 2 })pattern正则匹配可用字符串形式书写正则register(age, { pattern: /\d/ })validate自定义函数可同步可异步也可传对象实现多规则register(field, { validate: v v test })关键实现细节src/logic/validateField.ts空值短路required校验对空字符串、空数组、null/undefined均判为不通过第 76-113 行对 checkbox 使用getCheckboxValue、对 radio 使用getRadioValue判断选中态min/max 的智能比较当输入为数字或日期时会区分valueAsNumber/valueAsDate甚至对typetime、typeweek做了专门的日期时间换算第 132-190 行validate 支持异步validate可以是返回 Promise 的函数await validate(inputValue, formValues)第 238 行因此接口校验等异步场景无需额外封装对象形式validate: { isAdult: v ..., isEmail: v ... }支持一条字段上挂多条校验规则错误对象结构每条错误包含type规则名、message消息与ref对应 DOM 节点若开启criteriaMode: all还会通过appendErrors附带所有未通过规则的完整清单。5.1 校验触发时机mode 与 reValidateModeuseForm支持通过mode配置首次校验时机通过reValidateMode配置提交后的复验时机常量见 src/constants.ts默认值见 src/logic/createFormControl.ts选项可选值说明modeonSubmit默认、onBlur、onChange、onTouched、all首次触发校验的时机reValidateModeonChange默认、onBlur、onSubmit提交后再次校验的时机onTouched表示字段被触碰blur后才校验all表示 blur 与 change 都校验。这些配置在 src/useForm.ts 中通过control._options.mode/reValidateMode同步到内部控制对象。5.2 错误显示与重置formState.errors的对象结构与字段路径一一对应支持深层字段如errors.nestItem?.nest1与数组字段如errors.arrayItem?.[0]?.test1见 app/src/basic.tsx。配合reset()可一键清空表单值与错误状态reset()支持传入keepValues、keepErrors、keepDirty等选项类型见 src/types/form.ts 的KeepStateOptions。六、底层原理useForm 与 createFormControl当你调用useForm()时src/useForm.ts实际发生的事可以概括为创建表单控制对象createFormControl(props)src/logic/createFormControl.ts构建内部状态机包括默认表单状态DEFAULT_FORM_STATEsubmitCount、isDirty、isValid、isSubmitting等见该文件第 131-143 行、字段注册表_fields、错误表、校验模式解析getValidationModes与订阅发布器_subjects基于 src/utils/createSubject.ts 的轻量 Subject 实现。代理 formState通过getProxyFormState生成代理只有被读取/订阅的状态片段才会触发重渲染这是性能的关键src/logic/getProxyFormState.ts。订阅与同步useIsomorphicLayoutEffect中订阅内部状态变化并同步到组件useStateuseResyncOnReconnectsrc/useResyncOnReconnect.ts用于在组件重新连接如 React Fast Refresh后恢复快照。渲染无关副作用props.values变化时自动重置、props.disabled变化时禁用整个表单_disableForm、shouldUnregister控制卸载字段是否保留值等均以独立useEffect处理。handleSubmit的职责是先执行全量校验通过则调用你传入的成功回调并返回表单值不通过则调用可选的失败回调onInvalid并将焦点定位到第一个错误字段由shouldFocusError控制默认开启。这一行为在 e2e/basic.spec.ts 中有端到端验证包括onInvalid回调被调用的次数断言。七、进一步学习与仓库导航德语 README 还附带了完整的学习资源列表结合当前仓库推荐按以下顺序深入版本差异与迁移docs/README.V6.mdV6 英文版、docs/README.V7.zh-CN.mdV7 简体中文版多语言文档docs/README.zh-CN.md、docs/README.ja-JP.md、docs/README.ko-KR.md、docs/README.fr-FR.md、docs/README.es-ES.md、docs/README.ru-RU.md、docs/README.it-IT.md、docs/README.pt-BR.md、docs/README.tr-TR.md、docs/README.zh-TW.md可运行示例examples/V7V7 全量示例含 examples/V7/validationSchema.tsx 的 Schema 校验示例、examples/V7/formProvider.tsx 的跨组件共享表单示例、examples/V6V6 版本演示应用与端到端测试app/src每个示例页面对应一个组件、e2ePlaywright 端到端测试playwright.config.ts源码核心src/useForm.ts对外入口 Hook、src/logic/createFormControl.ts内部状态机、src/logic/validateField.ts校验引擎、src/controller.tsx 与 src/useController.ts受控组件适配、src/types/form.ts全部类型定义单元测试src/tests/useForm覆盖register、handleSubmit、reset、setValue、watch、trigger等全部 APIAPI 报告reports/api-extractor.api.md由 api-extractor 生成的完整公开 API 清单本地运行演示应用在仓库根目录执行pnpm install pnpm start对应 package.json 的start脚本先构建 ESM 产物再安装并启动app目录下的 Vite 演示站。八、社区与贡献德语 README 的结尾部分介绍了项目的赞助与贡献渠道。如果你希望参与贡献请先阅读 CONTRIBUTING.md 与 CODE_OF_CONDUCT.md项目采用 MIT 许可见 LICENSECHANGELOG.md记录了各版本的功能演进。结语本文以 docs/README.de-DE.md 为纲从特性、安装、快速上手到源码原理完整覆盖了 React Hook Form 的核心使用路径。关键收获可以总结为三条非受控注册registerhandleSubmit即可完成 80% 的表单需求天然避免重渲染开销规则即声明required/pattern/min/max/minLength/maxLength/validate全部在register选项中以声明式书写validate还支持异步与多规则对象按需深入需要受控组件时用Controller需要第三方 Schema 时用resolver需要跨组件共享时用useFormContext/FormProvider每个方向在当前仓库的 examples 与 src/tests中都有可直接查阅的实现与测试。【免费下载链接】react-hook-form React Hooks for form state management and validation (Web React Native)项目地址: https://gitcode.com/gh_mirrors/re/react-hook-form创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
React Hook Form 入门指南：用非受控 Hooks 实现高性能表单校验（德语文档精读）
React Hook Form 入门指南用非受控 Hooks 实现高性能表单校验德语文档精读【免费下载链接】react-hook-form React Hooks for form state management and validation (Web React Native)项目地址: https://gitcode.com/gh_mirrors/re/react-hook-form本文以仓库内 docs/README.de-DE.mdReact Hook Form 官方德语版 README为骨架结合当前仓库 src、examples 与 app 中的源码与示例系统讲解 React Hook Form 的核心特性、安装方式、快速上手流程与底层校验原理。读完本文你将掌握useForm/register/handleSubmit的完整用法、各类校验规则required、pattern、min/max、minLength/maxLength、validate的写法与触发时机以及这些能力在仓库源码中的实际实现位置可直接照搬示例开始开发自己的表单。一、React Hook Form 是什么React Hook Form 是面向 ReactWeb 与 React Native的表单状态管理与校验库其德语 README 将其定位为 Schnellladende, flexible und erweiterbare Formulare mit benutzerfreundlicher Eingabeprüfung——即快速加载、灵活且可扩展、并带有友好输入校验的表单解决方案。当前仓库版本为 package.json 中标注的7.88.0通过 Hooks 的方式核心入口见 src/useForm.ts把表单状态、注册、校验与提交能力全部封装进useForm这一个 Hook 中。与把每个输入框都变成受控组件、每次按键都触发重渲染的典型方案不同React Hook Form 采用非受控组件 ref 注册的设计表单状态由库内部管理React 组件本身几乎不因输入而重渲染这正是其高性能的来源。二、安装德语 README 给出的安装命令只有一条适用于 npm 生态npm install react-hook-form当前仓库使用 pnpm 作为包管理器见 pnpm-workspace.yaml因此也可等价地使用pnpm add react-hook-form从仓库 package.json 可以看到peerDependencies为react: ^16.8.0 || ^17 || ^18 || ^19即 React 16.8 及以上Hooks 可用均兼容当前仓库开发环境使用 React 19零运行时依赖devDependencies 仅用于构建与测试这也呼应了 README 中Wenig Speicherbedarf ohne Abhängigkeiten无依赖、占用体积小的特性提供 ESMdist/index.esm.mjs、CJSdist/index.cjs.js与 UMDdist/index.umd.js多种产物并配有react-server产物见 package.json 的exports字段浏览器端、Node 端与 React Server Components 场景均可使用。三、核心特性逐项解读德语 README 的 Eigenschaften特性列表是理解这个库设计目标的最佳入口。下面逐项展开并给出仓库内的源码佐证。3.1 面向性能与开发者体验而设计Mit Hinblick auf Leistung und Entwicklererfahrung geschriebenuseForm返回的方法与状态在组件生命周期内保持引用稳定配合非受控 订阅模型输入变化不会导致表单组件重渲染。从 src/useForm.ts 可以看到useForm通过React.useRef持有唯一的_formControl并将formState用React.useMemo(() getProxyFormState(formState, control), [control, formState])代理src/logic/getProxyFormState.ts只在真正被订阅的状态片段变化时才触发更新。仓库中的性能测试 src/tests/performance.test.tsx 对渲染次数等指标做了回归守护。3.2 接受非受控输入校验Akzeptiert unkontrollierter Eingabeprüfung这是 React Hook Form 的基石通过register返回的ref把 DOM 节点直接登记到库内部_fields表值的变化由浏览器原生管理库在校验与提交时从 ref 读取值。register返回onChange、onBlur、name、ref等属性类型定义见 src/types/form.ts 的UseFormRegisterReturn可直接展开到input/select/textarea上。3.3 与 UI 组件库无缝集成Einfache integration mit Benutzeroberflaechen Bibliotheken对于需要自定义渲染如日期选择器、下拉框、富文本编辑器等无法直接挂 ref 的第三方组件React Hook Form 提供了Controller包装组件src/controller.tsx与底层 HookuseControllersrc/useController.ts。Controller通过 render prop 把field、fieldState、formState传给自定义组件import { Controller, useForm } from react-hook-form; function App() { const { control, handleSubmit } useForm(); return ( form onSubmit{handleSubmit((data) console.log(data))} Controller control{control} namemySelect render{({ field }) ( select {...field} option valueaA/option option valuebB/option /select )} / input typesubmit / /form ); }3.4 体积小、零依赖Wenig Speicherbedarf ohne Abhängigkeiten如第二节所述仓库 package.json 的 devDependencies 仅服务于构建与测试链路运行时没有任何第三方依赖bundlewatch配置同文件将 CJS 产物体积上限约束在 15 kB 以内作为 CI 守护项防止体积膨胀。3.5 遵循 HTML 标准的输入校验Entspricht HTML Standart für EingabeprüfungReact Hook Form 支持浏览器原生的校验语义required、min、max、minLength、maxLength、pattern等常量定义见 src/constants.ts并可通过useForm({ shouldUseNativeValidation: true })开启原生校验 UI使用setCustomValidityreportValidity实现见 src/logic/validateField.ts。同时register返回的min/max/pattern/required等原生属性会直接透传到 DOM 上即便不开启该选项浏览器自身的校验提示也依然可用。3.6 兼容 React NativeKompatibel mit React Native由于核心逻辑src/logic/createFormControl.ts只依赖抽象的值与注册表不直接耦合 DOM因此同样适用于 React Native 环境。仓库中还提供了 React Server 产物index.react-server.ts与 package.json 的react-serverexport服务端渲染场景也被覆盖。3.7 支持 Schema 校验库与自定义校验Unterstützt Yup, Joi, Superstruct oder frei programierbarReact Hook Form 不绑定任何特定校验库通过resolver选项对接第三方 Schema类型定义见 src/types/resolvers.tsYup、Joi、Superstruct、zod 等均可作为 resolver 接入也支持完全不依赖外部库用register选项里的validate函数编写任意自定义校验逻辑见下文第五节的validate示例。仓库的 resolver 相关测试见 src/tests/useForm/resolver.test.tsx。3.8 表单构建器Erstelle Formulare schnell mit dem Formular Erseller官方提供了可视化表单构建器react-hook-form.com/form-builder用于拖拽生成表单代码属于配套的在线工具此处仅作了解即可。四、快速开始第一个表单德语 README 的 Schneller Einstieg快速开始给出了最经典的入门代码本文完整继承并补充注释与进阶用法import React from react; import { useForm } from react-hook-form; function App() { // 初始化 Hookregister 注册字段handleSubmit 处理提交errors 存放校验错误 const { register, handleSubmit, errors } useForm(); const onSubmit (data) { console.log(data); }; return ( form onSubmit{handleSubmit(onSubmit)} input namefirstname ref{register} / {/* 注册一个输入框 */} input namelastname ref{register({ required: true })} / {errors.lastname Last name is required.} input nameage ref{register({ pattern: /\d/ })} / {errors.age Please enter number for age.} input typesubmit / /form ); }提示上面是文档撰写时代的经典写法。当前 v7 版本更推荐使用展开运算符{...register(firstname)}等价且更符合现代 React 风格errors也已收敛到formState之下即const { register, handleSubmit, formState: { errors } } useForm()。两种写法在当前版本中均可用src/useForm.ts 的 JSDoc 示例即采用formState.errors写法。对应现代 v7 的完整示例可参考 examples/V7/basic.tsx 与 app/src/basic.tsx后者覆盖了几乎全部校验规则含嵌套字段nestItem.nest1、数组字段arrayItem[0].test1、日期min/max、多选、radio/checkbox 等并配有对应的端到端测试 e2e/basic.spec.ts。五、校验规则详解与源码实现register的第二参数字段选项支持以下规则常量见 src/constants.ts 的INPUT_VALIDATION_RULES实际校验逻辑集中在 src/logic/validateField.ts规则说明触发示例required必填可传布尔值或字符串字符串作为错误消息register(lastName, { required: 姓氏必填 })min/max数值或日期的下限/上限支持数值与日期字符串比较register(age, { min: 18, max: 60 })minLength/maxLength字符串长度对 field array 也支持数组长度register(name, { minLength: 2 })pattern正则匹配可用字符串形式书写正则register(age, { pattern: /\d/ })validate自定义函数可同步可异步也可传对象实现多规则register(field, { validate: v v test })关键实现细节src/logic/validateField.ts空值短路required校验对空字符串、空数组、null/undefined均判为不通过第 76-113 行对 checkbox 使用getCheckboxValue、对 radio 使用getRadioValue判断选中态min/max 的智能比较当输入为数字或日期时会区分valueAsNumber/valueAsDate甚至对typetime、typeweek做了专门的日期时间换算第 132-190 行validate 支持异步validate可以是返回 Promise 的函数await validate(inputValue, formValues)第 238 行因此接口校验等异步场景无需额外封装对象形式validate: { isAdult: v ..., isEmail: v ... }支持一条字段上挂多条校验规则错误对象结构每条错误包含type规则名、message消息与ref对应 DOM 节点若开启criteriaMode: all还会通过appendErrors附带所有未通过规则的完整清单。5.1 校验触发时机mode 与 reValidateModeuseForm支持通过mode配置首次校验时机通过reValidateMode配置提交后的复验时机常量见 src/constants.ts默认值见 src/logic/createFormControl.ts选项可选值说明modeonSubmit默认、onBlur、onChange、onTouched、all首次触发校验的时机reValidateModeonChange默认、onBlur、onSubmit提交后再次校验的时机onTouched表示字段被触碰blur后才校验all表示 blur 与 change 都校验。这些配置在 src/useForm.ts 中通过control._options.mode/reValidateMode同步到内部控制对象。5.2 错误显示与重置formState.errors的对象结构与字段路径一一对应支持深层字段如errors.nestItem?.nest1与数组字段如errors.arrayItem?.[0]?.test1见 app/src/basic.tsx。配合reset()可一键清空表单值与错误状态reset()支持传入keepValues、keepErrors、keepDirty等选项类型见 src/types/form.ts 的KeepStateOptions。六、底层原理useForm 与 createFormControl当你调用useForm()时src/useForm.ts实际发生的事可以概括为创建表单控制对象createFormControl(props)src/logic/createFormControl.ts构建内部状态机包括默认表单状态DEFAULT_FORM_STATEsubmitCount、isDirty、isValid、isSubmitting等见该文件第 131-143 行、字段注册表_fields、错误表、校验模式解析getValidationModes与订阅发布器_subjects基于 src/utils/createSubject.ts 的轻量 Subject 实现。代理 formState通过getProxyFormState生成代理只有被读取/订阅的状态片段才会触发重渲染这是性能的关键src/logic/getProxyFormState.ts。订阅与同步useIsomorphicLayoutEffect中订阅内部状态变化并同步到组件useStateuseResyncOnReconnectsrc/useResyncOnReconnect.ts用于在组件重新连接如 React Fast Refresh后恢复快照。渲染无关副作用props.values变化时自动重置、props.disabled变化时禁用整个表单_disableForm、shouldUnregister控制卸载字段是否保留值等均以独立useEffect处理。handleSubmit的职责是先执行全量校验通过则调用你传入的成功回调并返回表单值不通过则调用可选的失败回调onInvalid并将焦点定位到第一个错误字段由shouldFocusError控制默认开启。这一行为在 e2e/basic.spec.ts 中有端到端验证包括onInvalid回调被调用的次数断言。七、进一步学习与仓库导航德语 README 还附带了完整的学习资源列表结合当前仓库推荐按以下顺序深入版本差异与迁移docs/README.V6.mdV6 英文版、docs/README.V7.zh-CN.mdV7 简体中文版多语言文档docs/README.zh-CN.md、docs/README.ja-JP.md、docs/README.ko-KR.md、docs/README.fr-FR.md、docs/README.es-ES.md、docs/README.ru-RU.md、docs/README.it-IT.md、docs/README.pt-BR.md、docs/README.tr-TR.md、docs/README.zh-TW.md可运行示例examples/V7V7 全量示例含 examples/V7/validationSchema.tsx 的 Schema 校验示例、examples/V7/formProvider.tsx 的跨组件共享表单示例、examples/V6V6 版本演示应用与端到端测试app/src每个示例页面对应一个组件、e2ePlaywright 端到端测试playwright.config.ts源码核心src/useForm.ts对外入口 Hook、src/logic/createFormControl.ts内部状态机、src/logic/validateField.ts校验引擎、src/controller.tsx 与 src/useController.ts受控组件适配、src/types/form.ts全部类型定义单元测试src/tests/useForm覆盖register、handleSubmit、reset、setValue、watch、trigger等全部 APIAPI 报告reports/api-extractor.api.md由 api-extractor 生成的完整公开 API 清单本地运行演示应用在仓库根目录执行pnpm install pnpm start对应 package.json 的start脚本先构建 ESM 产物再安装并启动app目录下的 Vite 演示站。八、社区与贡献德语 README 的结尾部分介绍了项目的赞助与贡献渠道。如果你希望参与贡献请先阅读 CONTRIBUTING.md 与 CODE_OF_CONDUCT.md项目采用 MIT 许可见 LICENSECHANGELOG.md记录了各版本的功能演进。结语本文以 docs/README.de-DE.md 为纲从特性、安装、快速上手到源码原理完整覆盖了 React Hook Form 的核心使用路径。关键收获可以总结为三条非受控注册registerhandleSubmit即可完成 80% 的表单需求天然避免重渲染开销规则即声明required/pattern/min/max/minLength/maxLength/validate全部在register选项中以声明式书写validate还支持异步与多规则对象按需深入需要受控组件时用Controller需要第三方 Schema 时用resolver需要跨组件共享时用useFormContext/FormProvider每个方向在当前仓库的 examples 与 src/tests中都有可直接查阅的实现与测试。【免费下载链接】react-hook-form React Hooks for form state management and validation (Web React Native)项目地址: https://gitcode.com/gh_mirrors/re/react-hook-form创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
：提升决策支持的信息检索新方法)
