前端UI组件【免费下载链接】react-final-form High performance subscription-based form state management for React项目地址https://gitcode.com/gh_mirrors/re/react-final-form点击查看免费下载导读FormRenderProps是 React Final Form 中Form/组件传递给渲染函数render prop或渲染组件的全部属性的类型集合。本文围绕仓库中的 FormRenderProps 类型文档 展开结合 核心实现源码、类型定义 与仓库内示例完整讲解form、handleSubmit两大核心成员、FormState各字段的惰性注入机制以及subscription如何决定你究竟能拿到哪些渲染属性。读完本文你将能够正确书写Form/的渲染函数、理解handleSubmit的返回类型规律并掌握通过订阅裁剪渲染属性来优化性能的完整方案。FormRenderProps是什么FormRenderProps是Form/组件对外暴露的渲染协议。无论你使用children渲染函数、render渲染函数还是component渲染组件这三种方式收到的都是同一个FormRenderProps对象其类型签名如下见 src/types.tsexport interface FormRenderPropsFormValues Recordstring, any extends FormStateFormValues { handleSubmit: ( event?: SubmitEvent, ) PromiseRecordstring, any | undefined | undefined; form: FormApiFormValues; }也就是说FormRenderPropsFinal Form 的FormState表单完整状态form表单 API 实例handleSubmit提交处理函数三部分的并集。一个关键前提你收到的值由subscription决定FormRenderProps文档强调的第一件事是你在渲染函数里实际能读到的值取决于你通过subscriptionprop 订阅了FormState中的哪些字段。subscription是一个{ [string]: boolean }对象未提供时Form/默认订阅全部表单状态见 FormProps 文档 与 ReactFinalForm.tsx 中的subscription all默认值此时任何表单状态变化都会触发Form/及其整棵子树重渲染。仓库中的 subscriptions 示例 直观演示了这一点两个形态完全相同的表单一个不传subscription每次输入都重渲染整个表单与所有字段另一个只传subscription{{ submitting: true, pristine: true }}仅当提交状态或 pristine 变化时重渲染后者的字段因此变得相互独立渲染计数显著下降。这意味着FormRenderProps并不是一个固定不变的快照而是你所订阅状态子集的投影——合理裁剪订阅是 React Final Form 高性能的关键。formFinal Form 的FormApiFormRenderProps.form的类型是 Final Form 的FormApi它是你在渲染层操作表单的命令入口典型成员包括submit()执行一次表单提交reset(values?)将表单重置为初始值可传入新值change(name, value)以编程方式修改某个字段的值getState()同步读取当前表单状态setConfig(...)动态更新配置如onSubmit、validate、initialValuesmutators命名变换器对应mutatorspropregisterField(...)注册/注销字段Field/内部使用源码中的form包装对reset的合成事件保护在 ReactFinalForm.tsx 中渲染属性里的form并不是 Final Form 实例的裸引用而是经过一次浅包装const renderProps: FormRenderPropsFormValues { form: { ...form, reset: (eventOrValues?: any) { if (isSyntheticEvent(eventOrValues)) { // its a React SyntheticEvent, call reset with no arguments form.reset(); } else { form.reset(eventOrValues); } }, }, handleSubmit, } as FormRenderPropsFormValues;这里通过 isSyntheticEvent.ts 判断传入参数是否为 React 合成事件如果你直接把form.reset绑定给某个按钮的onClick例如button typebutton onClick{form.reset}Reset/button见 simple 示例React 会把合成事件作为参数传入——此时包装层会忽略该事件、以无参形式调用真正的form.reset()避免把事件对象误当成重置值。测试用例 ReactFinalForm.test.js 专门验证了这一行为先修改字段值、再点击 Reset字段恢复为初始值John同文件后续用例还验证了reset可以接受新的初始值对象should accept new initial values on form reset。在渲染函数中如何使用form以 simple 示例 为模板渲染函数中解构出的form通常用于重置表单Form onSubmit{onSubmit} initialValues{{ stooge: larry, employed: false }} render{({ handleSubmit, form, submitting, pristine, values }) ( form onSubmit{handleSubmit} {/* 字段省略 */} div classNamebuttons button typesubmit disabled{submitting || pristine} Submit /button button typebutton onClick{form.reset} disabled{submitting || pristine} Reset /button /div /form )} /需要强调的是form本身不受subscription裁剪它始终可用而form.getState()返回的才是完整的FormState。handleSubmit交给form的提交处理函数handleSubmit是FormRenderProps中最重要的函数成员类型签名为(?SyntheticEventHTMLFormElement) ?Promise?Object它的设计意图非常明确——直接作为form标签的onSubmit使用form onSubmit{handleSubmit} ...fields go here... /form源码实现三步提交流程ReactFinalForm.tsx 中的handleSubmit实现清晰呈现了它的全部行为const handleSubmit (event?: SubmitEvent) { if (event) { // sometimes not true, e.g. React Native if (typeof event.preventDefault function) { event.preventDefault(); } if (typeof event.stopPropagation function) { // prevent any outer forms from receiving the event too event.stopPropagation(); } } return form.submit(); };event.preventDefault()阻止浏览器默认的表单提交行为页面刷新/跳转这正是 React Final Form 以 JavaScript 接管提交的基础event.stopPropagation()阻止事件冒泡避免嵌套在外部form中的表单把提交事件冒泡给外层表单return form.submit()调用 Final Form 的提交流程校验 → 通过则调用onSubmit并把提交结果原样返回。注意源码中的两处防御性判断event可能是undefined例如在 React Native 等无 DOM 事件的环境下且preventDefault/stopPropagation可能不存在——因为 SubmitEvent 被定义为仅含这两个可选方法的宽松接口。测试用例 ReactFinalForm.test.js 明确验证了handleSubmit可以无参调用、也可以被传入{}这样的非事件对象而不会抛错。返回值类型取决于你的onSubmit写法handleSubmit的返回类型?Promise?Object并不是固定值而是由Form/的onSubmitprop 的写法决定共有三种方式onSubmit写法成功时失败时handleSubmit的返回值同步函数返回undefined返回提交错误对象Object同步返回undefined或错误对象异步 回调返回undefined调用callback()返回undefined以错误对象调用callback(errors)同步返回undefined异步 Promise返回 resolve 的Promise?Object无值resolve一个提交错误对象返回该Promise这里有一个容易踩坑的语义异步onSubmit的错误不是通过 reject 抛出而是 resolve 一个错误对象——reject 保留给服务端或通信类异常如网络中断。测试用例 ReactFinalForm.test.js 验证了异步场景当onSubmit是async函数时handleSubmit(event)返回一个带.then方法的 Promise因此你可以这样等待一次完整提交const onSubmit async (values) { await sleep(300); // 模拟网络请求 window.alert(JSON.stringify(values, 0, 2)); }; // 渲染函数中 {({ handleSubmit }) ( form onSubmit{(event) { const promise handleSubmit(event); // promise 存在且可 await用于提交成功后的跳转等后续逻辑 }} {/* ... */} /form )}此外提交错误对象必须与表单值的结构一致若要返回针对整个表单的通用错误例如Login Failed应使用 Final Form 的专用FORM_ERROR字符串键见 FormProps 文档。校验与提交的完整调用链结合 Form 文档 与源码可以梳理出handleSubmit背后的完整流程用户点击button typesubmit触发form onSubmit{handleSubmit}handleSubmit阻止默认行为并调用form.submit()Final Form 依次运行字段级校验Field.validate与整表校验Form.validate若validateOnBlur为false则在提交时再次全量校验存在校验错误时onSubmit不会被调用校验通过后才调用onSubmit(values, form, callback)。Form/在每次渲染时会通过useWhenValueChanges监听onSubmit等配置的变化并调用form.setConfig(onSubmit, onSubmit)同步到 Final Form 实例见 ReactFinalForm.tsx因此渲染函数拿到的handleSubmit始终指向最新配置下的提交逻辑。FormState渲染属性中的全部状态字段FormRenderProps继承了 Final FormFormState的完整字段集。这些字段不是静态拷贝而是在 getters.ts 中通过addLazyFormState以惰性 getterlazy getter方式挂载到渲染属性对象上的export const addLazyFormState (dest, state) addLazyState(dest, state, [ active, dirty, dirtyFields, dirtySinceLastSubmit, dirtyFieldsSinceLastSubmit, error, errors, hasSubmitErrors, hasValidationErrors, initialValues, invalid, modified, modifiedSinceLastSubmit, pristine, submitError, submitErrors, submitFailed, submitSucceeded, submitting, touched, valid, validating, values, visited, ]);每个字段都通过Object.defineProperty定义了指向当前表单状态的 getter见 getters.ts保证渲染时读取到的永远是最新的状态值。常用字段含义如下字段含义values当前表单的全部值initialValues初始值与当前值比较用于计算pristine/dirtypristine/dirty表单是否与初始值一致 / 已被修改submitting是否正在提交用于禁用提交按钮submitFailed/submitSucceeded最近一次提交是否失败 / 成功submitError/submitErrors整表提交错误FORM_ERROR/ 按字段的提交错误errors/hasValidationErrors全部校验错误 / 是否存在校验错误invalid/valid是否有校验错误注意invalid包含hasValidationErrorsvalidating是否有异步校验正在进行active当前聚焦字段名或undefinedtouched/visited各字段是否被触碰 / 访问过dirtySinceLastSubmit/dirtyFieldsSinceLastSubmit自上次提交后表单/字段是否被改动modified/modifiedSinceLastSubmit字段是否被修改过与 dirty 的细微差别见 Final Form 文档在渲染函数中最常用的组合是({ handleSubmit, form, submitting, pristine, values })见 simple 示例用submitting/pristine控制按钮禁用用values实时预览表单数据。三种渲染方式与FormRenderProps的传递FormRenderProps无论通过哪种方式都能完整到达渲染方Form 文档Prop类型说明Form component/React.ComponentTypeFormRenderProps以React.createElement()渲染组件组件会真实存在于 React 节点树中可在 DevTools 中检视Form render/(props: FormRenderProps) React.Node渲染函数社区推荐Form children/((props: FormRenderProps) React.Node) \| React.Node渲染函数或普通子节点三个 prop 的优先级与合并规则由 renderComponent.ts 实现component优先其次是render最后才是函数型children三者均缺失时抛出Must specify either a render prop, a render function as children, or a component prop错误。若同时指定render与childrenrender会被调用而children会作为额外 prop 注入。此外你在Form/上传入的任意非 API 自定义 prop例如someArbitraryOtherProp{42}也会一并合并进FormRenderProps对象见 FormProps 文档 与 renderComponent.ts 中的合并逻辑。一个完整的实战模板综合以上所有内容一个生产可用的Form/渲染函数模板如下参考 simple 示例 与 subscriptions 示例import React from react; import { Form, Field } from react-final-form; const sleep (ms) new Promise((resolve) setTimeout(resolve, ms)); const required (value) (value ? undefined : Required); // 异步 onSubmit返回 Promise成功 resolve 无值失败 resolve 错误对象 const onSubmit async (values) { await sleep(300); window.alert(JSON.stringify(values, 0, 2)); }; const MyForm () ( Form onSubmit{onSubmit} initialValues{{ firstName: }} // 性能优化只订阅渲染函数真正用到的状态 subscription{{ submitting: true, pristine: true, values: true }} render{({ handleSubmit, form, submitting, pristine, values }) ( form onSubmit{handleSubmit} Field namefirstName validate{required} {({ input, meta }) ( div input {...input} placeholderFirst Name / {meta.touched meta.error span{meta.error}/span} /div )} /Field div classNamebuttons button typesubmit disabled{submitting || pristine} Submit /button button typebutton onClick{form.reset} // 自动屏蔽 React 合成事件 disabled{submitting || pristine} Reset /button /div pre{JSON.stringify(values, 0, 2)}/pre /form )} / );与FormSpy的配合不重渲染表单也能读取状态由于subscription裁剪后FormRenderProps中的values等字段可能不再更新若仍需要在表单外实时展示状态应改用FormSpy/单独订阅。这正是 subscriptions 示例 的做法当渲染函数未订阅values时改用FormSpy subscription{{ values: true }}包裹一个只渲染pre的展示组件。FormSpy收到的FormSpyRenderProps与FormRenderProps结构类似继承FormStateform见 src/types.ts但不含handleSubmit——它只用于观察状态不参与提交。小结FormRenderProps是 React Final Form 渲染层的完整协议由三部分组成formFormApi操作表单的命令入口reset经包装可安全绑定到事件处理器handleSubmit直接交给form的提交函数自动preventDefault/stopPropagation并返回form.submit()的结果其返回类型跟随onSubmit的三种写法同步 / 回调 / Promise而变化FormState全字段通过惰性 getter 挂载保证读到最新状态实际可读字段由subscription决定合理订阅是控制重渲染范围、优化性能的核心手段。想进一步深入可以继续阅读仓库中的 Form 组件文档、FormProps 类型文档 以及订阅式状态管理的实战示例 examples/subscriptions/index.js并在 src/ReactFinalForm.tsx 与 src/ReactFinalForm.test.js 中查看实现与测试细节。赞分享前端UI组件【免费下载链接】react-final-form High performance subscription-based form state management for React项目地址https://gitcode.com/gh_mirrors/re/react-final-form点击查看免费下载相关推荐React Final Form API 完全指南从 Form/、Field/ 到 useField() 的订阅式表单状态管理React Final Form API 完全指南从 Form/ 、 Field/ 到 useField 的订阅式表单状态管理 导读 本文以仓库中的 do前端UI组件react-final-form 的 FormProps 完全指南从渲染模式到订阅式状态管理的配置详解react final form 的 FormProps 完全指南从渲染模式到订阅式状态管理的配置详解 导读 FormProps 是 react final前端UI组件React Final Form 的 Field/ 组件完全指南注册、订阅与渲染字段的官方 API 详解React Final Form 的 Field/ 组件完全指南注册、订阅与渲染字段的官方 API 详解 导读 本文以 React Final Form 官前端UI组件上一篇极速语音交互FunASR WebSocket服务的实时通信技术解密下一篇Bilibili-Evolved暗色模式终极指南提升可访问性与视觉体验创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 React Final Form 的 FormRenderProps 完全指南：从 `handleSubmit` 到 `form` API 的订阅式渲染模型
前端UI组件【免费下载链接】react-final-form High performance subscription-based form state management for React项目地址https://gitcode.com/gh_mirrors/re/react-final-form点击查看免费下载导读FormRenderProps是 React Final Form 中Form/组件传递给渲染函数render prop或渲染组件的全部属性的类型集合。本文围绕仓库中的 FormRenderProps 类型文档 展开结合 核心实现源码、类型定义 与仓库内示例完整讲解form、handleSubmit两大核心成员、FormState各字段的惰性注入机制以及subscription如何决定你究竟能拿到哪些渲染属性。读完本文你将能够正确书写Form/的渲染函数、理解handleSubmit的返回类型规律并掌握通过订阅裁剪渲染属性来优化性能的完整方案。FormRenderProps是什么FormRenderProps是Form/组件对外暴露的渲染协议。无论你使用children渲染函数、render渲染函数还是component渲染组件这三种方式收到的都是同一个FormRenderProps对象其类型签名如下见 src/types.tsexport interface FormRenderPropsFormValues Recordstring, any extends FormStateFormValues { handleSubmit: ( event?: SubmitEvent, ) PromiseRecordstring, any | undefined | undefined; form: FormApiFormValues; }也就是说FormRenderPropsFinal Form 的FormState表单完整状态form表单 API 实例handleSubmit提交处理函数三部分的并集。一个关键前提你收到的值由subscription决定FormRenderProps文档强调的第一件事是你在渲染函数里实际能读到的值取决于你通过subscriptionprop 订阅了FormState中的哪些字段。subscription是一个{ [string]: boolean }对象未提供时Form/默认订阅全部表单状态见 FormProps 文档 与 ReactFinalForm.tsx 中的subscription all默认值此时任何表单状态变化都会触发Form/及其整棵子树重渲染。仓库中的 subscriptions 示例 直观演示了这一点两个形态完全相同的表单一个不传subscription每次输入都重渲染整个表单与所有字段另一个只传subscription{{ submitting: true, pristine: true }}仅当提交状态或 pristine 变化时重渲染后者的字段因此变得相互独立渲染计数显著下降。这意味着FormRenderProps并不是一个固定不变的快照而是你所订阅状态子集的投影——合理裁剪订阅是 React Final Form 高性能的关键。formFinal Form 的FormApiFormRenderProps.form的类型是 Final Form 的FormApi它是你在渲染层操作表单的命令入口典型成员包括submit()执行一次表单提交reset(values?)将表单重置为初始值可传入新值change(name, value)以编程方式修改某个字段的值getState()同步读取当前表单状态setConfig(...)动态更新配置如onSubmit、validate、initialValuesmutators命名变换器对应mutatorspropregisterField(...)注册/注销字段Field/内部使用源码中的form包装对reset的合成事件保护在 ReactFinalForm.tsx 中渲染属性里的form并不是 Final Form 实例的裸引用而是经过一次浅包装const renderProps: FormRenderPropsFormValues { form: { ...form, reset: (eventOrValues?: any) { if (isSyntheticEvent(eventOrValues)) { // its a React SyntheticEvent, call reset with no arguments form.reset(); } else { form.reset(eventOrValues); } }, }, handleSubmit, } as FormRenderPropsFormValues;这里通过 isSyntheticEvent.ts 判断传入参数是否为 React 合成事件如果你直接把form.reset绑定给某个按钮的onClick例如button typebutton onClick{form.reset}Reset/button见 simple 示例React 会把合成事件作为参数传入——此时包装层会忽略该事件、以无参形式调用真正的form.reset()避免把事件对象误当成重置值。测试用例 ReactFinalForm.test.js 专门验证了这一行为先修改字段值、再点击 Reset字段恢复为初始值John同文件后续用例还验证了reset可以接受新的初始值对象should accept new initial values on form reset。在渲染函数中如何使用form以 simple 示例 为模板渲染函数中解构出的form通常用于重置表单Form onSubmit{onSubmit} initialValues{{ stooge: larry, employed: false }} render{({ handleSubmit, form, submitting, pristine, values }) ( form onSubmit{handleSubmit} {/* 字段省略 */} div classNamebuttons button typesubmit disabled{submitting || pristine} Submit /button button typebutton onClick{form.reset} disabled{submitting || pristine} Reset /button /div /form )} /需要强调的是form本身不受subscription裁剪它始终可用而form.getState()返回的才是完整的FormState。handleSubmit交给form的提交处理函数handleSubmit是FormRenderProps中最重要的函数成员类型签名为(?SyntheticEventHTMLFormElement) ?Promise?Object它的设计意图非常明确——直接作为form标签的onSubmit使用form onSubmit{handleSubmit} ...fields go here... /form源码实现三步提交流程ReactFinalForm.tsx 中的handleSubmit实现清晰呈现了它的全部行为const handleSubmit (event?: SubmitEvent) { if (event) { // sometimes not true, e.g. React Native if (typeof event.preventDefault function) { event.preventDefault(); } if (typeof event.stopPropagation function) { // prevent any outer forms from receiving the event too event.stopPropagation(); } } return form.submit(); };event.preventDefault()阻止浏览器默认的表单提交行为页面刷新/跳转这正是 React Final Form 以 JavaScript 接管提交的基础event.stopPropagation()阻止事件冒泡避免嵌套在外部form中的表单把提交事件冒泡给外层表单return form.submit()调用 Final Form 的提交流程校验 → 通过则调用onSubmit并把提交结果原样返回。注意源码中的两处防御性判断event可能是undefined例如在 React Native 等无 DOM 事件的环境下且preventDefault/stopPropagation可能不存在——因为 SubmitEvent 被定义为仅含这两个可选方法的宽松接口。测试用例 ReactFinalForm.test.js 明确验证了handleSubmit可以无参调用、也可以被传入{}这样的非事件对象而不会抛错。返回值类型取决于你的onSubmit写法handleSubmit的返回类型?Promise?Object并不是固定值而是由Form/的onSubmitprop 的写法决定共有三种方式onSubmit写法成功时失败时handleSubmit的返回值同步函数返回undefined返回提交错误对象Object同步返回undefined或错误对象异步 回调返回undefined调用callback()返回undefined以错误对象调用callback(errors)同步返回undefined异步 Promise返回 resolve 的Promise?Object无值resolve一个提交错误对象返回该Promise这里有一个容易踩坑的语义异步onSubmit的错误不是通过 reject 抛出而是 resolve 一个错误对象——reject 保留给服务端或通信类异常如网络中断。测试用例 ReactFinalForm.test.js 验证了异步场景当onSubmit是async函数时handleSubmit(event)返回一个带.then方法的 Promise因此你可以这样等待一次完整提交const onSubmit async (values) { await sleep(300); // 模拟网络请求 window.alert(JSON.stringify(values, 0, 2)); }; // 渲染函数中 {({ handleSubmit }) ( form onSubmit{(event) { const promise handleSubmit(event); // promise 存在且可 await用于提交成功后的跳转等后续逻辑 }} {/* ... */} /form )}此外提交错误对象必须与表单值的结构一致若要返回针对整个表单的通用错误例如Login Failed应使用 Final Form 的专用FORM_ERROR字符串键见 FormProps 文档。校验与提交的完整调用链结合 Form 文档 与源码可以梳理出handleSubmit背后的完整流程用户点击button typesubmit触发form onSubmit{handleSubmit}handleSubmit阻止默认行为并调用form.submit()Final Form 依次运行字段级校验Field.validate与整表校验Form.validate若validateOnBlur为false则在提交时再次全量校验存在校验错误时onSubmit不会被调用校验通过后才调用onSubmit(values, form, callback)。Form/在每次渲染时会通过useWhenValueChanges监听onSubmit等配置的变化并调用form.setConfig(onSubmit, onSubmit)同步到 Final Form 实例见 ReactFinalForm.tsx因此渲染函数拿到的handleSubmit始终指向最新配置下的提交逻辑。FormState渲染属性中的全部状态字段FormRenderProps继承了 Final FormFormState的完整字段集。这些字段不是静态拷贝而是在 getters.ts 中通过addLazyFormState以惰性 getterlazy getter方式挂载到渲染属性对象上的export const addLazyFormState (dest, state) addLazyState(dest, state, [ active, dirty, dirtyFields, dirtySinceLastSubmit, dirtyFieldsSinceLastSubmit, error, errors, hasSubmitErrors, hasValidationErrors, initialValues, invalid, modified, modifiedSinceLastSubmit, pristine, submitError, submitErrors, submitFailed, submitSucceeded, submitting, touched, valid, validating, values, visited, ]);每个字段都通过Object.defineProperty定义了指向当前表单状态的 getter见 getters.ts保证渲染时读取到的永远是最新的状态值。常用字段含义如下字段含义values当前表单的全部值initialValues初始值与当前值比较用于计算pristine/dirtypristine/dirty表单是否与初始值一致 / 已被修改submitting是否正在提交用于禁用提交按钮submitFailed/submitSucceeded最近一次提交是否失败 / 成功submitError/submitErrors整表提交错误FORM_ERROR/ 按字段的提交错误errors/hasValidationErrors全部校验错误 / 是否存在校验错误invalid/valid是否有校验错误注意invalid包含hasValidationErrorsvalidating是否有异步校验正在进行active当前聚焦字段名或undefinedtouched/visited各字段是否被触碰 / 访问过dirtySinceLastSubmit/dirtyFieldsSinceLastSubmit自上次提交后表单/字段是否被改动modified/modifiedSinceLastSubmit字段是否被修改过与 dirty 的细微差别见 Final Form 文档在渲染函数中最常用的组合是({ handleSubmit, form, submitting, pristine, values })见 simple 示例用submitting/pristine控制按钮禁用用values实时预览表单数据。三种渲染方式与FormRenderProps的传递FormRenderProps无论通过哪种方式都能完整到达渲染方Form 文档Prop类型说明Form component/React.ComponentTypeFormRenderProps以React.createElement()渲染组件组件会真实存在于 React 节点树中可在 DevTools 中检视Form render/(props: FormRenderProps) React.Node渲染函数社区推荐Form children/((props: FormRenderProps) React.Node) \| React.Node渲染函数或普通子节点三个 prop 的优先级与合并规则由 renderComponent.ts 实现component优先其次是render最后才是函数型children三者均缺失时抛出Must specify either a render prop, a render function as children, or a component prop错误。若同时指定render与childrenrender会被调用而children会作为额外 prop 注入。此外你在Form/上传入的任意非 API 自定义 prop例如someArbitraryOtherProp{42}也会一并合并进FormRenderProps对象见 FormProps 文档 与 renderComponent.ts 中的合并逻辑。一个完整的实战模板综合以上所有内容一个生产可用的Form/渲染函数模板如下参考 simple 示例 与 subscriptions 示例import React from react; import { Form, Field } from react-final-form; const sleep (ms) new Promise((resolve) setTimeout(resolve, ms)); const required (value) (value ? undefined : Required); // 异步 onSubmit返回 Promise成功 resolve 无值失败 resolve 错误对象 const onSubmit async (values) { await sleep(300); window.alert(JSON.stringify(values, 0, 2)); }; const MyForm () ( Form onSubmit{onSubmit} initialValues{{ firstName: }} // 性能优化只订阅渲染函数真正用到的状态 subscription{{ submitting: true, pristine: true, values: true }} render{({ handleSubmit, form, submitting, pristine, values }) ( form onSubmit{handleSubmit} Field namefirstName validate{required} {({ input, meta }) ( div input {...input} placeholderFirst Name / {meta.touched meta.error span{meta.error}/span} /div )} /Field div classNamebuttons button typesubmit disabled{submitting || pristine} Submit /button button typebutton onClick{form.reset} // 自动屏蔽 React 合成事件 disabled{submitting || pristine} Reset /button /div pre{JSON.stringify(values, 0, 2)}/pre /form )} / );与FormSpy的配合不重渲染表单也能读取状态由于subscription裁剪后FormRenderProps中的values等字段可能不再更新若仍需要在表单外实时展示状态应改用FormSpy/单独订阅。这正是 subscriptions 示例 的做法当渲染函数未订阅values时改用FormSpy subscription{{ values: true }}包裹一个只渲染pre的展示组件。FormSpy收到的FormSpyRenderProps与FormRenderProps结构类似继承FormStateform见 src/types.ts但不含handleSubmit——它只用于观察状态不参与提交。小结FormRenderProps是 React Final Form 渲染层的完整协议由三部分组成formFormApi操作表单的命令入口reset经包装可安全绑定到事件处理器handleSubmit直接交给form的提交函数自动preventDefault/stopPropagation并返回form.submit()的结果其返回类型跟随onSubmit的三种写法同步 / 回调 / Promise而变化FormState全字段通过惰性 getter 挂载保证读到最新状态实际可读字段由subscription决定合理订阅是控制重渲染范围、优化性能的核心手段。想进一步深入可以继续阅读仓库中的 Form 组件文档、FormProps 类型文档 以及订阅式状态管理的实战示例 examples/subscriptions/index.js并在 src/ReactFinalForm.tsx 与 src/ReactFinalForm.test.js 中查看实现与测试细节。赞分享前端UI组件【免费下载链接】react-final-form High performance subscription-based form state management for React项目地址https://gitcode.com/gh_mirrors/re/react-final-form点击查看免费下载相关推荐React Final Form API 完全指南从 Form/、Field/ 到 useField() 的订阅式表单状态管理React Final Form API 完全指南从 Form/ 、 Field/ 到 useField 的订阅式表单状态管理 导读 本文以仓库中的 do前端UI组件react-final-form 的 FormProps 完全指南从渲染模式到订阅式状态管理的配置详解react final form 的 FormProps 完全指南从渲染模式到订阅式状态管理的配置详解 导读 FormProps 是 react final前端UI组件React Final Form 的 Field/ 组件完全指南注册、订阅与渲染字段的官方 API 详解React Final Form 的 Field/ 组件完全指南注册、订阅与渲染字段的官方 API 详解 导读 本文以 React Final Form 官前端UI组件上一篇极速语音交互FunASR WebSocket服务的实时通信技术解密下一篇Bilibili-Evolved暗色模式终极指南提升可访问性与视觉体验创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考