前端UI組件【免費(fèi)下載鏈接】react-final-form High performance subscription-based form state management for React項(xiàng)目地址https://gitcode.com/gh_mirrors/re/react-final-form點(diǎn)擊查看免費(fèi)下載導(dǎo)讀FormRenderProps是 React Final Form 中Form/組件傳遞給渲染函數(shù)render prop或渲染組件的全部屬性的類型集合。本文圍繞倉庫中的 FormRenderProps 類型文檔 展開結(jié)合 核心實(shí)現(xiàn)源碼、類型定義 與倉庫內(nèi)示例完整講解form、handleSubmit兩大核心成員、FormState各字段的惰性注入機(jī)制以及subscription如何決定你究竟能拿到哪些渲染屬性。讀完本文你將能夠正確書寫Form/的渲染函數(shù)、理解handleSubmit的返回類型規(guī)律并掌握通過訂閱裁剪渲染屬性來優(yōu)化性能的完整方案。FormRenderProps是什么FormRenderProps是Form/組件對(duì)外暴露的渲染協(xié)議。無論你使用children渲染函數(shù)、render渲染函數(shù)還是component渲染組件這三種方式收到的都是同一個(gè)FormRenderProps對(duì)象其類型簽名如下見 src/types.tsexport interface FormRenderPropsFormValues Recordstring, any extends FormStateFormValues { handleSubmit: ( event?: SubmitEvent, ) PromiseRecordstring, any | undefined | undefined; form: FormApiFormValues; }也就是說FormRenderPropsFinal Form 的FormState表單完整狀態(tài)form表單 API 實(shí)例handleSubmit提交處理函數(shù)三部分的并集。一個(gè)關(guān)鍵前提你收到的值由subscription決定FormRenderProps文檔強(qiáng)調(diào)的第一件事是你在渲染函數(shù)里實(shí)際能讀到的值取決于你通過subscriptionprop 訂閱了FormState中的哪些字段。subscription是一個(gè){ [string]: boolean }對(duì)象未提供時(shí)Form/默認(rèn)訂閱全部表單狀態(tài)見 FormProps 文檔 與 ReactFinalForm.tsx 中的subscription all默認(rèn)值此時(shí)任何表單狀態(tài)變化都會(huì)觸發(fā)Form/及其整棵子樹重渲染。倉庫中的 subscriptions 示例 直觀演示了這一點(diǎn)兩個(gè)形態(tài)完全相同的表單一個(gè)不傳subscription每次輸入都重渲染整個(gè)表單與所有字段另一個(gè)只傳subscription{{ submitting: true, pristine: true }}僅當(dāng)提交狀態(tài)或 pristine 變化時(shí)重渲染后者的字段因此變得相互獨(dú)立渲染計(jì)數(shù)顯著下降。這意味著FormRenderProps并不是一個(gè)固定不變的快照而是你所訂閱狀態(tài)子集的投影——合理裁剪訂閱是 React Final Form 高性能的關(guān)鍵。formFinal Form 的FormApiFormRenderProps.form的類型是 Final Form 的FormApi它是你在渲染層操作表單的命令入口典型成員包括submit()執(zhí)行一次表單提交reset(values?)將表單重置為初始值可傳入新值change(name, value)以編程方式修改某個(gè)字段的值getState()同步讀取當(dāng)前表單狀態(tài)setConfig(...)動(dòng)態(tài)更新配置如onSubmit、validate、initialValuesmutators命名變換器對(duì)應(yīng)mutatorspropregisterField(...)注冊(cè)/注銷字段Field/內(nèi)部使用源碼中的form包裝對(duì)reset的合成事件保護(hù)在 ReactFinalForm.tsx 中渲染屬性里的form并不是 Final Form 實(shí)例的裸引用而是經(jīng)過一次淺包裝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 判斷傳入?yún)?shù)是否為 React 合成事件如果你直接把form.reset綁定給某個(gè)按鈕的onClick例如button typebutton onClick{form.reset}Reset/button見 simple 示例React 會(huì)把合成事件作為參數(shù)傳入——此時(shí)包裝層會(huì)忽略該事件、以無參形式調(diào)用真正的form.reset()避免把事件對(duì)象誤當(dāng)成重置值。測(cè)試用例 ReactFinalForm.test.js 專門驗(yàn)證了這一行為先修改字段值、再點(diǎn)擊 Reset字段恢復(fù)為初始值John同文件后續(xù)用例還驗(yàn)證了reset可以接受新的初始值對(duì)象should accept new initial values on form reset。在渲染函數(shù)中如何使用form以 simple 示例 為模板渲染函數(shù)中解構(gòu)出的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 )} /需要強(qiáng)調(diào)的是form本身不受subscription裁剪它始終可用而form.getState()返回的才是完整的FormState。handleSubmit交給form的提交處理函數(shù)handleSubmit是FormRenderProps中最重要的函數(shù)成員類型簽名為(?SyntheticEventHTMLFormElement) ?Promise?Object它的設(shè)計(jì)意圖非常明確——直接作為form標(biāo)簽的onSubmit使用form onSubmit{handleSubmit} ...fields go here... /form源碼實(shí)現(xiàn)三步提交流程ReactFinalForm.tsx 中的handleSubmit實(shí)現(xiàn)清晰呈現(xiàn)了它的全部行為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()阻止瀏覽器默認(rèn)的表單提交行為頁面刷新/跳轉(zhuǎn)這正是 React Final Form 以 JavaScript 接管提交的基礎(chǔ)event.stopPropagation()阻止事件冒泡避免嵌套在外部form中的表單把提交事件冒泡給外層表單return form.submit()調(diào)用 Final Form 的提交流程校驗(yàn) → 通過則調(diào)用onSubmit并把提交結(jié)果原樣返回。注意源碼中的兩處防御性判斷event可能是undefined例如在 React Native 等無 DOM 事件的環(huán)境下且preventDefault/stopPropagation可能不存在——因?yàn)?SubmitEvent 被定義為僅含這兩個(gè)可選方法的寬松接口。測(cè)試用例 ReactFinalForm.test.js 明確驗(yàn)證了handleSubmit可以無參調(diào)用、也可以被傳入{}這樣的非事件對(duì)象而不會(huì)拋錯(cuò)。返回值類型取決于你的onSubmit寫法handleSubmit的返回類型?Promise?Object并不是固定值而是由Form/的onSubmitprop 的寫法決定共有三種方式onSubmit寫法成功時(shí)失敗時(shí)handleSubmit的返回值同步函數(shù)返回undefined返回提交錯(cuò)誤對(duì)象Object同步返回undefined或錯(cuò)誤對(duì)象異步 回調(diào)返回undefined調(diào)用callback()返回undefined以錯(cuò)誤對(duì)象調(diào)用callback(errors)同步返回undefined異步 Promise返回 resolve 的Promise?Object無值resolve一個(gè)提交錯(cuò)誤對(duì)象返回該P(yáng)romise這里有一個(gè)容易踩坑的語義異步onSubmit的錯(cuò)誤不是通過 reject 拋出而是 resolve 一個(gè)錯(cuò)誤對(duì)象——reject 保留給服務(wù)端或通信類異常如網(wǎng)絡(luò)中斷。測(cè)試用例 ReactFinalForm.test.js 驗(yàn)證了異步場(chǎng)景當(dāng)onSubmit是async函數(shù)時(shí)handleSubmit(event)返回一個(gè)帶.then方法的 Promise因此你可以這樣等待一次完整提交const onSubmit async (values) { await sleep(300); // 模擬網(wǎng)絡(luò)請(qǐng)求 window.alert(JSON.stringify(values, 0, 2)); }; // 渲染函數(shù)中 {({ handleSubmit }) ( form onSubmit{(event) { const promise handleSubmit(event); // promise 存在且可 await用于提交成功后的跳轉(zhuǎn)等后續(xù)邏輯 }} {/* ... */} /form )}此外提交錯(cuò)誤對(duì)象必須與表單值的結(jié)構(gòu)一致若要返回針對(duì)整個(gè)表單的通用錯(cuò)誤例如Login Failed應(yīng)使用 Final Form 的專用FORM_ERROR字符串鍵見 FormProps 文檔。校驗(yàn)與提交的完整調(diào)用鏈結(jié)合 Form 文檔 與源碼可以梳理出handleSubmit背后的完整流程用戶點(diǎn)擊button typesubmit觸發(fā)form onSubmit{handleSubmit}handleSubmit阻止默認(rèn)行為并調(diào)用form.submit()Final Form 依次運(yùn)行字段級(jí)校驗(yàn)Field.validate與整表校驗(yàn)Form.validate若validateOnBlur為false則在提交時(shí)再次全量校驗(yàn)存在校驗(yàn)錯(cuò)誤時(shí)onSubmit不會(huì)被調(diào)用校驗(yàn)通過后才調(diào)用onSubmit(values, form, callback)。Form/在每次渲染時(shí)會(huì)通過useWhenValueChanges監(jiān)聽onSubmit等配置的變化并調(diào)用form.setConfig(onSubmit, onSubmit)同步到 Final Form 實(shí)例見 ReactFinalForm.tsx因此渲染函數(shù)拿到的handleSubmit始終指向最新配置下的提交邏輯。FormState渲染屬性中的全部狀態(tài)字段FormRenderProps繼承了 Final FormFormState的完整字段集。這些字段不是靜態(tài)拷貝而是在 getters.ts 中通過addLazyFormState以惰性 getterlazy getter方式掛載到渲染屬性對(duì)象上的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, ]);每個(gè)字段都通過Object.defineProperty定義了指向當(dāng)前表單狀態(tài)的 getter見 getters.ts保證渲染時(shí)讀取到的永遠(yuǎn)是最新的狀態(tài)值。常用字段含義如下字段含義values當(dāng)前表單的全部值initialValues初始值與當(dāng)前值比較用于計(jì)算pristine/dirtypristine/dirty表單是否與初始值一致 / 已被修改submitting是否正在提交用于禁用提交按鈕submitFailed/submitSucceeded最近一次提交是否失敗 / 成功submitError/submitErrors整表提交錯(cuò)誤FORM_ERROR/ 按字段的提交錯(cuò)誤errors/hasValidationErrors全部校驗(yàn)錯(cuò)誤 / 是否存在校驗(yàn)錯(cuò)誤invalid/valid是否有校驗(yàn)錯(cuò)誤注意invalid包含hasValidationErrorsvalidating是否有異步校驗(yàn)正在進(jìn)行active當(dāng)前聚焦字段名或undefinedtouched/visited各字段是否被觸碰 / 訪問過dirtySinceLastSubmit/dirtyFieldsSinceLastSubmit自上次提交后表單/字段是否被改動(dòng)modified/modifiedSinceLastSubmit字段是否被修改過與 dirty 的細(xì)微差別見 Final Form 文檔在渲染函數(shù)中最常用的組合是({ handleSubmit, form, submitting, pristine, values })見 simple 示例用submitting/pristine控制按鈕禁用用values實(shí)時(shí)預(yù)覽表單數(shù)據(jù)。三種渲染方式與FormRenderProps的傳遞FormRenderProps無論通過哪種方式都能完整到達(dá)渲染方Form 文檔Prop類型說明Form component/React.ComponentTypeFormRenderProps以React.createElement()渲染組件組件會(huì)真實(shí)存在于 React 節(jié)點(diǎn)樹中可在 DevTools 中檢視Form render/(props: FormRenderProps) React.Node渲染函數(shù)社區(qū)推薦Form children/((props: FormRenderProps) React.Node) \| React.Node渲染函數(shù)或普通子節(jié)點(diǎn)三個(gè) prop 的優(yōu)先級(jí)與合并規(guī)則由 renderComponent.ts 實(shí)現(xiàn)component優(yōu)先其次是render最后才是函數(shù)型children三者均缺失時(shí)拋出Must specify either a render prop, a render function as children, or a component prop錯(cuò)誤。若同時(shí)指定render與childrenrender會(huì)被調(diào)用而children會(huì)作為額外 prop 注入。此外你在Form/上傳入的任意非 API 自定義 prop例如someArbitraryOtherProp{42}也會(huì)一并合并進(jìn)FormRenderProps對(duì)象見 FormProps 文檔 與 renderComponent.ts 中的合并邏輯。一個(gè)完整的實(shí)戰(zhàn)模板綜合以上所有內(nèi)容一個(gè)生產(chǎn)可用的Form/渲染函數(shù)模板如下參考 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 錯(cuò)誤對(duì)象 const onSubmit async (values) { await sleep(300); window.alert(JSON.stringify(values, 0, 2)); }; const MyForm () ( Form onSubmit{onSubmit} initialValues{{ firstName: }} // 性能優(yōu)化只訂閱渲染函數(shù)真正用到的狀態(tài) 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} // 自動(dòng)屏蔽 React 合成事件 disabled{submitting || pristine} Reset /button /div pre{JSON.stringify(values, 0, 2)}/pre /form )} / );與FormSpy的配合不重渲染表單也能讀取狀態(tài)由于subscription裁剪后FormRenderProps中的values等字段可能不再更新若仍需要在表單外實(shí)時(shí)展示狀態(tài)應(yīng)改用FormSpy/單獨(dú)訂閱。這正是 subscriptions 示例 的做法當(dāng)渲染函數(shù)未訂閱values時(shí)改用FormSpy subscription{{ values: true }}包裹一個(gè)只渲染pre的展示組件。FormSpy收到的FormSpyRenderProps與FormRenderProps結(jié)構(gòu)類似繼承FormStateform見 src/types.ts但不含handleSubmit——它只用于觀察狀態(tài)不參與提交。小結(jié)FormRenderProps是 React Final Form 渲染層的完整協(xié)議由三部分組成formFormApi操作表單的命令入口reset經(jīng)包裝可安全綁定到事件處理器handleSubmit直接交給form的提交函數(shù)自動(dòng)preventDefault/stopPropagation并返回form.submit()的結(jié)果其返回類型跟隨onSubmit的三種寫法同步 / 回調(diào) / Promise而變化FormState全字段通過惰性 getter 掛載保證讀到最新狀態(tài)實(shí)際可讀字段由subscription決定合理訂閱是控制重渲染范圍、優(yōu)化性能的核心手段。想進(jìn)一步深入可以繼續(xù)閱讀倉庫中的 Form 組件文檔、FormProps 類型文檔 以及訂閱式狀態(tài)管理的實(shí)戰(zhàn)示例 examples/subscriptions/index.js并在 src/ReactFinalForm.tsx 與 src/ReactFinalForm.test.js 中查看實(shí)現(xiàn)與測(cè)試細(xì)節(jié)。贊分享前端UI組件【免費(fèi)下載鏈接】react-final-form High performance subscription-based form state management for React項(xiàng)目地址https://gitcode.com/gh_mirrors/re/react-final-form點(diǎn)擊查看免費(fèi)下載相關(guān)推薦React Final Form API 完全指南從 Form/、Field/ 到 useField() 的訂閱式表單狀態(tài)管理React Final Form API 完全指南從 Form/ 、 Field/ 到 useField 的訂閱式表單狀態(tài)管理 導(dǎo)讀 本文以倉庫中的 do前端UI組件react-final-form 的 FormProps 完全指南從渲染模式到訂閱式狀態(tài)管理的配置詳解react final form 的 FormProps 完全指南從渲染模式到訂閱式狀態(tài)管理的配置詳解 導(dǎo)讀 FormProps 是 react final前端UI組件React Final Form 的 Field/ 組件完全指南注冊(cè)、訂閱與渲染字段的官方 API 詳解React Final Form 的 Field/ 組件完全指南注冊(cè)、訂閱與渲染字段的官方 API 詳解 導(dǎo)讀 本文以 React Final Form 官前端UI組件上一篇極速語音交互FunASR WebSocket服務(wù)的實(shí)時(shí)通信技術(shù)解密下一篇Bilibili-Evolved暗色模式終極指南提升可訪問性與視覺體驗(yàn)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考