React useFormState: Formu apstrādes meistarība optimizētai lietotāja pieredzei

Formas ir tīmekļa lietojumprogrammu pamatelements, kas ļauj lietotājiem mijiedarboties ar jūsu lietojumprogrammu un iesniegt datus. Tomēr formu stāvokļa pārvaldība, validācijas apstrāde un atgriezeniskās saites nodrošināšana var kļūt sarežģīta, īpaši lielās un dinamiskās lietojumprogrammās. React useFormState āķis, kas ieviests React 18, piedāvā jaudīgu un efektīvu veidu, kā pārvaldīt formu stāvokli un racionalizēt formu apstrādes loģiku, tādējādi uzlabojot veiktspēju un lietotāja pieredzi. Šajā visaptverošajā rokasgrāmatā detalizēti aplūkots useFormState āķis, apskatot tā pamatkoncepcijas, priekšrocības, praktiskus piemērus un progresīvas metodes.

Kas ir React useFormState?

useFormState ir React āķis, kas vienkāršo formu stāvokļa pārvaldību, iekapsulējot stāvokļa un atjaunināšanas loģiku vienā āķī. Tas ir īpaši izstrādāts darbam kopā ar React servera komponentēm un servera darbībām (Server Actions), nodrošinot progresīvu uzlabošanu un uzlabotu veiktspēju, pārnesot formu apstrādi uz serveri.

Galvenās iezīmes un priekšrocības:

Vienkāršota stāvokļa pārvaldība: Centralizē formas stāvokli un atjaunināšanas loģiku, samazinot šablona kodu un uzlabojot koda lasāmību.
Servera darbību integrācija: Nevainojami integrējas ar React servera darbībām, ļaujot apstrādāt formu iesniegšanu un validāciju serverī.
Progresīvā uzlabošana: Nodrošina progresīvu uzlabošanu, ļaujot formām darboties pat bez JavaScript, ar uzlabotu funkcionalitāti, kad JavaScript ir iespējots.
Optimizēta veiktspēja: Samazina klienta puses apstrādi, apstrādājot formu loģiku serverī, kas nodrošina ātrāku formu iesniegšanu un uzlabotu lietojumprogrammas veiktspēju.
Pieejamība: Veicina pieejamu formu izveidi, nodrošinot mehānismus kļūdu apstrādei un atgriezeniskās saites sniegšanai lietotājiem ar invaliditāti.

Izpratne par useFormState āķi

useFormState āķis pieņem divus argumentus:

Servera darbība: Funkcija, kas tiks izpildīta, kad forma tiks iesniegta. Šī funkcija parasti apstrādā formas validāciju, datu apstrādi un datu bāzes atjauninājumus.
Sākotnējais stāvoklis: Formas stāvokļa sākotnējā vērtība. Tā var būt jebkura JavaScript vērtība, piemēram, objekts, masīvs vai primitīvs.

Āķis atgriež masīvu ar divām vērtībām:

Formas stāvoklis: Formas stāvokļa pašreizējā vērtība.
Formas darbība: Funkcija, kuru jūs nododat form elementa action rekvizītam. Šī funkcija izraisa servera darbību, kad forma tiek iesniegta.

Pamata piemērs:

Apskatīsim vienkāršu piemēru ar kontaktu formu, kas ļauj lietotājiem iesniegt savu vārdu un e-pasta adresi.

// Servera darbība (piemērs - jādefinē citur)
async function submitContactForm(prevState, formData) {
  // Validēt formas datus
  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Lūdzu, aizpildiet visus laukus.' };
  }

  // Apstrādāt formas datus (piem., nosūtīt e-pastu)
  try {
    // Simulēt e-pasta sūtīšanu
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulēt asinhronu darbību
    return { message: 'Paldies par jūsu iesniegumu!' };
  } catch (error) {
    return { message: 'Radās kļūda. Lūdzu, mēģiniet vēlāk.' };
  }
}

// React komponents
'use client'; // Svarīgi servera darbībām

import { useFormState } from 'react-dom';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, { message: null });

  return (
    
      Vārds:
      



      E-pasts:
      



      

      {state?.message && {state.message}}
    
  );
}

export default ContactForm;

Šajā piemērā submitContactForm funkcija ir servera darbība. Tā saņem iepriekšējo stāvokli un formas datus kā argumentus. Tā validē formas datus un, ja tie ir derīgi, apstrādā datus un atgriež jaunu stāvokļa objektu ar veiksmes ziņojumu. Ja ir kļūdas, tā atgriež jaunu stāvokļa objektu ar kļūdas ziņojumu. useFormState āķis pārvalda formas stāvokli un nodrošina formAction funkciju, kas tiek nodota form elementa action rekvizītam. Kad forma tiek iesniegta, submitContactForm funkcija tiek izpildīta serverī, un rezultējošais stāvoklis tiek atjaunināts komponentē.

Progresīvas useFormState metodes

1. Formas validācija:

Formas validācija ir būtiska, lai nodrošinātu datu integritāti un labu lietotāja pieredzi. useFormState var izmantot, lai apstrādātu formas validācijas loģiku serverī. Šeit ir piemērs:

