Avastage Reacti useOptimistic hook, et luua kiiremaid ja reageerimisvõimelisemaid kasutajaliideseid optimistlike uuendustega. Õppige seda kasutama praktiliste näidete varal.
Reacti useOptimistic: Reageerimisvõimeliste kasutajaliideste loomine optimistlike uuendustega
Tänapäeva veebiarenduse maastikul on kasutajakogemus esmatähtis. Kasutajad ootavad, et rakendused oleksid reageerimisvõimelised ja pakuksid kohest tagasisidet. Üks tehnika tajutava jõudluse oluliseks parandamiseks on optimistlikud kasutajaliidese uuendused. React 18 tõi turule useOptimistic hook'i, mis on võimas tööriist selle tehnika rakendamiseks. See artikkel süveneb optimistliku kasutajaliidese kontseptsiooni, uurib põhjalikult useOptimistic hook'i ja pakub praktilisi näiteid, mis aitavad teil seda oma Reacti rakendustes ära kasutada.
Mis on optimistlikud kasutajaliidese uuendused?
Optimistlikud kasutajaliidese uuendused hõlmavad kasutajaliidese uuendamist enne serverilt kinnituse saamist, et toiming on edukalt lõpule viidud. Serveri vastuse ootamise asemel uuendatakse kasutajaliidest kohe, justkui oleks toiming õnnestunud. See loob illusiooni kohesest reageerimisvõimest, muutes rakenduse palju kiiremaks ja sujuvamaks.
Kujutage ette stsenaariumi, kus kasutaja klõpsab sotsiaalmeedia postitusel nuppu "Meeldib". Traditsioonilises rakenduses saadaks rakendus serverile päringu meeldimise registreerimiseks ja ootaks serveri vastust kinnitusega. Selle aja jooksul võib kasutaja kogeda kerget viivitust või visuaalset laadimise märguannet. Optimistlike uuendustega uuendatakse "Meeldib" nuppu kohe, et kajastada, et kasutajale postitus meeldis, ilma serverit ootamata. Kui serveri päring hiljem ebaõnnestub (nt võrguvea tõttu), saab kasutajaliidese taastada selle eelmisesse olekusse.
Optimistlike kasutajaliidese uuenduste eelised
- Parem tajutav jõudlus: Kohest tagasisidet pakkudes muudavad optimistlikud uuendused rakenduse kiiremaks ja reageerimisvõimelisemaks. See parandab üldist kasutajakogemust, olenemata tegelikust võrgu latentsusest.
- Suurenenud kasutajate kaasatus: Kohene visuaalne kinnitus julgustab kasutajaid rakendusega rohkem suhtlema. Tajutavate viivituste vähendamine toob kaasa kaasahaaravama ja nauditavama kogemuse.
- Vähenenud kasutajate frustratsioon: Serveri vastuste ootamine võib olla kasutajatele masendav, eriti aeglase või ebausaldusväärse võrguühenduse korral. Optimistlikud uuendused minimeerivad tajutavaid ooteaegu ja vähendavad kasutajate frustratsiooni.
Reacti useOptimistic hook'i tutvustus
useOptimistic hook lihtsustab optimistlike kasutajaliidese uuenduste rakendamist Reacti rakendustes. See pakub viisi hallata kohalikku olekut, mida uuendatakse optimistlikult enne serveri vastust ja mida saab tagasi pöörata, kui serveri päring ebaõnnestub.
Hook'i signatuur:
const [optimisticState, addOptimistic] = useOptimistic(initialState, updateFn);
initialState:Oleku algväärtus. See on väärtus, mida olek hoiab enne optimistlike uuenduste rakendamist.updateFn:(Valikuline) Funktsioon, mis võtab praeguse oleku jaaddOptimistic-ule edastatud väärtuse ning tagastab uue optimistliku oleku. Kui funktsiooni ei edastata, kirjutabaddOptimistic-ule edastatud väärtus oleku praeguse väärtuse üle.optimisticState:Optimistliku oleku praegune väärtus. See on olek, mida tuleks kasutada kasutajaliidese renderdamiseks.addOptimistic:Funktsioon, mis aktsepteerib väärtuse ja käivitab optimistliku uuenduse, kasutadesupdateFn-i, kui see on olemas.
useOptimistic'u praktilised näited
Näide 1: Postituse meeldivaks märkimine (sotsiaalmeedia)
Vaatame uuesti sotsiaalmeedia "Meeldib" nupu näidet. Kasutame useOptimistic'ut, et uuendada meeldimiste arvu kohe, kui kasutaja nupule klõpsab.
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 suurendab või vähendab
);
const handleClick = async () => {
const optimisticValue = !isLiked;
setIsLiked(optimisticValue); // Uuenda kohalikku 'isLiked' olekut
addOptimistic(optimisticValue); // Suurenda või vähenda optimisticLikes väärtust
try {
// Simuleeri API-kutset postituse meeldivaks/mittemeeldivaks märkimiseks
await new Promise((resolve) => setTimeout(resolve, 500)); // Simuleeri võrgu latentsust
// Uuenda siin serveri olekut (nt kasutades fetchi või Axiost)
// await api.likePost(postId, isLiked);
} catch (error) {
console.error('Viga postituse meeldivaks märkimisel:', error);
// Pööra optimistlik uuendus tagasi, kui päring ebaõnnestub
setIsLiked(!optimisticValue);
addOptimistic(!optimisticValue);
}
};
return (
);
}
export default LikeButton;
Selgitus:
- Me lähtestame
optimisticLikesoleku algse meeldimiste arvuga, kasutadesuseOptimistic(initialLikes). - Kui nupule klõpsatakse, kutsume välja
addOptimistic(), et meeldimiste arvu kohe suurendada. - Seejärel simuleerime API-kutset serveri uuendamiseks.
- Kui API-kutse ebaõnnestub, pöörame optimistliku uuenduse tagasi, kutsudes uuesti välja
addOptimistic()vastupidise väärtusega.
Näide 2: Kommentaari lisamine (blogipostitus)
Vaatame teist stsenaariumi: kommentaari lisamine blogipostitusele. Soovime, et kommentaar ilmuks kohe, ootamata serveri kinnitust selle loomise kohta.
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(), // Genereeri ajutine ID
text: commentText,
author: 'User',
timestamp: new Date().toISOString(),
};
addOptimistic(prevComments => [...prevComments, newComment]);
setCommentText('');
try {
// Simuleeri API-kutset kommentaari loomiseks
await new Promise((resolve) => setTimeout(resolve, 500)); // Simuleeri võrgu latentsust
// Siin teeksid API-kutse, nt api.addComment(postId, newComment);
// Eeldades, et API-kutse tagastab kommentaari serveri poolt määratud ID-ga, uuendaksid kommentaari ID-d
} catch (error) {
console.error('Viga kommentaari lisamisel:', error);
// Pööra optimistlik uuendus tagasi, kui päring ebaõnnestub
addOptimistic(prevComments => prevComments.filter(c => c.id !== newComment.id));
}
};
return (