7 نکته و ترفند ری اکت برای بهتر کد زدن در 2021

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