async function validateForm(prevState, formData) {
  const name = formData.get('name');
  const email = formData.get('email');

  let errors = {};

  if (!name) {
    errors.name = 'Vārds ir obligāts.';
  }

  if (!email) {
    errors.email = 'E-pasts ir obligāts.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errors.email = 'Nederīgs e-pasta formāts.';
  }

  if (Object.keys(errors).length > 0) {
    return { errors: errors };
  }

  // Apstrādāt formas datus (piem., saglabāt datu bāzē)
  return { message: 'Forma veiksmīgi iesniegta!', errors: null };
}

function MyForm() {
  const [state, action] = useFormState(validateForm, { message: null, errors: null });

  return (
    
      Vārds:
      

      {state?.errors?.name && {state.errors.name}}

      E-pasts:
      

      {state?.errors?.email && {state.errors.email}}

      
      {state?.message && {state.message}}
    
  );
}

Šajā piemērā validateForm servera darbība validē formas datus un atgriež objektu, kas satur visas validācijas kļūdas. Pēc tam komponents parāda šīs kļūdas lietotājam.

2. Optimistiskie atjauninājumi:

Optimistiskie atjauninājumi var uzlabot lietotāja pieredzi, nodrošinot tūlītēju atgriezenisko saiti, pat pirms serveris ir apstrādājis formas iesniegšanu. Ar useFormState un nedaudz klienta puses loģikas jūs varat ieviest optimistiskus atjauninājumus, atjauninot formas stāvokli uzreiz pēc formas iesniegšanas un pēc tam atceļot atjauninājumu, ja serveris atgriež kļūdu.

'use client'

import { useFormState } from 'react-dom';
import { useState } from 'react';

async function submitForm(prevState, formData) {
  await new Promise(resolve => setTimeout(resolve, 1000)); // Simulēt tīkla latentumu

  const value = formData.get('value');
  if (value === 'error') {
    return { message: 'Iesniegšana neizdevās!' };
  }
  return { message: 'Iesniegšana veiksmīga!' };
}

function OptimisticForm() {
  const [optimisticValue, setOptimisticValue] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [state, action] = useFormState(submitForm, { message: '' });

  const handleSubmit = async (e) => {
    setIsSubmitting(true);
    setOptimisticValue(e.target.value.value);
    const formData = new FormData(e.target);
    const result = await action(prevState, formData);
    setIsSubmitting(false);

    if (result?.message === 'Iesniegšana neizdevās!') {
      setOptimisticValue(''); // Atcelt kļūdas gadījumā
    }
  };

  return (
    
      Vērtība:
      


      
      {state?.message && {state.message}}
    
  );
}

Šajā piemērā mēs simulējam aizkavētu servera atbildi. Pirms servera darbība tiek pabeigta, ievades lauks tiek optimistiski atjaunināts ar iesniegto vērtību. Ja servera darbība neizdodas (simulēta, iesniedzot vērtību 'error'), ievades lauks tiek atgriezts iepriekšējā stāvoklī.

3. Failu augšupielādes apstrāde:

useFormState var izmantot arī failu augšupielādes apstrādei. FormData objekts automātiski apstrādā failu datus. Šeit ir piemērs:

async function uploadFile(prevState, formData) {
  const file = formData.get('file');

  if (!file) {
    return { message: 'Lūdzu, izvēlieties failu.' };
  }

  // Simulēt faila augšupielādi
  await new Promise(resolve => setTimeout(resolve, 1000));

  // Šeit jūs parasti augšupielādētu failu uz serveri
  console.log('Fails augšupielādēts:', file.name);

  return { message: `Fails ${file.name} veiksmīgi augšupielādēts!` };
}

function FileUploadForm() {
  const [state, action] = useFormState(uploadFile, { message: null });

  return (
    
      Izvēlieties failu:
      



      

      {state?.message && {state.message}}
    
  );
}

Šajā piemērā uploadFile servera darbība iegūst failu no FormData objekta un to apstrādā. Reālā lietojumprogrammā jūs parasti augšupielādētu failu uz mākoņa krātuves pakalpojumu, piemēram, Amazon S3 vai Google Cloud Storage.

4. Progresīvā uzlabošana:

Viena no būtiskākajām useFormState un servera darbību priekšrocībām ir spēja nodrošināt progresīvu uzlabošanu. Tas nozīmē, ka jūsu formas var darboties pat tad, ja lietotāja pārlūkprogrammā ir atspējots JavaScript. Forma tiks iesniegta tieši serverim, un servera darbība apstrādās formas iesniegšanu. Kad JavaScript ir iespējots, React uzlabos formu ar klienta puses interaktivitāti un validāciju.

Lai nodrošinātu progresīvu uzlabošanu, jums jāpārliecinās, ka jūsu servera darbības apstrādā visu formu validācijas un datu apstrādes loģiku. Jūs varat arī nodrošināt rezerves mehānismus lietotājiem bez JavaScript.

5. Pieejamības apsvērumi:

Veidojot formas, ir svarīgi ņemt vērā pieejamību, lai nodrošinātu, ka lietotāji ar invaliditāti var efektīvi izmantot jūsu formas. useFormState var palīdzēt jums izveidot pieejamas formas, nodrošinot mehānismus kļūdu apstrādei un atgriezeniskās saites sniegšanai lietotājiem. Šeit ir dažas pieejamības labākās prakses:

Izmantojiet semantisko HTML: Izmantojiet semantiskos HTML elementus, piemēram, <label>, <input> un <button>, lai nodrošinātu jūsu formu struktūru un nozīmi.
Nodrošiniet skaidrus apzīmējumus: Pārliecinieties, ka visiem formas laukiem ir skaidri un aprakstoši apzīmējumi, kas ir saistīti ar atbilstošajiem ievades elementiem, izmantojot for atribūtu.
Apstrādājiet kļūdas saudzīgi: Parādiet validācijas kļūdas skaidrā un kodolīgā veidā un izmantojiet ARIA atribūtus, lai brīdinātu ekrāna lasītāju lietotājus par kļūdu esamību.
Nodrošiniet navigāciju ar tastatūru: Pārliecinieties, ka lietotāji var pārvietoties pa formu, izmantojot tastatūru.
Izmantojiet ARIA atribūtus: Izmantojiet ARIA atribūtus, lai sniegtu papildu informāciju palīgtehnoloģijām, piemēram, ekrāna lasītājiem.

Labākās prakses useFormState lietošanai

Lai maksimāli izmantotu useFormState āķi, ņemiet vērā šādas labākās prakses:

Uzturiet servera darbības mazas un mērķtiecīgas: Servera darbībām jābūt atbildīgām par vienu uzdevumu, piemēram, formu datu validāciju vai datu bāzes atjaunināšanu. Tas padara jūsu kodu vieglāk saprotamu un uzturamu.
Apstrādājiet kļūdas saudzīgi: Ieviesiet robustu kļūdu apstrādi savās servera darbībās, lai novērstu neparedzētas kļūdas un sniegtu lietotājam informatīvus kļūdu ziņojumus.
Izmantojiet validācijas bibliotēku: Apsveriet iespēju izmantot validācijas bibliotēku, piemēram, Zod vai Yup, lai vienkāršotu formas validācijas loģiku.
Nodrošiniet skaidru atgriezenisko saiti lietotājam: Nodrošiniet skaidru un savlaicīgu atgriezenisko saiti lietotājam par formas iesniegšanas statusu, ieskaitot validācijas kļūdas, veiksmes ziņojumus un ielādes indikatorus.
Optimizējiet veiktspēju: Samaziniet datu apjomu, kas tiek pārsūtīts starp klientu un serveri, lai uzlabotu veiktspēju.

Reālās dzīves piemēri un pielietojuma gadījumi

useFormState var izmantot ļoti daudzās reālās pasaules lietojumprogrammās. Šeit ir daži piemēri:

E-komercijas norēķinu formas: Maksājumu informācijas, piegādes adrešu un pasūtījumu kopsavilkumu apstrāde.
Lietotāju reģistrācijas un pieteikšanās formas: Lietotāju autentifikācija un jaunu kontu izveide.
Kontaktu formas: Lietotāju pieprasījumu un atsauksmju vākšana.
Datu ievades formas: Datu ievadīšana un pārvaldība dažādās lietojumprogrammās.
Aptaujas un viktorīnas: Lietotāju atbilžu vākšana un atgriezeniskās saites sniegšana.

Piemēram, apsveriet e-komercijas norēķinu formu. Izmantojot useFormState, jūs varat apstrādāt piegādes adrešu, maksājumu informācijas un citu pasūtījuma detaļu validāciju serverī. Tas nodrošina, ka dati ir derīgi pirms to iesniegšanas datu bāzē, un tas arī uzlabo veiktspēju, samazinot klienta puses apstrādi.

Vēl viens piemērs ir lietotāja reģistrācijas forma. Izmantojot useFormState, jūs varat apstrādāt lietotājvārdu, paroļu un e-pasta adrešu validāciju serverī. Tas nodrošina, ka dati ir droši un ka lietotājs tiek pareizi autentificēts.

Noslēgums

React useFormState āķis nodrošina jaudīgu un efektīvu veidu, kā pārvaldīt formu stāvokli un racionalizēt formu apstrādes loģiku. Izmantojot servera darbības un progresīvu uzlabošanu, useFormState ļauj jums veidot stabilas, veiktspējīgas un pieejamas formas, kas nodrošina lielisku lietotāja pieredzi. Ievērojot šajā rokasgrāmatā izklāstītās labākās prakses, jūs varat efektīvi izmantot useFormState, lai vienkāršotu savu formu apstrādes loģiku un veidotu labākas React lietojumprogrammas. Atcerieties ņemt vērā globālos pieejamības standartus un lietotāju gaidas, izstrādājot formas daudzveidīgai, starptautiskai auditorijai.