React experimental_useFormStatus: Išsamus vadovas

React besivystanti ekosistema nuolat pristato naujus įrankius ir API, skirtus pagerinti programuotojų patirtį ir programų našumą. Vienas iš tokių papildymų, šiuo metu esantis eksperimentinėje stadijoje, yra experimental_useFormStatus kabliukas. Šis kabliukas suteikia vertingų įžvalgų apie formos pateikimo būseną, ypač dirbant su serverio veiksmais. Šis vadovas gilinsis į experimental_useFormStatus detales, nagrinėdamas jo funkcionalumą, privalumus ir praktines taikymo sritis.

Kas yra experimental_useFormStatus?

Kabliukas experimental_useFormStatus yra skirtas teikti informaciją apie formos pateikimo būseną, inicijuotą naudojant React Server Actions. Jis leidžia komponentams reaguoti į skirtingus formos pateikimo proceso etapus, tokius kaip laukimas, sėkmė ar nesėkmė. Tai leidžia programuotojams kurti labiau reaguojančias ir patogesnes vartotojui formų patirtis.

Iš esmės, jis užpildo atotrūkį tarp kliento pusės formos ir serverio pusės veiksmo, siūlydamas aiškų ir glaustą būdą stebėti ir rodyti formos pateikimo būseną. Tai ypač naudinga teikiant vizualinį grįžtamąjį ryšį vartotojui, pavyzdžiui, rodant įkėlimo indikatorius, sėkmės pranešimus ar klaidų pranešimus.

Pagrindiniai experimental_useFormStatus naudojimo privalumai

• Pagerinta vartotojo patirtis: Suteikia realaus laiko grįžtamąjį ryšį apie formos pateikimo būseną, informuojant ir įtraukiant vartotojus.
• Supaprastintas formų tvarkymas: Supaprastina formų pateikimo valdymo procesą, sumažinant pasikartojančio kodo kiekį.
• Patobulintas prieinamumas: Leidžia programuotojams kurti labiau prieinamas formas, teikiant būsenos atnaujinimus, kurie gali būti perduoti pagalbinėms technologijoms.
• Geresnis klaidų tvarkymas: Supaprastina klaidų aptikimą ir pranešimą, leidžiantį tvirtesnį formų patvirtinimą ir klaidų atkūrimą.
• Švarus kodas: Siūlo deklaratyvų ir glaustą būdą valdyti formos pateikimo būseną, todėl kodą lengviau skaityti ir prižiūrėti.

experimental_useFormStatus anatomijos supratimas

Kabliukas experimental_useFormStatus grąžina objektą, kuriame yra keletas pagrindinių savybių. Šios savybės suteikia vertingos informacijos apie dabartinę formos pateikimo būseną. Išnagrinėkime kiekvieną savybę išsamiau:

• pending: Loginė reikšmė (boolean), nurodanti, ar formos pateikimas šiuo metu vyksta. Tai naudinga rodant įkėlimo indikatorių.
• data: Duomenys, kuriuos grąžino serverio veiksmas sėkmingai pateikus formą. Tai galima naudoti vartotojo sąsajai atnaujinti veiksmo rezultatais.
• error: Klaidos objektas, kuriame yra informacija apie visas klaidas, įvykusias formos pateikimo metu. Tai galima naudoti klaidų pranešimams rodyti vartotojui.
• action: Serverio veiksmo funkcija, kuri buvo naudojama formai pateikti. Tai gali būti naudinga prireikus iš naujo paleisti veiksmą.
• formState: Formos būsena prieš pateikimą. Ji pateikia duomenų, kuriuos forma turėjo prieš prasidedant pateikimo procesui, momentinę nuotrauką.

Pagrindinis naudojimo pavyzdys

Štai pagrindinis pavyzdys, kaip naudoti experimental_useFormStatus React komponente:

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function myAction(formData) {
  'use server'
  // Atlikite serverio pusės logiką čia
  await new Promise(resolve => setTimeout(resolve, 2000)); // Imituokite delsą

  const name = formData.get('name');

  if (!name) {
    return { message: 'Vardas yra privalomas.' };
  }

  return { message: `Sveiki, ${name}!` };
}

function MyForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      Vardas:
      
      
        {pending ? 'Pateikiama...' : 'Pateikti'}
      
      {error && 
Klaida: {error.message}
}
      {data && 
{data.message}
}
    
  );
}

export default MyForm;

Šiame pavyzdyje useFormStatus naudojamas stebėti formos pateikimo, inicijuoto myAction serverio veiksmu, būseną. Savybė pending naudojama išjungti įvesties lauką ir mygtuką pateikimo metu, o savybės data ir error naudojamos atitinkamai sėkmės ir klaidų pranešimams rodyti.

Pažangūs naudojimo atvejai

Be pagrindinio formos pateikimo stebėjimo, experimental_useFormStatus galima naudoti ir sudėtingesniuose scenarijuose. Štai keletas pavyzdžių:

1. Optimistiniai atnaujinimai

Optimistiniai atnaujinimai apima vartotojo sąsajos atnaujinimą iškart po to, kai vartotojas pateikia formą, darant prielaidą, kad pateikimas bus sėkmingas. Tai gali pagerinti programos suvokiamą našumą. experimental_useFormStatus galima naudoti norint atšaukti optimistinį atnaujinimą, jei formos pateikimas nepavyksta.

import { experimental_useFormStatus as useFormStatus } from 'react-dom';
import { useState } from 'react';

async function updateProfile(formData) {
  'use server'
  // Imituokite delsą
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');

  if (!name) {
    return { success: false, message: 'Vardas yra privalomas.' };
  }

  return { success: true, message: `Profilis atnaujintas ${name}!` };
}

function ProfileForm({ initialName }) {
  const { pending, data, error } = useFormStatus();
  const [name, setName] = useState(initialName);

  const handleSubmit = async (e) => {
      e.preventDefault();

      // Optimistinis atnaujinimas
      setName(e.target.name.value);

      const formData = new FormData(e.target);
      const result = await updateProfile(formData);

      if (result && !result.success) {
          // Atšaukite optimistinį atnaujinimą, jei pateikimas nepavyksta
          setName(initialName); // Grąžinkite pradinę vertę
      }
  };

  return (
    

      Vardas:
       setName(e.target.value)} disabled={pending} />
      
        {pending ? 'Atnaujinama...' : 'Atnaujinti profilį'}
      
      {error && 
Klaida: {error.message}
}
      {data && data.success && 
{data.message}
}
    
  );
}

export default ProfileForm;

2. Sąlyginis atvaizdavimas

experimental_useFormStatus galima naudoti norint sąlygiškai atvaizduoti skirtingus vartotojo sąsajos elementus, atsižvelgiant į formos pateikimo būseną. Pavyzdžiui, galite rodyti skirtingą pranešimą ar vartotojo sąsają, priklausomai nuo serverio veiksmo grąžinamos reikšmės.

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function processOrder(formData) {
  'use server'
  // Imituokite delsą
  await new Promise(resolve => setTimeout(resolve, 2000));

  const orderId = Math.floor(Math.random() * 1000);

  return { orderId };
}

function OrderForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      
        {pending ? 'Apdorojamas užsakymas...' : 'Pateikti užsakymą'}
      
      {error && 
Klaida: {error.message}
}
      {data && data.orderId && (
        

          
Užsakymas sėkmingai pateiktas!
          
Jūsų užsakymo ID: {data.orderId}
        
      )}
      {!pending && !data && !error && 
Pasiruošę pateikti užsakymą.
}
    
  );
}

export default OrderForm;

3. Prieinamumo aspektai

