React useOptimistic: Optimistlike uuenduste meisterlik kasutamine

Tänapäeva veebiarenduse maailmas on sujuva ja reageeriva kasutajakogemuse pakkumine esmatähtis. Kasutajad eeldavad, et rakendused reageerivad nende tegevustele koheselt, isegi kui tegemist on asünkroonsete toimingutega nagu võrgupäringud. Reacti useOptimistic hook pakub võimsa mehhanismi selle saavutamiseks, võimaldades teil luua optimistlikke uuendusi, mis muudavad teie kasutajaliidese kiiremaks ja reageerivamaks.

Mis on optimistlikud uuendused?

Optimistlikud uuendused on kasutajaliidese muster, mille puhul te uuendate koheselt kasutajaliidese, et kajastada tegevuse tulemust enne, kui vastav serveripoolne operatsioon on lõpule viidud. See loob illusiooni kohesest tagasisidest, kuna kasutaja näeb muudatusi otsekohe. Kui serverioperatsioon on edukas, saab optimistlikust uuendusest tegelik olek. Kui operatsioon aga ebaõnnestub, peate optimistliku uuenduse tagasi pöörama eelmisesse olekusse ja viga korrektselt käsitlema.

Mõelge nendele stsenaariumidele, kus optimistlikud uuendused võivad kasutajakogemust märkimisväärselt parandada:

• Kommentaari lisamine: Kuvage uus kommentaar kohe pärast seda, kui kasutaja selle esitab, ootamata serveri kinnitust eduka salvestamise kohta.
• Postituse laikimine: Suurendage laikide arvu hetkega, kui kasutaja klõpsab laikimisnuppu.
• Üksuse kustutamine: Eemaldage üksus loendist koheselt, andes vahetut visuaalset tagasisidet.
• Vormi esitamine: Näidake eduteadet kohe pärast vormi esitamist, isegi kui andmeid töödeldakse veel serveris.

Tutvustame Reacti useOptimistic hook'i

Reacti useOptimistic hook, mis lisati React 18-sse, lihtsustab optimistlike uuenduste rakendamist. See pakub puhast ja deklaratiivset viisi optimistliku oleku haldamiseks ja võimalike vigade käsitlemiseks.

Süntaks

useOptimistic hook võtab kaks argumenti:

            const [optimisticState, addOptimistic] = useOptimistic(
  initialState,
  (currentState, update) => newState
);
            

              
                Copy
              
            
          

• initialState: Oleku algväärtus.
• (currentState, update) => newState: Uuendusfunktsioon, mis võtab argumentideks praeguse oleku ja uuendusväärtuse ning tagastab uue oleku. Seda funktsiooni kutsutakse välja iga kord, kui rakendatakse optimistlikku uuendust.

Hook tagastab massiivi, mis sisaldab:

• optimisticState: Praegune olek, mis sisaldab nii tegelikku olekut kui ka kõiki rakendatud optimistlikke uuendusi.
• addOptimistic: Funktsioon, mis aktsepteerib uuendusväärtuse ja rakendab selle olekule optimistlikult. Argument, mis antakse addOptimistic funktsioonile, edastatakse seejärel uuendusfunktsioonile.

Praktiline näide: kommentaaride lisamine

Illustreerime useOptimistic kasutamist konkreetse näitega: kommentaaride lisamine blogipostitusele.

            import React, { useState, useOptimistic } from 'react';

function CommentList({ postId, initialComments }) {
  const [comments, setComments] = useState(initialComments);
  const [optimisticComments, addOptimistic] = useOptimistic(
    comments,
    (currentComments, newComment) => [...currentComments, newComment]
  );

  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsSubmitting(true);
    const text = event.target.elements.comment.value;

    const newComment = {
      id: `optimistic-${Date.now()}`, // Ajutine ID
      postId: postId,
      text: text,
      author: 'Sina', // Kohatäide
      createdAt: new Date().toISOString(),
      isOptimistic: true // Lipp optimistlike kommentaaride tuvastamiseks
    };

    addOptimistic(newComment);

    try {
      // Simuleerime API-kutset kommentaari salvestamiseks
      await new Promise(resolve => setTimeout(resolve, 1000)); // Simuleerime võrgu latentsust
      const response = await fetch(`/api/posts/${postId}/comments`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ text })
      });

      if (!response.ok) {
        throw new Error('Kommentaari salvestamine ebaõnnestus');
      }

      const savedComment = await response.json();

      // Asendame optimistliku kommentaari tegeliku salvestatud kommentaariga
      setComments(prevComments =>
        prevComments.map(comment =>
          comment.id === newComment.id ? savedComment : comment
        )
      );

    } catch (error) {
      console.error('Viga kommentaari salvestamisel:', error);
      // Tühistame optimistliku uuenduse, filtreerides ajutise kommentaari välja
      setComments(prevComments => prevComments.filter(comment => comment.id !== newComment.id));
      alert('Kommentaari salvestamine ebaõnnestus. Palun proovige uuesti.'); // Anname kasutajale tagasisidet
    } finally {
      setIsSubmitting(false);
      event.target.reset();
    }
  };

  return (
    

      
Kommentaarid
      

        
        Saada
      
      

        {optimisticComments.map(comment => (
          

            {comment.author} - {comment.text}
            {comment.isOptimistic &&  (Postitamine...)}
          
        ))}
      
    
  );
}

