Tutustu Reactin useOptimistic-hookiin ja luo nopeampia, responsiivisempia käyttöliittymiä optimististen päivitysten avulla. Opi sen käyttö käytännön esimerkein.
React useOptimistic: Responsiivisten käyttöliittymien rakentaminen optimistisilla päivityksillä
Nykypäivän verkkokehityksessä käyttäjäkokemus on ensisijaisen tärkeää. Käyttäjät odottavat sovellusten olevan responsiivisia ja antavan välitöntä palautetta. Yksi tekniikka, jolla voidaan merkittävästi parantaa havaittua suorituskykyä, ovat optimistiset käyttöliittymäpäivitykset. React 18 esitteli useOptimistic-hookin, joka on tehokas työkalu tämän tekniikan toteuttamiseen. Tämä artikkeli syventyy optimistisen käyttöliittymän käsitteeseen, tutkii useOptimistic-hookia yksityiskohtaisesti ja tarjoaa käytännön esimerkkejä, jotka auttavat sinua hyödyntämään sitä React-sovelluksissasi.
Mitä ovat optimistiset käyttöliittymäpäivitykset?
Optimistiset käyttöliittymäpäivitykset tarkoittavat käyttöliittymän päivittämistä ennen kuin palvelimelta on saatu vahvistus toimenpiteen onnistumisesta. Sen sijaan, että odotettaisiin palvelimen vastausta, käyttöliittymä päivitetään välittömästi ikään kuin toimenpide olisi onnistunut. Tämä luo illuusion välittömästä reaktiivisuudesta, mikä saa sovelluksen tuntumaan paljon nopeammalta ja sulavammalta.
Kuvitellaan tilanne, jossa käyttäjä napsauttaa "Tykkää"-painiketta sosiaalisen median julkaisussa. Perinteisessä toteutuksessa sovellus lähettäisi pyynnön palvelimelle tykkäyksen rekisteröimiseksi ja odottaisi palvelimen vastausta vahvistuksineen. Tänä aikana käyttäjä saattaa kokea pienen viiveen tai nähdä latausindikaattorin. Optimistisilla päivityksillä "Tykkää"-painike päivittyy välittömästi näyttämään, että käyttäjä on tykännyt julkaisusta, odottamatta palvelinta. Jos palvelinpyyntö myöhemmin epäonnistuu (esim. verkkoyhteysvirheen vuoksi), käyttöliittymä voidaan palauttaa edelliseen tilaansa.
Optimististen käyttöliittymäpäivitysten edut
- Parempi havaittu suorituskyky: Antamalla välitöntä palautetta optimistiset päivitykset saavat sovelluksen tuntumaan nopeammalta ja responsiivisemmalta. Tämä parantaa yleistä käyttäjäkokemusta todellisesta verkon viiveestä riippumatta.
- Parempi käyttäjien sitoutuminen: Välitön visuaalinen vahvistus kannustaa käyttäjiä vuorovaikuttamaan enemmän sovelluksen kanssa. Havaittujen viiveiden vähentäminen johtaa sitouttavampaan ja miellyttävämpään kokemukseen.
- Vähentynyt käyttäjän turhautuminen: Palvelinvastausten odottaminen voi olla turhauttavaa käyttäjille, erityisesti hitaiden tai epäluotettavien verkkoyhteyksien tapauksessa. Optimistiset päivitykset minimoivat havaitut odotusajat ja vähentävät käyttäjän turhautumista.
Esittelyssä Reactin useOptimistic-hook
useOptimistic-hook yksinkertaistaa optimististen käyttöliittymäpäivitysten toteuttamista React-sovelluksissa. Se tarjoaa tavan hallita paikallista tilaa, joka päivitetään optimistisesti ennen palvelimen vastausta ja joka voidaan palauttaa, jos palvelinpyyntö epäonnistuu.
Hookin syntaksi:
const [optimisticState, addOptimistic] = useOptimistic(initialState, updateFn);
initialState:Tilan alkuarvo. Tämä on arvo, joka tilalla on ennen optimististen päivitysten soveltamista.updateFn:(Valinnainen) Funktio, joka ottaa nykyisen tilan jaaddOptimistic-funktiolle välitetyn arvon ja palauttaa uuden optimistisen tilan. Jos funktiota ei anneta,addOptimistic-funktiolle välitetty arvo korvaa tilan nykyisen arvon.optimisticState:Optimistisen tilan nykyinen arvo. Tämä on tila, jota tulisi käyttää käyttöliittymän renderöintiin.addOptimistic:Funktio, joka hyväksyy arvon ja käynnistää optimistisen päivityksen käyttäenupdateFn-funktiota, jos se on määritelty.
Käytännön esimerkkejä useOptimistic-hookista
Esimerkki 1: Julkaisusta tykkääminen (Sosiaalinen media)
Palataanpa sosiaalisen median "Tykkää"-painikkeen esimerkkiin. Käytämme useOptimistic-hookia päivittääksemme tykkäysten määrän välittömästi, kun käyttäjä napsauttaa painiketta.
import React, { useState, useOptimistic } from 'react';
function LikeButton({ postId, initialLikes }) {
const [isLiked, setIsLiked] = useState(false);
const [optimisticLikes, addOptimistic] = useOptimistic(
initialLikes,
(state, newLike) => (newLike ? state + 1 : state - 1) //updateFn kasvattaa tai vähentää
);
const handleClick = async () => {
const optimisticValue = !isLiked;
setIsLiked(optimisticValue); // Päivitä paikallinen 'isLiked'-tila
addOptimistic(optimisticValue); // Kasvata tai vähennä optimisticLikes
try {
// Simuloi API-kutsua julkaisun tykkäämiseksi/tykkäyksen poistamiseksi
await new Promise((resolve) => setTimeout(resolve, 500)); // Simuloi verkon viivettä
// Päivitä palvelimen tila tässä (esim. fetchillä tai Axiosilla)
// await api.likePost(postId, isLiked);
} catch (error) {
console.error('Error liking post:', error);
// Peruuta optimistinen päivitys, jos pyyntö epäonnistuu
setIsLiked(!optimisticValue);
addOptimistic(!optimisticValue);
}
};
return (
);
}
export default LikeButton;
Selitys:
- Alustamme
optimisticLikes-tilan tykkäysten alkuperäisellä määrällä käyttämälläuseOptimistic(initialLikes). - Kun painiketta napsautetaan, kutsumme
addOptimistic()-funktiota kasvattaaksemme tykkäysten määrää välittömästi. - Sitten simuloimme API-kutsua palvelimen päivittämiseksi.
- Jos API-kutsu epäonnistuu, peruutamme optimistisen päivityksen kutsumalla
addOptimistic()-funktiota uudelleen vastakkaisella arvolla.
Esimerkki 2: Kommentin lisääminen (Blogijulkaisu)
Tarkastellaan toista skenaariota: kommentin lisääminen blogijulkaisuun. Haluamme, että kommentti ilmestyy näkyviin välittömästi ilman, että joudumme odottamaan palvelimen vahvistusta sen luomisesta.
import React, { useState, useOptimistic } from 'react';
function CommentForm({ postId }) {
const [commentText, setCommentText] = useState('');
const [optimisticComments, addOptimistic] = useOptimistic([]);
const handleSubmit = async (e) => {
e.preventDefault();
if (!commentText.trim()) return;
const newComment = {
id: Date.now(), // Generoi väliaikainen ID
text: commentText,
author: 'Käyttäjä',
timestamp: new Date().toISOString(),
};
addOptimistic(prevComments => [...prevComments, newComment]);
setCommentText('');
try {
// Simuloi API-kutsua kommentin luomiseksi
await new Promise((resolve) => setTimeout(resolve, 500)); // Simuloi verkon viivettä
// Tässä tekisit API-kutsun, esim. api.addComment(postId, newComment);
// Olettaen, että API-kutsu palauttaa kommentin palvelimen antamalla ID:llä, päivittäisit kommentin ID:n
} catch (error) {
console.error('Error adding comment:', error);
// Peruuta optimistinen päivitys, jos pyyntö epäonnistuu
addOptimistic(prevComments => prevComments.filter(c => c.id !== newComment.id));
}
};
return (