Бу мәкалә SurveyJS иганәчесе Күпчелек React уйлап табучыларның психик моделе бар, алар турында кычкырып сөйләшмичә. Бу формалар һәрвакыт компонентлар булырга тиеш. Бу стекны аңлата:
Localирле дәүләт өчен кальян формасын реакцияләгез (минималь ре-рендерлар, эргономик кырны теркәү, императив үзара бәйләнеш). Тикшерү өчен зод (кертү дөреслеге, чикне тикшерү, тип-куркынычсыз анализлау). Арткы сорау өчен реакция: тапшыру, кабатлау, кэшлау, серверны синхронлаштыру һ.б.
Формаларның күпчелек өлеше өчен - сезнең логин экраннарыгыз, көйләү битләрегез, CRUD модальләрегез - бу чыннан да яхшы эшли. Eachәрбер әсәр үз эшен башкара, алар чиста итеп язалар, һәм сез кушымтагызның продуктны аерган өлешләренә күчә аласыз. Ләкин бер-бер артлы форма күренү кагыйдәләре кебек әйберләр туплый башлый, алар элеккеге җавапларга бәйле, яки өч кыр аша каскадланган кыйммәтләр. Бәлки, хәтта бөтен битләр дә сикереп торырга тиеш. Сез беренче шартлы куллануWatch һәм эчке филиал белән эш итәсез, бу яхшы. Аннары бүтән. Аннары сез Zod схемасы гадәти рәвештә күрсәтә алмаган кросс кагыйдәләрен кодлау өчен superRefineга ирешәсез. Аннары, адым навигациясе бизнес логикасын агыза башлый. Кайбер вакытта сез үзегез төзегәнне карыйсыз һәм форманың чыннан да UI түгеллеген аңлыйсыз. Бу карар кабул итү процессы, һәм компонент агачы - сез аны саклаган урында. Монда мин реакция формаларының психик моделе бозыла дип уйлыйм, һәм бу чыннан да беркемнең дә гаебе түгел. RHF + Zod стакасы аның өчен эшләнгән әйберләрдә бик яхшы. Мәсьәлә шунда: без аны абстракт проблема белән туры килгән урында куллануны дәвам итәбез, чөнки альтернатива формалар турында бөтенләй башкача уйлау ысулын таләп итә. Бу мәкалә шул альтернатива турында. Моны күрсәтү өчен, без бер үк күп этаплы форманы ике тапкыр төзербез:
React Hook Form + Zod белән React Query тапшыру өчен чыбыклы, SurveyJS ярдәмендә, форманы мәгълүмат кебек кабул итә - гади JSON схемасы - компонент агачы түгел.
Шул ук таләпләр, бер үк шартлы логика, ахырда шул ук API шалтыраты. Аннары без нәрсә күчерелгәнен һәм нәрсә калганын төгәл күрсәтәчәкбез, һәм нинди модельне кулланырга кирәклеген һәм кайчан карар кабул итүнең практик ысулын билгеләячәкбез. Без төзи торган форма:
Бу форма 4 адымлы агымны кулланачак: Адым 1: Детальләр
Фамилия (кирәк), Электрон почта (кирәкле, дөрес формат).
2 адым: Заказ
Берәмлек бәясе, Сан, Салым ставкасы, Алынган: Субтотал, Салым, Барлыгы.
3 адым: Хисап һәм җавап
Сезнең хисап бармы? (Әйе /) к) Әйе → кулланучы исеме + серсүз булса, икесе дә кирәк. Әгәр дә No → электрон почта беренче адымда тупланган булса.
Канәгатьләнү рейтингы (1-5) ≥ 4 → сораса "Сезгә нәрсә ошады?" ≤ 2 → сораса, "Без нәрсә яхшырта алабыз?"
4 адым: Кабатлау
Барлыгы> = 100 булса гына барлыкка килә Соңгы тапшыру.
Бу экстремаль түгел. Ләкин архитектур аермаларны фаш итү җитә. 1 өлеш: Компонентлар белән идарә итәләр (React Hook Form + Zod) Урнаштыру npm react-hook-form zod @ hookform / resolvers @ tanstack / react-query урнаштырыгыз
Зод схемасы Зод схемасыннан башлыйк, чөнки гадәттә форманың формасы урнашкан урында. Беренче ике адым өчен - шәхси детальләр һәм заказ керемнәре - барысы да туры: кирәкле сызыклар, минимумлы саннар һәм энум. Шартлы кагыйдәләрне әйтергә тырышканда кызыклы өлеш башлана.
"zod" дан {z import кертү;
const form formSchema = z.object ({firstName: z.string (). мин (1, "Кирәк"), электрон почта: z.string (). электрон почта ("яраксыз электрон почта"), бәя: z.number () мин. (0), сан: z.number (). z.string (). өстәмә (), серсүз: z.string (). факультатив (), канәгатьләнү: z.number () мин. (! data.username) {ctx.addIssue ({код: "гадәт", юл: ["кулланучы исеме"], хәбәр: "Кирәк"});
if (data.satisfaction> = 4 &&! data.positiveFeedback) {ctx.addIssue ({код: "гадәт", юл: ["positiveFeedback"], хәбәр: "Сезгә ошаганны бүлешегез"}); }
if (data.satisfaction <= 2 &&! data.improvementFeedback) {ctx.addIssue ({код: "гадәт", юл:["improvementFeedback"], хәбәр: "Зинһар, безгә нәрсә яхшыртырга кирәклеген әйтегез"}); }});
Export Type FormData = z.infer
Игътибар итегез, кулланучы исеме һәм серсүз шартлы рәвештә таләп ителсә дә, өстәмә () итеп языла, чөнки Зодның тип схемасы объект формасын тасвирлый, кырлар мөһим булганда кагыйдәләр түгел. Шартлы таләп superRefine эчендә яшәргә тиеш, ул форма расланганнан соң эшли һәм тулы объектка керә ала. Бу аерылу кимчелек түгел; ул корал өчен эшләнгән нәрсә: superRefine - схема структурасында күрсәтеп булмый торган кросс логикасы. Монда игътибарга лаек нәрсә - бу схема белдермәгән нәрсә. Анда битләр төшенчәсе юк, кайсы кырлар кайсы вакытта күренеп тора, һәм навигация төшенчәсе юк. Болар барысы да бүтән урында яшәячәк. Форма компоненты
"useForm, useWatch" "react-hook-form"; импорт {zodResolver} "@ hookform / resolvers / zod" дан импортлау; "@ tanstack / react-query" дан импорт {useMutation import;
const STEPS = ["детальләр", "заказ", "хисап", "карау"];
OrderPayload = FormData & {субтотал: сан; салым: сан; гомуми: сан};
экспорт функциясе RHFMultiStepForm () {const [адым, setStep] = useState (0);
const мутациясе = useMutation ({ mutationFn: async (йөкләү: OrderPayload) => { const res = көтүне көтегез ("/ api / заказлар", { метод: "POST", башламнары: {"Эчтәлек-тип": "кушымта / json"}, тән: JSON.stringify (йөкләү), }); if (! res.ok) яңа Хата җибәрсә ("Тапшыра алмады"); кайту res.json (); }, });
const {теркәлү, контроль, тоткычSubmit, formState: {хаталар},} = useForm
кире кайтару
; value = "0.1"> 10%
{адым === 2 && (<> <сайлау {... теркәлү ("hasAccount")}> <параметр бәясе = "Әйе"> Әйе <опция бәясе = "" к "> Noк
{hasAccount === "Әйе" && (<> <кертү {... теркәлү ("кулланучы исеме")} урын хуҗасы = "Кулланучының исеме" /> <кертү {... теркәлү ("серсүз")} урын хуҗасы = "Серсүз" /> )}
<кертү тибы = "сан" {... теркәлү ("канәгатьләнү", {valueAsNumber: true})} />
{канәгатьләнү> = 4 && (<текстария {... теркәлү ("позитив кире кайту")} />)}
{канәгатьләнү <= 2 && (<текстарея {... теркәлү ("яхшыртуФидбак")}/>)} )}
{адым === 3 && гомуми> = 100 &&
Каләмне тикшерүJS-03-RHF карагыз. Монда бик күп вакыйгалар була, һәм эшләрнең кайда беткәнен сизәргә әкренрәк.
Алынган кыйммәтләр - субтоталь, салым, гомуми - компонентта useWatch һәм useMemo аша исәпләнә, чөнки алар тере кыр кыйммәтләренә бәйле һәм алар өчен башка табигый урын юк. Кулланучының исеме, серсүз, позитив кире кайту, камилләштерү өчен күренү кагыйдәләре JSXда шартлы рәвештә яши. Адымга сикерү логикасы - карау бите гомуми> = 100 булганда гына күрсәтелә - showSubmit үзгәрүенә һәм 3 адымда күрсәтү шартына. Навигация үзе куллану статусы счетчикы, без кул белән арттырабыз. React Query кабат карау, кэшлау һәм инвалидлык белән эш итә. Форма бары тик расланган мәгълүматлар белән мутация.mutate дип атый.
Моның берсе дә дөрес түгел. Бу әле идиоматик реакция, һәм RHF ре-рендерларны ничек изоляцияләве аркасында компонент шактый башкаручы. Әгәр дә сез моны язмаган кешегә бирсәгез һәм алардан карау битенең нинди шартларда аңлатылуын сорасагыз, алар ShowSubmit аша эзләнергә тиеш, 3 адым күрсәтү шартлары, һәм диңгез төймәсе логикасы - өч аерым урын - бер юлда әйтелгән кагыйдәне реконструкцияләү өчен. Форма эшли, әйе, ләкин тәртип система буларак тикшерелми. Ул психик яктан башкарылырга тиеш. Иң мөһиме, аны үзгәртү инженерлык катнашуын таләп итә. Хәтта кечкенә генә йомшаклык, карау адымы күрсәтелгәндә көйләү кебек, компонентны редакцияләү, тикшерүне яңарту, тарту соравын ачу, тикшерүне көтү һәм яңадан урнаштыру дигән сүз. 2 өлеш: Схема белән идарә итү (SurveyJS) Хәзер схема ярдәмендә шул ук агымны төзик. Урнаштыру npm тикшерү-үзәк тикшерү-реакция-ui @ танстак / реакция-сорау урнаштыру
SurveyJS формасын күрсәтүне көчәйтә торган MIT-лицензияле платформадан бәйсез эш вакыты двигателе - без монда кайгырткан өлеш. Бу JSON схемасын ала, аннан эчке модель төзи, һәм сезнең реакция компонентында башкача яшәячәк бар нәрсә белән эш итә: күренүчәнлекне бәяләү, алынган кыйммәтләрне исәпләү, битнең торышын идарә итү, тикшерүне күзәтү, һәм нинди битләрнең чынбарлыкта күрсәтелгәнен аңлату. сорау-реакция-ui UI / бу модельне реакциягә тоташтыручы катлам. Бу, нигездә, двигательнең торышы үзгәргәндә яңадан күрсәтә торган <Тикшерү моделе = {модель} /> компоненты. SurveyJS UI китапханәләре Angular, Vue3 һәм башка бик күп рамкалар өчен дә бар.
Бергәләп, алар сезгә тулы функциональ, күп битле форма эш вакытын бирәләр, бер контроль агым сызыгын язмыйча. Схема форматы үзе, алда әйтелгәнчә, JSON гына - DSL яки милекче әйбер юк. Сез аны сызып, файлдан импортлый аласыз, аны APIдан ала аласыз, яки мәгълүмат базасы баганасында саклый аласыз һәм эш вакытында гидратлый аласыз. Бер үк форма, мәгълүмат буларак Менә бер үк форма, бу юлы JSON объекты буларак күрсәтелде. Схема барысын да билгели: структура, тикшерү, күренү кагыйдәләре, алынган исәпләүләр, бит навигациясе - һәм аны эш вакытында бәяләгән Модельгә бирә. Менә ул тулы охшаган:
экспорт конст соравыSchema = {титул: "Заказ агымы", showPresentBar: "өске", битләр: [{name: "детальләр", элементлар: {исем: "заказ", элементлар:исем: "taxRate", defaultValue: 0,1, сайлау: "экспрессия", исем: "гомуми", белдерү: "{субтотал} + {салым}"}]}, {исем: "хисап", элементлар: [{тип: "радиогруппа", исем: "hasAccount", сайлау: "серсүз", кертү төре: "серсүз", күренеп торганIf: "{hasAccount} = 'Әйе'", таләп ителә: дөрес, тикшерүчеләр: > = 4 "}, {тип:" аңлатма ", исем:" яхшырту Фикер алышу ", күренеп торганIf:" {канәгатьләнү} <= 2 "}]}, {исем:" карау ", күренеп торганIf:" {total}> = 100 ", элементлар: []}]};
Моны RHF версиясе белән бер мизгелгә чагыштырыгыз.
Кулланучының исемен һәм серсүзен таләп иткән superRefine блок юкка чыкты. visibleIf: "{hasAccount} = 'Әйе'" isRequired белән кушылган: чын ике проблеманы бергә эшли, кырда, сез аларны табарга уйлыйсыз. UseWatch + useMemo чылбыры субтоталны, салымны һәм сумманы исәпләде, бер-берсенә исем белән күрсәтелгән өч экспресс кыры белән алыштырыла. Тикшерү битенең торышы, RHF версиясендә шоу-субмит аша гына реконструкцияләнә торган, 3-нче адым филиалы. Finallyәм, ниһаять, nav төймәсе логикасы - бит объектындагы бер күренеш.
Шул ук логика бар. Схема аңа компонентка таралу урынына, изоляциядә күренгән урында яшәргә урын бирә. Шулай ук, схема типны куллана, субтоталь, салым һәм гомуми өчен 'экспресс'. Экспрессия бары тик укылган һәм нигездә исәпләнгән кыйммәтләрне күрсәтү өчен кулланыла. SurveyJS шулай ук статик эчтәлек өчен 'html' төрен хуплый, ләкин исәпләнгән кыйммәтләр өчен белдерү дөрес сайлау. Хәзер реакция ягы өчен. Тапшыру һәм тапшыру Бик гади. Сезнең API-ны тулыландырыгыз, шул ук ысул - useMutation яки гади алу аша:
импорт {useState, useEffect, useRef "" реакциядән "; импорт {useMutation}" @ tanstack / react-query "; импорт {Модель}" тикшерү-үзәк "дән импорт {Сораштыру}" тикшерү-реакция-уи "дан импорт;
экспорт функциясе SurveyForm () {const [модель] = useState (() => яңа модель (тикшерү Шема));
const мутациясе = useMutation ({ mutationFn: async (мәгълүмат) => { const res = көтүне көтегез ("/ api / заказлар", { метод: "POST", башламнары: {"Эчтәлек-тип": "кушымта / json"}, орган: JSON.stringify (мәгълүматлар), }); if (! res.ok) яңа Хата җибәрсә ("Тапшыра алмады"); кайту res.json (); }, });
const mutationRef = useRef (мутация); mutationRef.current = мутация; useEffect (() => {const эшкәртүче = (җибәрүче) => мутацияRef.current.mutate (җибәрүче.дата); model.onComplete.add (эшкәртүче); кайту () => model.onComplete.remove (эшкәртүче);}, [модель]); // ref эшкәртүченең яңадан теркәлүеннән кача (мутация объектының шәхесен үзгәртә)
кайту ( <> <Сораштыру моделе = {модель} /> {mutation.isError &&
Каләмне тикшерүJS-03-SurveyJS карагыз.
Кулланучы соңгы күренгән битнең ахырына җиткәч, тулы янгын. Әгәр дә гомуми 100 беркайчан да узмаса һәм карау бите атланса, ул әле дә дөрес янып тора, чөнки SurveyJS "соңгы бит" нәрсә аңлатканын карар алдыннан күренүчәнлекне бәяли. Аннары, sender.data барлык җавапларны исәпләнгән кыйммәтләр белән бергә (субтоталь, салым, гомуми) беренче класс кырлары итеп үз эченә ала, шуңа күрә API түләү йөкләнеше RHF версиясеSubmit'та кул белән җыелган нәрсәгә охшаш. .Әр сүзнеңmutationRef үрнәге - сез һәрбер урында үзгәрә торган кыйммәт өстендә тотрыклы вакыйга эшкәртүчесе кирәк булган җиргә барып җитү белән бер үк - SurveyJS турында бернәрсә дә юк.
React компонентында бернинди бизнес логикасы юк. UseWatch юк, шартлы JSX юк, адым счетчикы юк, UseMemo чылбыры юк, superRefine юк. Реакт - ул чыннан да яхшы булганны эшли: компонентны күрсәтү һәм аны API чакыруына чыбыклау. Нәрсә реакциядән күчте?
Борчылу RHF Стек Тикшеренү Күренеш JSX филиаллары .әр сүзнең Алынган кыйммәтләр useWatch / useMemo белдерү Кыр кагыйдәләре superRefine Схема шартлары Навигация адым торышы Бит күренеп тора Кагыйдә урнашуы Файлларга таратылды Схемада үзәкләштерелгән
Реактта калган нәрсә - макет, стиллау, тапшыру чыбыклары, һәм кушымталар интеграциясе, ягъни React әйберләре чыннан да эшләнгән. Калганнарның барысы да схемага күчте, һәм схема JSON объекты булганлыктан, ул мәгълүмат базасында сакланырга мөмкин, кушымта кодыңнан бәйсез рәвештә версияләнергә, яисә урнаштыру таләп итмичә эчке кораллау аша редакцияләнергә мөмкин. Кабатлау битен башлап җибәрүче бусагасын үзгәртергә тиеш продукт менеджеры моны компонентка кагылмыйча эшли ала. Бу форма тәртибе еш үсә торган һәм гел инженерлар йөртмәгән командалар өчен мәгънәле оператив аерма. Eachәрбер алымны кайчан кулланырга? Менә минем өчен яхшы бармак кагыйдәсе: форманы бөтенләй бетерүне күз алдыгызга китерегез. Сез нәрсә югалтыр идегез?
Әгәр дә ул экраннар булса, сез компонентлы формаларны телисез. Әгәр дә бу бизнес логикасы, бусага, ботак кагыйдәләре, һәм реаль карарларны кодлаган шартлы таләпләр кебек, схема двигателе кирәк.
Шул ук вакытта, сезнең үзгәрешләр, нигездә, этикеткалар, кырлар, макетлар турында булса, RHF сезгә яхшы хезмәт күрсәтәчәк. Әгәр алар сезнең опцияләр яки юридик коллективка сишәмбе көндез билет бирмичә көйләргә кирәк булган шартлар, нәтиҗәләр, кагыйдәләр турында булса, SurveyJS белән схема моделе тагын да намуслы. Бу ике караш бер-берсе белән көндәш түгел. Алар төрле проблемаларны чишәләр, һәм сакланырга кирәк булган хата - абстракцияне логиканың авырлыгына туры китермәү - кагыйдә системасын компонент кебек тоту, чөнки ул таныш корал, яисә политик двигательгә ирешү, чөнки форма өч адымга үскән һәм шартлы кыр алган. Без монда төзегән форма чикне белә торып, аерманы күрсәтер өчен катлаулы, ләкин экстремаль түгел, чагыштыру каты тоела. Сезнең код базасында бик күп реаль формалар, мөгаен, шул ук чик янында утыралар, һәм сорау, гадәттә, кемнеңдер исемен атаганмы-юкмы. React Hook Form + Zod кулланыгыз:
Формалар CRUD юнәлешле; Логика тайз һәм UI белән идарә итә; Инженерлар барлык тәртипкә ия; Арткы хакыйкать чыганагы булып кала.
SurveyJS кулланыгыз:
Формалар бизнес карарларын кодлый; Кагыйдәләр UIдан бәйсез рәвештә үсә; Логика күренергә, тыңланырга яки версия булырга тиеш; Инженер булмаганнар тәртипкә йогынты ясыйлар; Шул ук форма берничә фронт аша үтәргә тиеш.