export default CommentList;
            

              
                Copy
              
            
          

Selgitus

1. Initsialiseerimine: Me initsialiseerime comments oleku, kasutades useState'i koos postituse algsete kommentaaridega. Me initsialiseerime optimisticComments, kasutades useOptimistic'ut, edastades algsed kommentaarid ja uuendusfunktsiooni. Uuendusfunktsioon lihtsalt lisab uue kommentaari olemasolevate kommentaaride loendisse.
2. Optimistlik uuendus: Kui kasutaja esitab kommentaari, kutsume kohe välja addOptimistic, mis lisab uue kommentaari optimisticComments olekusse. Kasutajaliides uueneb ja kuvab uue kommentaari kohe. Lisame ka isOptimistic lipu, et saaksime näidata, et kommentaari postitatakse.
3. Serveripoolne salvestamine: Seejärel teeme API-kutse (selles näites simuleeritud setTimeout'iga), et salvestada kommentaar serverisse.
4. Eduka operatsiooni käsitlemine: Kui serveripoolne salvestamine õnnestub, saame serverist salvestatud kommentaari. Seejärel uuendame comments olekut, asendades optimistliku kommentaari tegeliku salvestatud kommentaariga, mis sisaldab serveri poolt määratud ID-d ja muud asjakohast teavet.
5. Veakäsitlus: Kui serveripoolne salvestamine ebaõnnestub, püüame vea kinni ja tühistame optimistliku uuenduse, filtreerides ajutise kommentaari comments olekust välja. Samuti kuvame kasutajale veateate.
6. Kuvamine: Kasutajaliides kuvab optimisticComments olekut.

Keerukamate stsenaariumide käsitlemine

Eelnev näide demonstreeris lihtsat stsenaariumi. Keerukamate stsenaariumide korral peate võib-olla käsitlema olemasolevate üksuste uuendusi, kustutamisi või muid keerukamaid oleku manipuleerimisi. Oluline on tagada, et teie useOptimistic'ule edastatud uuendusfunktsioon käsitleks neid stsenaariume korrektselt.

Olemasolevate üksuste uuendamine

Oletame, et soovite lubada kasutajatel oma kommentaare muuta. Peaksite uuendama uuendusfunktsiooni, et leida ja asendada olemasolev kommentaar uuendatud versiooniga.

            const [optimisticComments, addOptimistic] = useOptimistic(
  comments,
  (currentComments, updatedComment) => {
    return currentComments.map(comment => {
      if (comment.id === updatedComment.id) {
        return updatedComment;
      } else {
        return comment;
      }
    });
  }
);
            

              
                Copy
              
            
          

Üksuste kustutamine

Sarnaselt, kui soovite lubada kasutajatel kommentaare kustutada, peaksite uuendama uuendusfunktsiooni, et filtreerida kustutatud kommentaar välja.

            const [optimisticComments, addOptimistic] = useOptimistic(
  comments,
  (currentComments, deletedCommentId) => {
    return currentComments.filter(comment => comment.id !== deletedCommentId);
  }
);
            

              
                Copy
              
            
          

Parimad praktikad useOptimistic kasutamiseks

Et useOptimistic'ut tõhusalt kasutada ja ehitada robustseid rakendusi, kaaluge neid parimaid praktikaid:

• Tuvastage optimistlikud uuendused: Märkige selgelt optimistlikud uuendused oma olekus (nt kasutades isOptimistic lippu), et eristada neid tegelikest andmetest. See võimaldab teil kuvada sobivaid visuaalseid vihjeid (nt laadimisindikaator) ja käsitleda võimalikke tagasipööramisi sujuvalt.
• Pakkuge visuaalset tagasisidet: Andke kasutajale teada, et uuendus on optimistlik ja et see võib muutuda. See aitab hallata ootusi ja vältida segadust, kui uuendus ebaõnnestub. Kaaluge peente animatsioonide või stiilide kasutamist optimistlike uuenduste visuaalseks eristamiseks.
• Käsitlege vigu sujuvalt: Rakendage robustne veakäsitlus, et tühistada optimistlikud uuendused, kui serverioperatsioon ebaõnnestub. Kuvage kasutajale informatiivseid veateateid ja pakkuge võimalusi operatsiooni uuesti proovimiseks.
• Tagage andmete järjepidevus: Pöörake erilist tähelepanu andmete järjepidevusele, eriti keerukate andmestruktuuride või mitme samaaegse uuenduse korral. Kaaluge tehnikate, nagu optimistlik lukustamine serveripoolel, kasutamist konfliksete uuenduste vältimiseks.
• Optimeerige jõudluse jaoks: Kuigi optimistlikud uuendused parandavad üldiselt tajutavat jõudlust, olge teadlik potentsiaalsetest jõudluse kitsaskohtadest, eriti suurte andmekogumitega töötamisel. Kasutage renderdamise optimeerimiseks tehnikaid nagu memoiseerimine ja virtualiseerimine.
• Testige põhjalikult: Testige oma optimistlike uuenduste rakendusi põhjalikult, et tagada nende ootuspärane käitumine erinevates stsenaariumides, sealhulgas edu, ebaõnnestumise ja erijuhtumite korral. Kaaluge testimisraamistike kasutamist, mis võimaldavad teil simuleerida võrgu latentsust ja vigu.

Globaalsed kaalutlused

Rakendades optimistlikke uuendusi globaalselt kasutatavates rakendustes, kaaluge järgmist:

• Võrgu latentsus: Maailma eri piirkondades esineb erinev võrgu latentsus. Optimistlikud uuendused muutuvad veelgi olulisemaks kõrge latentsusega piirkondades, et pakkuda reageerivat kasutajakogemust.
• Andmete paiknemine ja vastavus: Olge teadlik andmete paiknemise ja vastavusnõuetest erinevates riikides. Veenduge, et teie optimistlikud uuendused ei rikuks kogemata neid nõudeid. Näiteks vältige tundlike andmete salvestamist optimistlikus olekus, kui see rikub andmete paiknemise regulatsioone.
• Lokaliseerimine: Veenduge, et optimistlike uuendustega seotud visuaalne tagasiside või veateated oleksid erinevate keelte ja piirkondade jaoks korralikult lokaliseeritud.
• Juurdepääsetavus: Veenduge, et optimistlikke uuendusi tähistavad visuaalsed vihjed oleksid juurdepääsetavad puuetega kasutajatele. Kasutage ARIA atribuute ja semantilist HTML-i, et pakkuda sobivat konteksti ja teavet.
• Ajavööndid: Kui teie rakendus kuvab optimistlike uuendustega seotud kuupäevi või kellaaegu, veenduge, et need kuvatakse kasutaja kohalikus ajavööndis.

Alternatiivid useOptimistic'ule

Kuigi useOptimistic pakub mugavat viisi optimistlike uuenduste rakendamiseks, ei ole see ainus lähenemisviis. Muud alternatiivid hõlmavad:

• Manuaalne olekuhaldus: Saate rakendada optimistlikke uuendusi, kasutades standardseid useState ja useEffect hooke. See lähenemine annab teile rohkem kontrolli rakendamise üle, kuid nõuab rohkem koodi kirjutamist.
• Olekuhaldusraamistikud: Raamistikke nagu Redux, Zustand ja Jotai saab samuti kasutada optimistlike uuenduste rakendamiseks. Need raamistikud pakuvad keerukamaid olekuhaldusvõimalusi ja võivad olla abiks keerukate rakenduste puhul.
• GraphQL raamistikud: GraphQL raamistikud nagu Apollo Client ja Relay pakuvad sageli sisseehitatud tuge optimistlikele uuendustele oma vahemälumehhanismide kaudu.

Kokkuvõte

Reacti useOptimistic hook on väärtuslik tööriist reageerivate ja kaasahaaravate kasutajaliideste loomiseks. Optimistlike uuenduste abil saate pakkuda kasutajatele kohest tagasisidet ja luua sujuvama kogemuse. Pidage meeles, et peate hoolikalt kaaluma veakäsitlust, andmete järjepidevust ja globaalseid kaalutlusi, et tagada teie optimistlike uuenduste robustsus ja tõhusus.

Meisterdades useOptimistic hook'i, saate viia oma Reacti rakendused järgmisele tasemele ja pakkuda oma globaalsele publikule tõeliselt erakordset kasutajakogemust.