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

ری اکت یک کتابخونه نوشته شده با جاواسکریپتِ که برای توسعه فرانت اند در سال ۲۰۱۴ از طرف فیسبوک معرفی شد. ری اکت توسط فیسبوک، انجمن برنامه نویسان شخصی و همچنین یک سری کمپانی پشتیبانی میشه. ری اکت برای توسعه اپلیکیشن های تک صفحه ای SPA با کارایی بالا طراحی شده.

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

۱ - کوتاه کردن هرچه بیشتر Arrow Functions

خوب سوال اینه که خود Arrow Function ها اومدن که خلاصه باشن پس چه جوری باید خلاصه ترش کنیم؟‌

الف: اگر چیزی که قراره خروجی این تابع باشه به صورت آبجکت بود، می‌تونیم به راحتی با گذاشتن یک پرانتز از کلمه return صرفنظر کنیم و خود آبجکت رو برگردونیم. مثال:

ب: در صورتی که بدنه کد به صورت Single Statement Expression باشه دیگه نیازی به گذاشتن return نیست . به زبون ساده یعنی اگر کد رو میشد توی یک خط نوشت دیگه نیازی به return نیست. مثال:

این کار به ظاهر ساده باعث میشه خوانایی کد ما فوق العاده بیشتر شه و کد های کوتاه تری داشته باشیم.

هرچند هستند افرادی که به هنوز به طور کامل arrow function رو گذاشتن کنار و از همون توابع معمولی استفاده میکنند. به نظر این دسته از افراد هم احترام میذاریم و نظرشون رو به این نکته جلب میکنیم:

Arrow functions have their own lexical this when we use them, we don't have to manually bind them to the class and ...

۲- کلید حل مشکلات !

زمانی که داریم یک آرایه (آبجکت و یا لیست) رو enumerate می‌کنیم یا به عبارتی دیگه داریم برای تک تک اعضاشون کاری انجام میدیم (مثلا وقتی که از map & filter بر روی یک آرایه استفاده می‌کنیم) به پراپس key نیاز داریم.
تو این حالت استفاده از پراپس key ضروری هست . ری اکت به این پراپس احتیاج داره تا بتونه روی کامپوننت ها و یا المان های خروجی کنترل داشته باشه .

علت استفاده از key به گفته خود ری اکت:

The key prop is used by react to keep track of changes in a rendered array.

کلید ها تو یک آرایه باید unique باشند و لازم نیست که در فضای global هم منحصر به فرد باشند. و فقط کافی هست که توی محل استفاده خودش و برای آرایه که داره استفاده میشه unique باشه. برای مثال اگه ۵ تا لیست داریم که لازم هست بهشون کلید بدیم ،‌لازم نیست که کلید ها با هم دیگه فرقی داشته باشه.

از این کلید ها نمیشه توی خود کامپوننت استفاده کرد (مثل پراپس های دیگه) چون این کلید ها serves as a hint to react هستند. پس اگر به مقدار مشخصی نیاز داشتیم به صورت صریح پراپس جداگونه بهش میدیم. مثلا برای این المان یک id در نظر گرفتیم و ازش تو قسمت های مختلف استفاده می‌کنیم.

نکات بسیار مهم:

هیچوقت از index (که به عنوان آرگومان دوم تابع map هست) به عنوان کلید استفاده نکنید . مقدار کلید باید کاملا stable باشه و اگر یکی از این کلید ها تغییر کرد کل لیست رندر شده ما تغییر نکنه . درصورتی که با تغییر index از سمت تابع map همه کلیدهای قبلی هم تغییر می‌کنند.
به صورت پیش فرض هم خود ری اکت از index برای کلید ها استفاده میکنه و به همین خاطر اگه ما کلید مشخصی براش تعریف نکنیم، توی کنسول به ما هشداری میده که کلید های یکتا تعریف نشده !

کلید ها باید طوری انتخاب شن که بشه کلید های بعدی رو هم حدس زد . یعنی اینکه کلیدها نظمی داشته باشند و مثلا از Math.random برای ساختن کلیدها استفاده نکنیم!

نگاه ری اکت به key ها با سایر پارپس ها متفاوت هست . به این شکل که تغییر پراپس ها منجر به update شدن کامپوننت ها میشه اما تغییر key ها منجر به Mount دوباه کامپوننت ها میشه!

سایر مقاله های من در ویرگول:

https://virgool.io/iran-react-community/%D8%B1%DB%8C%D8%AF%D8%A7%DA%A9%D8%B3-%D8%A8%D9%87-%D8%B2%D8%A8%D8%A7%D9%86-%D8%B3%D8%A7%D8%AF%D9%87-emxqh7w4gnpk

