Padidinkite „UX“ akimirksniu su naujuoju naudojimo optimistiniu kabliu

Ar kada nors spustelėjote mygtuką ir laukėte, kol kažkas nutiks, o puslapis tiesiog sėdėjo ten nieko nedaręs? Dėl šio vėlavimo programa gali jaustis vangiai. Ar nebūtų puiku, jei vartotojo sąsaja reaguotų akimirksniu, net prieš atnaujinant faktinius duomenis?

Štai kur reaguoti useOptimistic Kablys ateina! Pristatoma 18.2 „React“, tai leidžia vartotojams nedelsiant pateikti greitą atsiliepimą, parodant numatomą rezultatą – tai jūsų programa jaučiasi greitai ir reaguoja. Užuot laukę tinklo užklausos, bus užpildyta, useOptimistic Laikinai atnaujina vartotojo sąsają su numatyta būsena – technika, vadinama optimistine UI.

Šiame tinklaraštyje mes ištirsime, kaip useOptimistic Darbai, kodėl tai naudinga ir kaip galite jį įgyvendinti, kad pagerintumėte vartotojo patirtį jūsų „React“ programose. Pasinerkime!

Supratimas apie naudojimą optimistiškai

Sintaksė:

const (optimisticState, addoptimistinis) = useOptimistinis (būsena, atnaujinimasFn);

• Būsena – pradinė būsena prieš bet kokius optimistinius atnaujinimus.
• „UpdateFn“ – funkcija, kuri užima dabartinę būseną ir optimistinę vertę, sujungia jas ir grąžina naują būseną.
• „OptitistState“ – būsena, kuri optimistiškai atnaujina prieš patvirtinant „Async“ veiksmą.
• Addoptimistinė – funkcija, kuria skambinate, kad pritaikytumėte optimistinį atnaujinimą.

Kodėl verta naudoti optimistišką?

Kurdami interaktyvias programas, vartotojai tikisi greito atsiliepimų, kai imsis veiksmų. Tačiau tinklo vėlavimas gali sukelti vėlavimą tarp vartotojo veiksmų ir duomenų atnaujinimų, todėl patirti varginančią patirtį.

Naudodami „UseOptimistic“, galite:

• Pateikite neatidėliotinų UI atsiliepimų, nelaukdami atsakymo iš serverio.
• Pagerinti suvokiamą rezultatą ir reagavimą.
• Sumažinkite UI sudėtingų pakrovimo būsenų poreikį.

Puikus to pavyzdys yra knygų žymėjimo funkcija tinklaraščio programoje. Pažiūrėkime, kaip mes galime tai įgyvendinti.

Pavyzdys: žymėjimo pranešimai

1. Pradinė sąranka

Pirmiausia apibrėžiame daugybę tinklaraščio įrašų ir naudojame „Usestate“ savo būsenai valdyti:

const (posts, setPosts) = useState((
  { id: 1, title: "React Optimistic UI", bookmarked: false },
  { id: 2, title: "Understanding React Hooks", bookmarked: false },
));

2. Naudojimo optimistikos įgyvendinimas

Mes inicijuojame naudojimo optimistiškumą naudodami dabartinę būseną ir apibrėžiame atnaujinimo funkciją, kad optimistiškai perjungtume žymos būseną:

const (optimisticPosts, addOptimisticPost) = useOptimistic(
  posts,
  (state, postId) => {
    return state.map((post) =>
      post.id === postId ? { ...post, bookmarked: !post.bookmarked } : post
    );
  }
);

Prieš pateikiant tikrąją API užklausą, ši funkcija perjungs pažymėtą būseną vartotojo sąsajoje.

3. Pažymėjimo paspaudimų tvarkymas

Kai vartotojas spustelėja žymę mygtuką, prieš atlikdami tikrąjį serverio atnaujinimą optimistiškai atnaujiname vartotojo sąsają:

const handleBookmark = async (postId) => {
  startTransition(async () => {
    addOptimisticPost(postId);

    try {
      const response = await fetch("/posts/bookmark", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ postId }),
      });

      if (!response.ok) throw new Error("Failed to update bookmark");

      setPosts((currentPosts) =>
        currentPosts.map((post) =>
          post.id === postId ? { ...post, bookmarked: !post.bookmarked } : post
        )
      );
      console.log("Bookmark updated on server");
    } catch (error) {
      console.error("Failed to update bookmark:", error);
      // Revert UI state on failure
      addOptimisticPost(postId);
    }
  });
};

Štai kas vyksta žingsnis po žingsnio:

1. Pridėti „OptimisticPost“ („PostID“) funkciją iškviečiama akimirksniu atnaujinti vartotojo sąsają.
2. Tinklo užklausa siunčiama atnaujinti žymės būseną užpakalinėje dalyje.
3. Jei užklausa sėkminga, tikroji būsena atnaujinama naudojant „SetPosts“ ().
4. Jei užklausa nepavyksta, UI būsena grąžinama, kad atspindėtų tikrąją serverio būseną.

4. PAŠTŲ PASTABOS

Mes naudojame „OptimisticPosts“ vartotojo sąsają, užtikrindami greitą atsiliepimą, kai vartotojai sąveikauja su žymės mygtuku:

{optimisticPosts.map((post) => (
  

    
{post.title}
     handleBookmark(post.id)}>
      {post.bookmarked ? "Unbookmark" : "Bookmark"}
    
  

))}

Kada naudoti naudojimą optimistišką

Apsvarstykite galimybę naudoti naudojimą optimistiškai, kai:

• Vartotojo veiksmai labai tikėtina, kad pasiseks (pvz., Patinka įrašas, pridedant elementą prie mėgstamiausių).
• Norite pateikti momentinius UI atnaujinimus, nelaukdami atsakymo pagrindinio atsakymo.
• Laikinosios neteisingos būsenos pasekmės yra minimalios (pvz.

UseOptimistinių apribojimų

Nors naudojama optimistika yra naudinga, svarbu žinoti apie savo apribojimus:

• Jei serverio atnaujinimas nepavyksta, turėsite tinkamai tvarkyti klaidų būsenas (pvz.
• Tai netinka tais atvejais, kai reikalingas griežtas duomenų tikslumas (pvz., Apdorojimo mokėjimai).

Pasinaudodami naudojimu optimistiškai, galite žymiai pagerinti savo „React“ programų reagavimą. Pabandykite tai integruoti į savo projektus ir pamatyti skirtumą, kurį jis daro! 🚀

Išvada

Useoptimistika yra galinga priemonė sklandesnei UI sąveikai sukurti. Mūsų pavyzdyje tai užtikrina, kad žymėjimo pranešimai jaustųsi akimirksniu, kartu sinchronizuojant pokyčius su pagrindine. Pateikdamas tiesioginį vaizdinį grįžtamąjį ryšį, jis labai padidina vartotojo patirtį ir leidžia programas jaustis reaguojančiomis.

Neatnaujindami, vartotojai gali pastebėti pastebimą vėlavimą spustelėti žymės mygtuką ir pamatyti UI atnaujinimą. Įdiegę optimistinius atnaujinimus, mes priverčiame mūsų programą jaustis greičiau ir interaktyvesne.