React همیشه با روش های جدید برای نزدیک شدن به چیزها و همچنین قلاب های جدید در حال بهبود و تحول است ، که یکی از آنها که من از آن استفاده کرده ام ، قلاب استفاده شده است!
من در ابتدا با چرا/وقتی بهترین فرصت ها را برای استفاده از آن پیدا کردم ، تلاش کردم ، تیکتوک پاسخ داد:
چند هفته پیش که من در حال تماشای ویدئویی در مورد Tiktok بودم ، آن را دوست داشتم و فوراً دیدم که یک قلب به پست اضافه شده است. یک آگهی در پایان فیلم ظاهر شد و من بلافاصله پیمایش کردم. بازگشت به فیلم اما دیدم قلب از بین رفته است.
این زمانی است که به من ضربه زد:
هنگامی که من در ابتدا پست را دوست داشتم ، این بازخورد را به من داد که قلب روی ویدیوی ثبت شده اما خیلی سریع با موارد مسدود کردن تبلیغات دور می شود ، ممکن است موارد مشابه را ثبت نکرده باشد.
اکنون این ممکن است مسئله Tiktoks نباشد اما این باعث شد که من بفهمم چگونه می توانم از آن استفاده کنم!
قلاب چگونه کار می کند؟
“Useoptimistic یک قلاب React است که به شما امکان می دهد UI را به روز کنید.” – واکنش اسناد
این امکان را به شما می دهد که یک عمل انجام دهید و بهینه فرض می کند که همه چیز کار خواهد کرد. این عمل را با UI انجام می دهد ، بنابراین کاربر یک پاسخ فوری دریافت می کند.
اگر می خواهید کد را ببینید ، من آن را در StackBlitz قرار می دهم ، بنابراین به راحتی می توان آن را دنبال کرد.
من تمام کد را در پرونده app.tsx قرار داده ام.
https://stackblitz.com/edit/vitejs-vite-tt72lmea؟file=src٪2fapp.tsx
در این ویدیو می توانید نحوه عملکرد این برنامه را ببینید. دو پست اول که لایک می شوند ، بلافاصله آن را نشان می دهند حتی اگر تأخیر وجود داشته باشد! این به دلیل قلاب زراعی است!
توجه کنید که چگونه دو پست پایین بلافاصله به روز نمی شوند – این به این دلیل است که آنها از Useopmimistic استفاده نمی کنند ، بنابراین قبل از بروزرسانی منتظر سرور هستند.
import { useOptimistic, startTransition } from "react";
نیاز به وارد کردن آن و شروع کار
const [optimisticPosts, addOptimisticPost] = useOptimistic(
posts,
این قسمت “حالت خوش بینانه” را تنظیم می کند ، به این معنی که UI را بلافاصله قبل از انتظار برای داده های واقعی از سرور به روز می کند.
// Apply the optimistic update immediately
startTransition(() => {
addOptimisticPost(postId);
});
این به React می گوید: “سلام ، UI را فوراً به روز کنید ، اما این را بالاترین اولویت نکنید.” این مانع از مسدود کردن UI سایر به روزرسانی های مهم می شود و تجربه ای صاف را تضمین می کند.
حال اگر می خواستید ، به طور بالقوه می توانید برخی از ویژگی های اضافی را اضافه کنید که در صورت عدم موفقیت چیزی باعث می شود. به این ترتیب ، ما وضعیت اشتباهی را نشان نمی دهیم ، مانند حذف “مانند” اگر API شکست بخورد.
(GIF آسان نیست که ببینید بنابراین اگر می خواهید ویدیوی آن را ببینید ، می توانید آن را در این موضوع توییتر در اینجا پیدا کنید https://x.com/dthompsondev/status/1884821001671749971)
راستش ، این سرگرم کننده بود که با آنها آزمایش و آزمایش کنید!
به من اطلاع دهید که آیا این به شما کمک کرده است قلاب های زراعی را درک کنید و به من اطلاع دهید که باید یک شکست فنی بعدی را انجام دهم!
من را در تمام سیستم عامل های Dthompsondev دنبال کنید
