ری اکت رو قورت بده - ۲

این سری از نوشته هام مشابه سری نکته های طلایی ری اکت نیتیو هست و قراره که نکته های ریز و درشت از ری اکت و جاواسکریپت رو بررسی کنم . اکثر این نکات برای توسعه دهندگان ری اکت نیتیو هم کاربردی است.

سایر قسمت های این سری آموزشی:

https://virgool.io/iran-react-community/%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%B1%D9%88-%D9%82%D9%88%D8%B1%D8%AA-%D8%A8%D8%AF%D9%87-%DB%B1-u8t5ysweyxyj

https://virgool.io/iran-react-community/%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%B1%D9%88-%D9%82%D9%88%D8%B1%D8%AA-%D8%A8%D8%AF%D9%87-%DB%B3-li3bflaoxflt

https://virgool.io/iran-react-community/%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%B1%D9%88-%D9%82%D9%88%D8%B1%D8%AA-%D8%A8%D8%AF%D9%87-%DB%B4-uxjcsfy81hve

https://virgool.io/iran-react-community/%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%B1%D9%88-%D9%82%D9%88%D8%B1%D8%AA-%D8%A8%D8%AF%D9%87-%DB%B5-k0jy1ecxq5yx

۱۱- مفهوم pure

حتما عبارت های pure class & pure function به گوشتون خورده. این عبارت مفهوم خیلی ساده ای داره و اینکه:

توابع و کلاس ها حق ندارند مقدار props های خودشون رو تغییر بدن!

تابع و کلاسی که این شرایط رو داشته باشه pure هست . ما همیشه از pure function & pure class استفاده میکنیم و این یک اصل پذیرفته شده از طرف جامعه ری اکت هست:

All react component must act like pure function with respect to their props.

۱۲ - پکیج Deep-freeze یکی از پکیج های خوبی هست که به تازه کار ها کمک میکنه تا بدون مشکل state رو تغییر بدن . معمولا اوایل کار با ری اکت مفهوم اینکه state باید immutable باشه خوب جا نمیوفته و مشکل ساز میشه . برای همین استفاده از این پکیج کمک میکنه که بتونیم هر آیتمی رو خواستیم فریز کنیم و از تغییرش جلوگیری کنیم. به این شکل مطمین میشیم که هیچ تغییری نمیکنه و بعد از اجرای درست برنامه میتونیم اون رو حذف کنیم.
برای نصب و روش کارش به صفحه این پکیج مراجعه کنید.

۱۳ - نکات immutable در مورد state

در صورتی که از push برای اضافه کردن عضو جدید به آرایه میخواهید استفاده کنید باید بدونید که push کاملا mutable هست و به جای این کار باید از concat و یا spread operator استفاده کنید.

استفاده از concat و spread operator برای تغییر آرایه جدید

می‌تونیم از این دو روش برای تغییر آبجکت استفاده کنیم و خیالمون راحت باشه که آبجکت اصلی immutable هست.

۱۴ - لایف سایکل componentDidMount

همیشه بعد از اینکه همه اجزای موجود در قسمت render توی DOM رندر شد اجرا میشه و از همین خصوصیت این لایف سایکل در جاهای مختلفی استفاده میشه .

تقریبا میشه این جوری گفتم که ساده ترین و پرکاربرد ترین لایف سایکلی هست که میتونید ازش استفاده کنید. برای اینکه ببینید هر لایف سایکل چه زمانی اجرا میشه و چه کاری رو انجام میده به این شکل که خیلی خوب همه لایف سایکل های مهم رو گفته با دقت نگاه کنید:

حتما در قسمت های آینده نکات کاربردی بیشتری از سایر لایف سایکل ها مطرح میکنم.

۱۵ - المان های فرم موجود در ری اکت یکسری event های استاندارد هم دارند مثل: reset & submit
که با استفاده از این event ها میشه خیلی کارها کرد. معمولا استفاده از این event ها توسط توسعه دهندگان نادیده گرفته میشه اما به نظرم توجه به این نکات کوچک میتونه کارهای بزرگی انجام بده.

همچنین بخونید:

https://virgool.io/iran-react-community/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%85%D8%A8%D8%AA%D8%AF%DB%8C-react-native-%D9%87%D9%85%D8%B1%D8%A7%D9%87-%D8%A8%D8%A7-%D9%85%D8%AB%D8%A7%D9%84-%D8%A7%D8%B2-%D8%B5%D9%81%D8%B1-%D8%AA%D8%A7-%DB%B1%DB%B0%DB%B0-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-cyqz5skqhuxv