https://virgool.io/@novonimo/%DA%AF%DB%8C%D8%AA-%DA%AF%DB%8C%D8%AA%D9%87%D8%A7%D8%A8-%D9%88-%DA%AF%DB%8C%D8%AA-%D9%84%D8%A8-umq6qkstrfwi

۳ - المنت ها و کامپوننت ها ری اکت که با حروف بزرگ شروع میشن به صورت self closing هستند ولی در صورتی که که به صورت عادی اونا رو بنویسیم یک قابلیت جالب پیدا میکنند:

کامپوننت ها و یا المنت هایی که به این شکل نوشته میشن یک ویژگی جالب دارند. متن بین این المان ها توسط prop.children قابل دسترسی هست.

۴- مقادیر پیش فرض استایل ها (پسوندها) توی JSX لازم نیست که نوشته بشه:

برای این دو مشخصه ای که من آوردم مقدار px حذف شد.

۵- هروقت یک کامپوننت قراره که از صفحه حذف بشه باید قبلش توسط componentWillUnmount حذف بشه . مخصوصا که اون کامپوننت تسک غیر همزمان هم داشته باشه و یا اینکه interval از خودش به جا بذاره . مثل : setTimeOut & setInterval
از این لایف سایکل componentWillUnmount همیشه در جای مناسب استفاده کنید چون باعث کاهش کد های در حال اجرا و به دنبال اون کاهش مصرف منابع سیستم مثل RAM و CPU و در نتیجه افزایش کارایی و سرعت برنامه نوشته شده میشه. (‌در غیر این صورت در مواردی دچار Memory leak هم می‌شید)

۶- استفاده از prevState تو state

تفکر Async در زبان javaScript باید باعث بشه همیشه حواسمون به تغییرات ناخواسته و پیش بینی نشده باشه . پس در این شرایطی که لازم هست مقدار state با مقدار قبلی خودش یه ارتباطی داشته باشه از prevState استفاده میکنیم که حواسش به غیر همزمانی تغییرات prevState هست :

۷ - برای اینکه وضعیت فعال / غیر فعال یک دکمه رو بر اساس وضعیت یک متغیر دیگه ( که خودش بولی هست) تغییر بدیم از روش ساده زیر استفاده میکنیم:

اینجا error یک متغیر هست که شرایطش با وضعیت های دیگه تغییر میکنه و می‌تونیم ازش برای تغییر وضعیت یک دکمه استفاده کنیم. مثلا مقدار error رو طوری تنظیم کردم که اگر کاربر فیلدهای ضروری مثل اسم و ای میل رو وارد نکرده بود مقدار true برگردونه. در این صورت مقدار disable دکمه ما هم true میشه و این دکمه اجازه ارسال اطلاعات به کاربر رو نمیده.

۸ - شی event که از submit یک فرم به دست میاد،. جزیئات بیشتری به نسبت event یک button داره . برای اینکه ببینیم چه چیز هایی توش داره کافیه که لاگ بگیریم ازش تا ببینیم چه چیز هایی داره و از چه چیز هاییش میشه استفاده کرد:

event.target[0].value

۹ - برای اینکه مشخصات کامل یک المنت رو داشته باشیم و بتونیم هر کاری خواستیم باهاش انجام بدیم از ref استفاده میکنیم.

حالا این this.node همه جا در دسترس ما هست و می‌تونیم با لاگ گرفتن ازش ببینیم که چه چیز هایی رو داره و بعدا ازش استفاده کنیم.

البته راه دیگه هم وجود داره :

در این صورت در محل استفاده از this.refs.node.value استفاده می‌کنیم.

حتی میشه از ref برای کامپوننت ها هم استفاده کرد به این شکل که:

۱۰- چون جاواسکریپت type نداره خیلی کارها انجام شده و خیلی چیز های مختلفی اومده تا کمک کنه به مشکل بی تایپی این زبان. ری اکت هم از این موضوع استثنا نیست و برای حل این موضوع از پکیج proptype استفاده کرده .

برای مطالعه بیشتر در مورد تایپ ها:

https://virgool.io/JavaScript8/%D8%A7%D8%B3%D8%AA%D8%A7%D8%AA%DB%8C%DA%A9-%D8%AA%D8%A7%DB%8C%D9%BE-%D9%88-%D8%AF%D8%A7%DB%8C%D9%86%D8%A7%D9%85%DB%8C%DA%A9-%D8%AA%D8%A7%DB%8C%D9%BE-c8eopdnug3xt

نکته مهم اینه که این پکیج فقط در حالت Develompent کار میکنه و توی نسخه product نمیتونیم ازش استفاده کنیم.

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

قسمت های بعدی:

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%B2-dqoyeo4msihl

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

Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123/