Udforsk Reacts useOptimistic hook for at skabe hurtigere og mere responsive brugergrænseflader ved at implementere optimistiske UI-opdateringer. Lær at bruge den med praktiske eksempler.
React useOptimistic: Byg Responsive Brugergrænseflader med Optimistiske Opdateringer
I nutidens landskab for webudvikling er brugeroplevelsen altafgørende. Brugere forventer, at applikationer er responsive og giver øjeblikkelig feedback. En teknik til markant at forbedre den opfattede ydeevne er gennem optimistiske UI-opdateringer. React 18 introducerede useOptimistic-hook'en, et kraftfuldt værktøj til at implementere denne teknik. Denne artikel dykker ned i konceptet om optimistisk UI, udforsker useOptimistic-hook'en i detaljer og giver praktiske eksempler, der hjælper dig med at udnytte den i dine React-applikationer.
Hvad er Optimistiske UI-opdateringer?
Optimistiske UI-opdateringer indebærer at opdatere brugergrænsefladen før man modtager bekræftelse fra serveren om, at en handling er fuldført med succes. I stedet for at vente på serverens svar opdateres brugergrænsefladen øjeblikkeligt, som om handlingen var vellykket. Dette skaber illusionen af øjeblikkelig respons, hvilket får applikationen til at føles meget hurtigere og mere flydende.
Overvej et scenarie, hvor en bruger klikker på en "Synes godt om"-knap på et socialt medieopslag. I en traditionel implementering ville applikationen sende en anmodning til serveren for at registrere "synes godt om" og vente på, at serveren svarer med en bekræftelse. I mellemtiden kan brugeren opleve en lille forsinkelse eller en visuel indikation af indlæsning. Med optimistiske opdateringer opdateres "Synes godt om"-knappen øjeblikkeligt for at afspejle, at brugeren har syntes godt om opslaget, uden at vente på serveren. Hvis serveranmodningen efterfølgende mislykkes (f.eks. på grund af en netværksfejl), kan brugergrænsefladen nulstilles til sin tidligere tilstand.
Fordele ved Optimistiske UI-opdateringer
- Forbedret Opfattet Ydeevne: Ved at give øjeblikkelig feedback får optimistiske opdateringer applikationen til at føles hurtigere og mere responsiv. Dette forbedrer den samlede brugeroplevelse, uanset den faktiske netværkslatens.
- Øget Brugerengagement: Øjeblikkelig visuel bekræftelse opfordrer brugerne til at interagere mere med applikationen. Reduktion af opfattede forsinkelser fører til en mere engagerende og behagelig oplevelse.
- Reduceret Brugerfrustration: At vente på serversvar kan være frustrerende for brugerne, især i situationer med langsomme eller upålidelige netværksforbindelser. Optimistiske opdateringer minimerer opfattede ventetider og reducerer brugerfrustration.
Introduktion til Reacts useOptimistic Hook
useOptimistic-hook'en forenkler implementeringen af optimistiske UI-opdateringer i React-applikationer. Den giver en måde at håndtere en lokal tilstand, der opdateres optimistisk, før serveren svarer, og som kan nulstilles, hvis serveranmodningen mislykkes.
Hook-signatur:
const [optimisticState, addOptimistic] = useOptimistic(initialState, updateFn);
initialState:Den indledende værdi af tilstanden. Dette er den værdi, tilstanden har, før nogen optimistiske opdateringer anvendes.updateFn:(Valgfri) En funktion, der tager den nuværende tilstand og den værdi, der sendes tiladdOptimistic, og returnerer den nye optimistiske tilstand. Hvis der ikke angives nogen funktion, vil den værdi, der sendes til `addOptimistic`, overskrive den aktuelle værdi af tilstanden.optimisticState:Den aktuelle værdi af den optimistiske tilstand. Dette er den tilstand, der skal bruges til at rendere brugergrænsefladen.addOptimistic:En funktion, der accepterer en værdi og udløser en optimistisk opdatering ved hjælp af `updateFn`, hvis den er angivet.
Praktiske Eksempler på useOptimistic
Eksempel 1: At synes godt om et opslag (Sociale medier)
Lad os vende tilbage til eksemplet med "Synes godt om"-knappen på sociale medier. Vi vil bruge useOptimistic til at opdatere antallet af "synes godt om" med det samme, når brugeren klikker på knappen.
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 øger eller mindsker
);
const handleClick = async () => {
const optimisticValue = !isLiked;
setIsLiked(optimisticValue); // Opdater lokal 'isLiked'-tilstand
addOptimistic(optimisticValue); // Øg eller mindsk optimisticLikes
try {
// Simuler et API-kald for at synes godt om/fjerne "synes godt om" for opslaget
await new Promise((resolve) => setTimeout(resolve, 500)); // Simuler netværksforsinkelse
// Opdater serverens tilstand her (f.eks. med fetch eller Axios)
// await api.likePost(postId, isLiked);
} catch (error) {
console.error('Error liking post:', error);
// Nulstil den optimistiske opdatering, hvis anmodningen mislykkes
setIsLiked(!optimisticValue);
addOptimistic(!optimisticValue);
}
};
return (
);
}
export default LikeButton;
Forklaring:
- Vi initialiserer
optimisticLikes-tilstanden med det indledende antal "synes godt om" ved hjælp afuseOptimistic(initialLikes). - Når der klikkes på knappen, kalder vi
addOptimistic()for at øge antallet af "synes godt om" med det samme. - Vi simulerer derefter et API-kald for at opdatere serveren.
- Hvis API-kaldet mislykkes, nulstiller vi den optimistiske opdatering ved at kalde
addOptimistic()igen med den modsatte værdi.
Eksempel 2: Tilføjelse af en kommentar (Blogindlæg)
Lad os overveje et andet scenarie: tilføjelse af en kommentar til et blogindlæg. Vi ønsker, at kommentaren vises med det samme uden at vente på, at serveren bekræfter oprettelsen.
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(), // Generer et midlertidigt ID
text: commentText,
author: 'User',
timestamp: new Date().toISOString(),
};
addOptimistic(prevComments => [...prevComments, newComment]);
setCommentText('');
try {
// Simuler et API-kald for at oprette kommentaren
await new Promise((resolve) => setTimeout(resolve, 500)); // Simuler netværksforsinkelse
// Her ville du lave API-kaldet, f.eks. api.addComment(postId, newComment);
// Antaget at API-kaldet returnerer kommentaren med et server-tildelt ID, ville du opdatere kommentar-ID'et
} catch (error) {
console.error('Error adding comment:', error);
// Nulstil den optimistiske opdatering, hvis anmodningen mislykkes
addOptimistic(prevComments => prevComments.filter(c => c.id !== newComment.id));
}
};
return (