https://virgool.io/iran-react-community/%D9%86%DA%A9%D8%A7%D8%AA-%D8%B7%D9%84%D8%A7%DB%8C%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D9%87%D9%86%D8%AF%DA%AF%D8%A7%D9%86-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D9%86%DB%8C%D8%AA%D9%88-reactnative-%D9%82%D8%B3%D9%85%D8%AA-%DB%B1-l8kuhkrr98ps

۱۶- کامپوننت هایی که قراره رندر بشن!!

به این نکته توجه کنید که اگر کامپوننتی بسازیم و حتی عبارت null هم برگردونه این کامپوننت اجرا میشه و چرخه متد های پیش فرضش (life cycle methods)‌ اجرا میشه.

از این خاصیت میشه تو جاهای مختلف استفاده کرد. کامپوننتی که اجرا میشه اما چیزی نمایش نمیده!!

۱۷- درسته که این مقاله در مورد ری اکت هست اما بد نیست که به چند تا نکته مهم و کاربردی JavaScript اشاره کنم:

مثالی از زنجیره کارهایی که میتونیم پشت سر هم انجامش بدیم:

این زنجیره یک Array رو در ورودی میگیره بعد با کاما از هم جداشون میکنه بعد فاصله های اضافی رو حذف میکنه بعد فیلتر میکنه میبینه که اگر واقعی بود و موجود بود در آخر هر آیتم رو توی یک خط جدید قرار میده. میبینیم که به راحتی آب خوردن (:دی)

نکته بعدی که خلاصه کردن عبارت های مقایسه ای هست که جاوا اسکریپت برای افزایش سرعت این کارو انجام میده. به این عبارت دقت کنید:

true && expression

این عبارت چه جوری توسط موتور جاوا اسکریپت بررسی میشه ؟‌

تحلیل این عبارت از سمت چپ شروع میشه و همین که با یک عبارت true و صحیح روبرو میشه بدون اینکه عبارت دوم رو بررسی کنه مقدار عبارت دوم رو برمیگردونه . اگر این عبارت صحیح باشه نتیجه این عبارت صحیح میشه و اگر عبارت expression مقدارش false باشه نتیجه عبارت هم false میشه!

حالا این عبارت رو بررسی کنیم:

false && expression

خوب باتوجه به قانون بالا بررسی رو شروع کنیم. همین که تحلیل عبارت شروع میشه به false میرسیم و چون دستور And در حال اجراست پس بلافاصله مقدار false برگردون میشه و دیگه کار به بررسی و تحلیل عبارت دوم نمیکشه !
این باعث میشه که عبارت دوم بررسی نشه و این سرعت اجرای کد رو اندکی بهبود میده!

۱۸- توسعه دهندگان وب و JS باید به چند تفاوت JS و JSX دقت کنند . قطعا اینجا همه نکات رو نمیتونم بگم اما دوتا مورد رو فعلا اشاره میکنم:

در حالت عادی وقتی میخواستیم از default behavior یک event جلوگیری کنیم کافی بود که یک عبارت return false انجام بدیم اما تو react باید از عبارت زیر استفاده کنیم:

event.preventDefault()

و نکته بعدی اینکه همه event handler ها توی JSX باید یک Function باشند مثل و ...

۱۹- سه قانون مهمی که برای تغییر تو State هست:

الف:‌ تنها جای تعریف state توی constructor و یا زمان تعریف اون هست و بعد از اون فقط با setState میشه مقادیر state رو تغییر داد.

ب: عمق کپی و merge توی state کم هست (چه قدر توضیحش به فارسی سخته)‌
یعنی اینکه برای تغییر nested Object ها تو setState باید به این نکته دقت کنیم.
بعدا مثال هایی در مورد این تغییرات میگم که مطلب بهتر جا بیوفته !

ج: مقادیری که تو setState داریم تغییر میدیم ممکنه که به صورت Async تغییر کنند. برای این موضوع به یک مثال دقت کنید:

فرض کنید یک مقدار number تو state داریم و قراره با مقداری که از یک فرم (ورودی) و یا پراپس میاد جمع بشه :

در ظاهر این کدی که نوشتیم کاملا صحیح هست . بله صحیح تا زمانی که مقادیر number و inputNumber به صورت sync باشند اما مشکل زمانی پیش میاد که این مقادیر به صورت Asynchronous باشند. تفکر یک react developer همیشه باید این نکته رو هم شامل بشه که مقادیر Async وجود دارند و بر همین اساس کد بزنه . حالا به فرم اصلاح شده این کد دقت کنید: