درود دوستان 🖐️ من امیررضا ریاحی هستم، نویسنده جدید دیتی. تو این پست قراره با هم یاد بگیریم که چرا و هدف از قرار دادن Suspense کامپوننتها در برنامههای ریاکتی چیه. این پست از مجموعه پستهای ریاکت ۱۰۱ هست که شامل مجموعهای از پستهای کوتاه و کاربردی ریاکتی میشه.
Suspense کامپوننت چیه؟ 🤔
یکی از چالشهای مشترک برنامهنویسها افزایش سرعت و بهینه کردن پروژشونه که تاثیر زیادی روی Performance برنامه داره. فرض کنین برای یک دکمه رویداد کلیک تعیین کردین و بعد از کلیک قراره درخواست ارسال بشه (مثلا سابمیت کردن فرم.) خب در صورت عدم استفاده از Suspense کامپوننت ها، اولاً کاربر نمیدونه که پشت صحنه درخواست اجرا میشه، دوماً باید منتظر بمونه تا درخواست تموم بشه که منطقی نیست. اما من یه راه بهتر سراغ دارم ✌ اونم استفاده از Suspense کامپوننتها که به ما این امکان رو میده تا وقتی که درخواست انجام و تموم بشه، یک UI جایگزین (Fallback) نمایش بدیم و از نمایش دادههای ناقص یا بارگذاری ناگهانی جلوگیری کنیم. این کار تجربه کاربری بهتری ایجاد میکنه و باعث میشه که کاربران احساس نکنن صفحه دچار لگ یا تاخیر شده.
نحوه استفاده از Suspense کامپوننت ها؟ 🧐
استفاده از Suspense کامپوننت خیلی راحتتر از اون چیزیه که فکرشو میکنید کافیه به شکل زیر عمل کنین و تمام !🎯
<Suspense fallback={<Loading />}> <Test/> </Suspense>
همونطور که میبینید کامپوننت Suspense رو فراخوندیم و این کامپوننت یک پراپرتی fallback میگیره. درواقع fallback همون کامپوننتی هستش که میخوایم تا پایان عملیات کامپوننت اصلیمون که Test هست اجرا بشه. در کد بالا تا وقتی که عملیات کامپوننت Test تموم بشه و قابل نمایش دادن بشه، کامپوننت Loading اجرا میشه. بریم سراغ مثال 🚀
فرض کنین میخوایم آلبومهای یک آرتیست رو نمایش بدیم. طبیعتا این درخواست برای مدتی طول میکشه پس اینجاست که Suspense کامپوننت وارد میشه ‼
در کد بالا ما یک دکمه داریم که به محض کلیک شدن، کامپوننت Albums که id آرتیست رو بعنوان Prop میگیره تا پردازش رو سمت سرور انجام بده اجرا میشه و آلبومها رو نمایش میده. همونطور که میبینید ما از Suspense کامپوننت استفاده کردیم تا بتونیم UI خودمون رو مدیریت کنیم (روان تر کنیم) و تا وقتی که پردازش در کامپوننت Albums تموم میشه، کامپوننت Loading رو فرا میخونیم و به محض دریافت اطلاعات، کامپوننت Loading بطور خودکار بسته میشه و آلبوم ها نمایش داده میشن 💯⚠️ برای مثال های بیشتر میتونین به مراجعه کنین.
خب دوستان رسیدیم به پایان یکی دیگه از پست های . امیدوارم استفاده کرده باشید و یادتون نره اگر سوالی دارید میتونید زیر این پست کامنت کنین حتما پاسخگو خواهم بود ☘️