تو برنامه نویسی از روش های مختلفی میشه یه مشکلی رو حل کرد فرقی نمیکنه چه زبان یا فریم ورکی باشه جاوااسکریپت، پایتون، ری اکت و یا هر زبان و فریم ورک دیگه ای. وقتی به کد یکی دیگه نگاه میکنی همیشه یه چیز جدیدی هست که بتونی ازش یاد بگیری.
ری اکت روز به روز در حال پیشرفت و محبوبیت بیشتره و روش های مختلفی برای حل مسائل تو این "من میگم کتابخونه ولی شما بخونید فریم ورک قدرتمند" وجود داره خوب بیایم به 7 تا نکته و ترفند که تو کار با ری اکت کمکتون نیکنه یه نگاهی بنداریم.
برای آموزش رایگان به این لینک برید:
کانال یوتیوب yasharhabibimedia
حتما واسه شما هم پیش اومده که می خواین برفرض استایل یه دراپ دان(Dropdown) یا یه چیزی مثل این رو دیباگ کنید اون وقت تا دراپ دان (Dropdown) رو باز می کنید میاید روش رایت-کلیک(right-click) کنید رو ایتم های اون و اینسپکت المنت(inspect element) رو بزنید یهو بسته میشه خود به خود و نمیتونید اینسپکتش(inspect) کنید.
خوب اینم یه راه حل ساده:
1. کنسول(console) مرورگرتون رو باز کنید.
2. دستور زیر رو بنویسید تو کنسول(console) و اجراش کنید.
setTimeout(() => { debugger; }, 3000)
3. حالا دارپ دانی(Dropdown) رو که می خواین دیباگش کنید رو باز کنید.
یه وقتایی هست که لازمه مقدار اولیه استیت(state) رو از یه متغیری یا فانکشنی محاسبه کنید و مقدار دهی کنید. به مثال زیر توجه کنید:
const initialState = someFunctionThatCaluclatesValue(props)
const [count, setCount] = React.useState(initialState)
از اونجایی که این فانکشن تو بدنه فانکشن کامپوننت ری اکت قرار داره، هربار که یه رندری اتفاق میوفته این فانکشن هم صدا زده میشه حتی با اینکه نیازی به مقدارش نباشه(دفعه اول یه بار محاسبه شده دیگه)
حالا ببینیم چه طوری با پرفرمنس بالاتری از طریق مقداردهی اولیه تنبل (lazy initialize) اینو پیاده سازیش کنیم:
const getInitialState = (props) => someFunctionThatCaluclatesValue(props)
const [count, setCount] = React.useState(getInitialState)
اینجوری ری اکت فقط زمانی که به مقدار اولیه نیاز داره این فانکشن رو صدا میزنه(یعنی همون دفعه اول رندر کامپوننت) و خوب باعث میشه کدتون با کارایی و عملکرد بهتری کار کنه.
برای دیدن و بررسی این کد به این لینک برید:
راه های مختلفی برای پیدا کردن این رندرهای غیر ضروری هست اینجا می خوام یکی از بهترین راه های پیدا کردن رندرهای اضافی کامپوننت ری اکت رو بهتون بگم:
آره این پکیج رو نصب کنید و خیلی راحت رندرهای اضافی رو پیدا کنید و یه فکری به حالشون بکنید.
از اونجایی که اکثر اپ ها توشون داده ها رو به شکل یه لیست رندر میکنن، وقتی این لیست بزرگ میشه مثل یه سم وارد اپلیکیشنتون میشه و اثر بدی روی کارایی و عملکرد اپ تون میزاره. کلی حافظه رو تو مرورگرتون به خودش اختصاص میده و چون همه این عناصر این لیست توی DOMهستن وقتی اسکرول میکنید دچار یه کندی(lag) میشید. واسه اینکه بتونید فقط اون قسمتی از دیتا ها رو که الان تو صفحه مرورگرتون قابل دیدنه رندر کنید می تونید از پکیج React Window استفاده کنید. مهم نیست سایز لیست شما چقدره اون فقط 20-30 ایتم از لیستتون رو، بسته به سایز پنجره مرورگرتون، رندر میکنه. که کلی پرفرمنس و کارایی اپتون رو بالا میبره.
مدت ها اینجوری بود که اگر می خواستید ری اکت یه کامپوننت رو به درستی رندر کنه باید همه اون چیزی رو که تو اون کامپوننت برمی گردوندید(return) توی یه divبزارید
با معرفی فرگمنت ها (fragments) تو ری اکت دیگه لازم نیست ازین روش استفاده کنید در عوض می تونید اینطوری انجامش بدید(یعنی همه چیو بزارید داخل فرگمنت)
طبق چیزی که مستندات خود ری اکت میگه:
اگر کامپوننت شما نتایج مشابهی رو به ازای prop های مشابه رندر میکنه شما می تونید اونو memo کنید، تو بعضی از موارد به خاطرسپاری(memoizing) نتایج باعث افزایش کارایی و عملکرد بهتر میشه به این معنا که ری اکت بیخیال رندر مجدد کامپوننت میشه و از نتیجه آخری که رندر شده مجددا استفاده میکنه.
درون خودش React.memoیه مقایسه کم عمق (shallow compare) روی پراپ(prop)ها انجام میده و اگر پراپ ها نسبت به رندر قبلی تغییری نکردن از رندر مجدد کامپوننت اجتناب میکنه.
نوشتن jsxخیلی باحاله و یکی از امکانات اصلی ری اکته. برای رندر مشروط المان ها به جای استفاده از این روش:
از این روش استفاده کنید:
تا حالا از این نکات و ترفندها استفاده کرده بودید؟ از کدوماش؟ مرسی بابت وقتی که گذاشتید امیدوارم که مفید بوده باشه لطفا این مطلب رو لایک کنید و به اشتراک بزارید ممنون درضمن نظر هم یادتون نره، برای یادگیری بیشتر کانال های زیر رو فالو کنید:
اینستاگرام: yasharhabibimedia
تلگرام: yasharhabibimedia
یوتیوب: yasharhabibimedia