Prieinamumas yra itin svarbus kuriant interneto svetaines. Su experimental_useFormStatus galite žymiai pagerinti formų prieinamumą. Pavyzdžiui, galite naudoti ARIA atributus, kad informuotumėte ekrano skaitytuvus apie formos pateikimo būseną.

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function submitComment(formData) {
  'use server'
  await new Promise(resolve => setTimeout(resolve, 2000));

  const commentText = formData.get('comment');

  if (!commentText) {
    return { message: 'Komentaras yra privalomas.' };
  }

  return { message: 'Komentaras sėkmingai pateiktas!' };
}

function CommentForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      Komentaras:
      
      
        {pending ? 'Pateikiama...' : 'Pateikti komentarą'}
      
      {error && 
Klaida: {error.message}
}
      {data && 
{data.message}
}
    
  );
}

export default CommentForm;

Šiame fragmente aria-busy={pending} informuoja pagalbines technologijas, kai forma yra pateikiama, o role="alert" ir role="status" atitinkamai tinkamai paženklina klaidų ir sėkmės pranešimus.

Globalūs aspektai ir geriausios praktikos

Kuriant formas pasaulinei auditorijai naudojant experimental_useFormStatus, reikėtų atsižvelgti į keletą aspektų, siekiant užtikrinti sklandžią vartotojo patirtį:

• Lokalizacija: Užtikrinkite, kad visi klaidų ir sėkmės pranešimai būtų tinkamai lokalizuoti skirtingoms kalboms. Tai apima pačių pranešimų vertimą, taip pat pranešimų formato pritaikymą prie kiekvienos kalbos konvencijų. Apsvarstykite galimybę naudoti bibliotekas, tokias kaip i18next arba React integruotą Context API vertimams valdyti.
• Datos ir laiko formatai: Atsižvelkite į skirtingus datos ir laiko formatus, naudojamus visame pasaulyje. Naudokite biblioteką, tokią kaip date-fns arba moment.js, kad datos ir laikai būtų tinkamai formatuojami kiekvienai lokalizacijai. Pavyzdžiui, JAV naudoja MM/DD/YYYY, o daugelis Europos šalių naudoja DD/MM/YYYY.
• Skaičių formatai: Panašiai, skaičių formatai skiriasi skirtinguose regionuose. Naudokite Intl.NumberFormat API, kad formatuotumėte skaičius pagal vartotojo lokalizaciją. Tai apima dešimtainių skyriklių, tūkstančių skyriklių ir valiutų simbolių tvarkymą.
• Valiutų tvarkymas: Jei jūsų forma susijusi su finansinėmis operacijomis, užtikrinkite, kad teisingai tvarkote valiutas. Naudokite biblioteką, tokią kaip currency.js, kad atliktumėte tikslius valiutų skaičiavimus ir konversijas.
• Prieinamumas įvairiems vartotojams: Įsitikinkite, kad laikotės prieinamumo gairių, siekiant užtikrinti, kad jūsų forma būtų naudojama žmonėms su negalia. Tai apima tinkamų ARIA atributų teikimą, semantinio HTML naudojimą ir užtikrinimą, kad forma būtų pasiekiama klaviatūra. Atsižvelkite į vartotojus su regos sutrikimais, klausos sutrikimais, kognityviniais skirtumais ir motorinių įgūdžių apribojimais.
• Tinklo delsa: Būkite informuoti apie galimas tinklo delsos problemas, ypač vartotojams regionuose su lėtesniu interneto ryšiu. Pateikite aiškų grįžtamąjį ryšį vartotojui formos pateikimo proceso metu, pavyzdžiui, įkėlimo indikatorių ar eigos juostą.
• Klaidų pranešimų aiškumas: Užtikrinkite, kad klaidų pranešimai būtų aiškūs, glausti ir veiksmingi, nepriklausomai nuo vartotojo vietos ar techninio išprusimo. Venkite techninio žargono.
• Patvirtinimo taisyklės: Lokalizuokite patvirtinimo taisykles, tokias kaip pašto kodų formatai, telefono numerių formatai ir adreso reikalavimai, kad atitiktų laukiamas konvencijas skirtinguose regionuose.

Integracija su trečiųjų šalių bibliotekomis

