Optimistik UI yangilanishlarini joriy qilish orqali tezroq va sezgirroq foydalanuvchi interfeyslarini yaratish uchun React'ning useOptimistic hook'ini o'rganing. Amaliy misollar bilan undan qanday foydalanishni bilib oling.
React useOptimistic: Optimistik yangilanishlar bilan sezgir foydalanuvchi interfeyslarini yaratish
Bugungi veb-dasturlash landshaftida foydalanuvchi tajribasi eng muhim o'rinni egallaydi. Foydalanuvchilar ilovalarning sezgir bo'lishini va darhol javob berishini kutishadi. Idrok etilgan unumdorlikni sezilarli darajada yaxshilash usullaridan biri bu optimistik UI yangilanishlaridir. React 18 bu usulni amalga oshirish uchun kuchli vosita bo'lgan useOptimistic hook'ini taqdim etdi. Ushbu maqolada optimistik UI tushunchasi chuqur o'rganiladi, useOptimistic hook'i batafsil ko'rib chiqiladi va uni React ilovalaringizda qo'llashga yordam beradigan amaliy misollar keltiriladi.
Optimistik UI yangilanishlari nima?
Optimistik UI yangilanishlari foydalanuvchi interfeysini serverdan harakat muvaffaqiyatli bajarilganligi haqida tasdiq kelishidan oldin yangilashni o'z ichiga oladi. Server javobini kutish o'rniga, UI darhol harakat muvaffaqiyatli bo'lgandek yangilanadi. Bu bir zumda javob berish illyuziyasini yaratadi va ilovani ancha tezroq va silliqroq his qilishiga olib keladi.
Foydalanuvchi ijtimoiy tarmoqdagi postda "Like" tugmasini bosgan stsenariyni ko'rib chiqing. An'anaviy amalga oshirishda ilova serverga "like"ni ro'yxatdan o'tkazish uchun so'rov yuboradi va serverdan tasdiq javobini kutadi. Bu vaqt ichida foydalanuvchi biroz kechikish yoki vizual yuklanish belgisini sezishi mumkin. Optimistik yangilanishlar bilan "Like" tugmasi serverni kutmasdan, foydalanuvchining postni yoqtirganini aks ettirish uchun darhol yangilanadi. Agar server so'rovi keyinchalik muvaffaqiyatsiz bo'lsa (masalan, tarmoq xatosi tufayli), UI o'zining avvalgi holatiga qaytarilishi mumkin.
Optimistik UI yangilanishlarining afzalliklari
- Idrok etilgan unumdorlikni oshirish: Darhol javob berish orqali optimistik yangilanishlar ilovani tezroq va sezgirroq his qilishiga yordam beradi. Bu haqiqiy tarmoq kechikishidan qat'i nazar, umumiy foydalanuvchi tajribasini yaxshilaydi.
- Foydalanuvchi faolligini oshirish: Bir zumda vizual tasdiqlash foydalanuvchilarni ilova bilan ko'proq o'zaro aloqada bo'lishga undaydi. Idrok etilgan kechikishlarni kamaytirish yanada qiziqarli va yoqimli tajribaga olib keladi.
- Foydalanuvchi noroziligini kamaytirish: Server javoblarini kutish foydalanuvchilar uchun, ayniqsa sekin yoki ishonchsiz tarmoq ulanishlari bo'lgan vaziyatlarda, asabiylashtirishi mumkin. Optimistik yangilanishlar idrok etilgan kutish vaqtlarini minimallashtiradi va foydalanuvchi noroziligini kamaytiradi.
React'ning useOptimistic Hook'i bilan tanishuv
useOptimistic hook'i React ilovalarida optimistik UI yangilanishlarini amalga oshirishni soddalashtiradi. U server javob berishidan oldin optimistik ravishda yangilanadigan va server so'rovi muvaffaqiyatsiz bo'lsa, qaytarilishi mumkin bo'lgan mahalliy holatni boshqarish usulini taqdim etadi.
Hook tuzilishi:
const [optimisticState, addOptimistic] = useOptimistic(initialState, updateFn);
initialState:Holatning dastlabki qiymati. Bu optimistik yangilanishlar qo'llanilishidan oldin holat saqlaydigan qiymat.updateFn:(Ixtiyoriy) Joriy holatni vaaddOptimistic'ga uzatilgan qiymatni qabul qilib, yangi optimistik holatni qaytaradigan funksiya. Agar funksiya uzatilmasa, `addOptimistic`'ga uzatilgan qiymat holatning joriy qiymatini bekor qiladi.optimisticState:Optimistik holatning joriy qiymati. Bu UI'ni render qilish uchun ishlatilishi kerak bo'lgan holat.addOptimistic:Qiymatni qabul qiladigan va agar taqdim etilgan bo'lsa, `updateFn` yordamida optimistik yangilanishni ishga tushiradigan funksiya.
useOptimistic'ning amaliy misollari
1-misol: Postga "like" bosish (Ijtimoiy tarmoq)
Ijtimoiy tarmoqdagi "Like" tugmasi misoliga qaytaylik. Foydalanuvchi tugmani bosganda "like"lar sonini darhol yangilash uchun useOptimistic'dan foydalanamiz.
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 oshiradi yoki kamaytiradi
);
const handleClick = async () => {
const optimisticValue = !isLiked;
setIsLiked(optimisticValue); // Mahalliy 'isLiked' holatini yangilash
addOptimistic(optimisticValue); // optimisticLikes'ni oshirish yoki kamaytirish
try {
// Postga like/unlike qo'yish uchun API so'rovini simulyatsiya qilish
await new Promise((resolve) => setTimeout(resolve, 500)); // Tarmoq kechikishini simulyatsiya qilish
// Server holatini shu yerda yangilang (masalan, fetch yoki Axios yordamida)
// await api.likePost(postId, isLiked);
} catch (error) {
console.error('Error liking post:', error);
// Agar so'rov muvaffaqiyatsiz bo'lsa, optimistik yangilanishni bekor qilish
setIsLiked(!optimisticValue);
addOptimistic(!optimisticValue);
}
};
return (
);
}
export default LikeButton;
Tushuntirish:
- Biz
optimisticLikesholatiniuseOptimistic(initialLikes)yordamida dastlabki "like"lar soni bilan initsializatsiya qilamiz. - Tugma bosilganda, "like"lar sonini darhol oshirish uchun
addOptimistic()'ni chaqiramiz. - Keyin serverni yangilash uchun API so'rovini simulyatsiya qilamiz.
- Agar API so'rovi muvaffaqiyatsiz bo'lsa, teskari qiymat bilan
addOptimistic()'ni yana chaqirib, optimistik yangilanishni bekor qilamiz.
2-misol: Fikr qo'shish (Blog posti)
Yana bir stsenariyni ko'rib chiqaylik: blog postiga fikr qo'shish. Biz fikrning server tomonidan yaratilganligini tasdiqlashini kutmasdan darhol paydo bo'lishini istaymiz.
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(), // Vaqtinchalik ID yaratish
text: commentText,
author: 'User',
timestamp: new Date().toISOString(),
};
addOptimistic(prevComments => [...prevComments, newComment]);
setCommentText('');
try {
// Fikrni yaratish uchun API so'rovini simulyatsiya qilish
await new Promise((resolve) => setTimeout(resolve, 500)); // Tarmoq kechikishini simulyatsiya qilish
// Bu yerda siz API so'rovini yuborishingiz kerak, masalan, api.addComment(postId, newComment);
// API so'rovi server tomonidan tayinlangan ID bilan fikrni qaytaradi deb faraz qilsak, siz fikr ID'sini yangilaysiz
} catch (error) {
console.error('Error adding comment:', error);
// Agar so'rov muvaffaqiyatsiz bo'lsa, optimistik yangilanishni bekor qilish
addOptimistic(prevComments => prevComments.filter(c => c.id !== newComment.id));
}
};
return (