experimental_useFormStatus galima sklandžiai integruoti su įvairiomis trečiųjų šalių formų bibliotekomis, siekiant patobulinti formų tvarkymo galimybes. Štai keletas pavyzdžių:

• Formik: Formik yra populiari formų biblioteka, kuri supaprastina formos būsenos valdymą ir patvirtinimą. Sujungdami Formik su experimental_useFormStatus, galite lengvai stebėti savo formų pateikimo būseną ir teikti realaus laiko grįžtamąjį ryšį vartotojui.
• React Hook Form: React Hook Form yra kita plačiai naudojama formų biblioteka, kuri siūlo puikų našumą ir lankstumą. Integravus React Hook Form su experimental_useFormStatus, galite valdyti formų pateikimus ir rodyti būsenos atnaujinimus švariai ir efektyviai.
• Yup: Yup yra schemų kūrimo įrankis reikšmių analizavimui ir patvirtinimui. Yup galima naudoti norint apibrėžti jūsų formų patvirtinimo schemas, o experimental_useFormStatus galima naudoti norint rodyti patvirtinimo klaidas vartotojui realiuoju laiku.

Norėdami integruoti su šiomis bibliotekomis, galite perduoti `action` savybę bibliotekos formos komponentui ar tvarkyklės funkcijai, o tada naudoti `experimental_useFormStatus` atitinkamuose komponentuose, kuriems reikia rodyti pateikimo būseną.

Palyginimas su alternatyviais metodais

Prieš atsirandant experimental_useFormStatus, programuotojai dažnai rėmėsi rankiniu būsenos valdymu arba specialiais kabliukais, kad stebėtų formos pateikimo būseną. Šie metodai gali būti sudėtingi ir linkę į klaidas. experimental_useFormStatus siūlo labiau deklaratyvų ir glaustą būdą valdyti formų pateikimus, sumažinant pasikartojančio kodo kiekį ir gerinant kodo skaitomumą.

Kitos alternatyvos galėtų apimti bibliotekų, tokių kaip `react-query` ar `swr`, naudojimą serverio pusės duomenų mutacijoms valdyti, kurios gali netiesiogiai tvarkyti formų pateikimus. Tačiau experimental_useFormStatus suteikia tiesioginį ir labiau į React orientuotą būdą stebėti formos būseną, ypač naudojant React Server Actions.

Apribojimai ir svarstymai

Nors experimental_useFormStatus siūlo didelių privalumų, svarbu žinoti jo apribojimus ir svarstytinus aspektus:

• Eksperimentinė būsena: Kaip rodo pavadinimas, experimental_useFormStatus vis dar yra eksperimentinėje stadijoje. Tai reiškia, kad jo API ateityje gali keistis.
• Priklausomybė nuo serverio veiksmų: Kabliukas yra glaudžiai susijęs su React Server Actions. Jo negalima naudoti su tradiciniais kliento pusės formų pateikimais.
• Naršyklių suderinamumas: Įsitikinkite, kad jūsų tikslinės naršyklės palaiko reikiamas funkcijas, skirtas React Server Actions ir experimental_useFormStatus.

Išvada

Kabliukas experimental_useFormStatus yra vertingas papildymas React įrankių rinkiniui, skirtas kurti tvirtas ir patogias vartotojui formas. Suteikdamas deklaratyvų ir glaustą būdą stebėti formos pateikimo būseną, jis supaprastina formų tvarkymą, gerina vartotojo patirtį ir didina prieinamumą. Nors jis vis dar yra eksperimentinėje stadijoje, experimental_useFormStatus rodo didelį potencialą ateities formų kūrimui su React. Kadangi React ekosistema ir toliau vystosi, tokių įrankių pritaikymas bus labai svarbus kuriant modernias ir našias interneto programas.

Nepamirškite visada peržiūrėti oficialią React dokumentaciją, kad gautumėte naujausią informaciją apie experimental_useFormStatus ir kitas eksperimentines funkcijas. Sėkmingo kodavimo!