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

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

برای خوندن قسمت اول از این سری آموزش:

این قسمت از مقاله آموزشیم در مورد مباحث جامونده از جاواسکریپت هست که خیلی خیلی تو ری اکت به کار میاد . ممکنه خیلی از شما خواننده ها با این نکات آشنا باشید اما چون مهم هستند خالی از لطف نیست که مرورش کنید.

۳۴- با سایت npm دوست باشیم

برنامه نویس ها و توسعه دهنده هایی که دارن با زبان JS کار میکنن خیلی به npm نیاز دارن. همونظور که میدونید همه زبان های برنامه نویسی یه چیزی به اسم package manager دارن که ماژول ها یا کتابخونه های مختلف رو میشه از طریقشون به آسونی نصب و یا آپدیت کرد . خلاصه اینکه تو زبون جاواسکریپت npm این کارو برامون انجام میده.
خوب حالا نکته چیه ؟‌
فرض کنید من توسعه دهنده ری اکت هستم و دنبال پکیجی میگردم که بشه باهاش کار drag and drop رو انجام بدم . خوب اگه کسی رو میشناسید که واردتره ازش میپرسید یا اینکه گوگل میکنید.
حالا من راه سومی هم میخوام بهتون پیشنهاد بدم :

تو خود سایت npm میشه مستقیم سرچ کنیم (مثل گوگل)‌ و حتما هم لازم نیستش که اسم پکیج رو بدونید.
برای مثالی که گفتم drag and drop:

میبینید که ۲۵۱ پکیج در زمان نوشتن این مقاله وجود داره . خوب کافیه که چندتاشون رو باز کنیم و به مطالب داخلشون مراجعه کنیم. برای مثال من react-drag-and-drop رو کلیک میکنم:

سمت چپ توضیحاتی در مورد نصب این بسته و روش های کارش توضیح داده . سمت چپ رو اگه با دقت نگاه کنید اطلاعات مفیدی وجود داره:

اطلاعات مفیدی مثل اینکه این بسته چقدر دانلود شده و کی آپدیت شده و گیت هاب نویسندش چیه و ... رو میتونید اینجا ببینید و از همین اطلاعات استفاده کنید تا پکیج های مختلف رو باهم مقایسه کنید و بینشون راحتتر انتخاب کنید. برای مثال اگه پکیجی هست که ۴ سال قبل تا حالا فعالیتی رو نداشته میشه به راحتی گذاشت کنار و یا اینکه آمار دانلود نشون میده چه قدر محبوب و کارآمد هست و ...

پس به عنوان یک توسعه دهنده با سایت npm دوست باشیم و ازش به خوبی استفاده کنیم.

همچنین میتونید سری نکات ری اکت نیتیو رو هم مطالعه کنید:

۳۵- دقت کنید که تگ input فقط برای ورود متن نیست و میشه ازش به عنوان یک قسمت برای دریافت فایل هم استفاده کرد :

<input  type='file'>

اما دقت کنید که این تگ read-only هست و uncontrolled هست. اگه با فرم و ... کار کرده باشید میدونید که کامپوننت های uncontrolled چی هست.

۳۶- کندترین کاری که توی فرآیند های سایت و لود شدن و ... انجام میشه تغییر DOM هست. دقت کنید که تا جایی که میتونید توی توسعه سایتتون با ری اکت از دست کاری DOM صرفنظر کنید. خود react با الگوریتم های هوشمند و استفاده از Virtual DOM تغییرات لازم رو پیاده میکنه . پس از دستکاری DOM تا جایی که میتونید صرفنظر کنید . مثلا نیاید از jQuery استفاده کنید !!!!

دقت کنید که JSX نوشتن هم با فرآیندهای ری اکت پشتیبانی میشه و به شدت سریع هست!

۳۷- وقتی داریم تابع و یا کلاسی و یا متغیری رو از ماژولی وارد برنامه میکنیم میتونیم براش یک اسم دلخواه بذاریم. به این شکل:

حالا تو کدی که داریم مینویسیم میتونیم از ًR, cp استفاده کنیم. البته مثالی که من زدم اصلا مثال خوبی نیست (حتی مشکل فنی هم داره) و صرفا برای توضیح این موضوع بیانش کردم . اسم های React و Component کاملا شناخته شده هستند و اصلا نیازی نیست که براشون اسم انتخاب کنید چون به جای ساده سازی کارتون دارید سختش میکنید و خوانایی برنامه رو برای سایر برنامه نویس ها هم سخت میکنید!

راه دیگه ای هم برای این کار وجود داره که استفاده از as هست (‌البته هنوز به صورت proposal هست و babel در حال حاضر زحمت ترجمه اش رو میکشه برامون):

۳۸- شاید براتون سوال باشه که چرا بعضی وقتا تو import از { } استفاده میکنیم ؟‌
مثلا تو خط اول اکثر فایل هامون این رو داریم که :

اینجا Component و React به روش های مختلفی وارد میشوند. چرا ؟‌
اگر یک Object تو یک فایل export بشه،‌ برای import کردنش از { } استفاده میکنیم!

۳۹- یه کوچولو از پشت پرده کار باندل کردن webpack بگم براتون که:
اول میاد همه کدهارو بررسی میکنه و میبینه که چه کدهایی بهم وابسته هستند و بهم import شدن .
تو مرحله بعدی یک درخت از فایل های وابسته بهم میسازه (dependencies tree)
و فایل هایی که استفاده نشدند رو توی کار نهایی نمیاره و این نکته مهمی میتونه باشه!!

۴۰- تبدیل های ضمنی که تو زبان جاواسکریپت اتفاق میوفته برای نوع falsy اینها هستند:

'' " (یک استرینگ خالی)
undefined
null
NaN
0
false

فرق undefined & null اینکه null یعنی هیچی (خالی) و undefined یعنی تعریف نشده (وجود نداره)!

اینجا میخوام نکته مهمی در مورد تبدیل نوع ها بگم خدمتتون:

توی عملیات جمع کردن زور String از همه بیشتره و وقتی چیزی با string جمع بشه ،‌همه نوع ها به رشته تبدیل میشن. دقت کنید که فقط تو جمع این اتفاق میافته!

5 + '1' ---> '51' اینجا هم رشته داریم هم عدد ، اما زور رشته بیشتره پس تبدیل به رشته شد.
اما قدرت رشته فقط تو جمع زیاده و وقتی ضرب در میون باشه (چون رشته ضرب نمیفهمه) دیگه مثل جمع عمل نمیکنه. 5 * '1' ---> 5 دقیقا نشون میده که وقتی ضرب داشته باشیم Number قوی تره!!

یه سوال چالش بر انگیز :
به نظرتون جاواسکریپت در مواجه با تبدیل ضمنی نوع undefined * null چیکار میکنه ؟‌
این سوال رو تو قسمت بعدی به عنوان یک نکته میگم!

۴۱- همه نوع ها توی جاواسکریپت یا pass by value هستن و یا pass by reference

برای مثال وقتی یک کپی obj رو تغییر بدیم روی obj اصلی هم اثر میکنه پس از نوع reference هست ولی عدد از نوع value هست و مقدارش با ورود به یک function تغییر پیدا نمیکنه.

نوع های Number , String , Boolean از نوع value هستن و وقتی وارد یک تابع میشن و اون تو تغییر میکنن در نهایت وقتی کار تابع تموم میشه بدون تغییر باقی میمونن‌!

اما نوع های Object , Array به صورت reference هستن و همیشه تو دست کاری هامون باید به این نکته دقت کنیم. مثلا وقتی یک آبجکت وارد یک تابع میشه و تابع اون رو تغییر میده در نهایت خود آبجکت اصلی ما هم تغییر میکنه و اگه حواسمون به این موضوع نباشه میتونه خیلی اذیتمون کنه در آینده.

۴۲- به عمل باز کردن یک Array که به صورت چند بعدی هست و تبدیلش به یک آرایه یک بعدی FlattenArray میگوییم.

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

۴۳- خیلی وقت ها شده که برای یک متغیر یا آبجکت یا ... یک مقدار پیش فرض در نظر میگیریم. تو حالتی که یه مقداری null هست هیچ مشکلی پیش نمیاد و لازم نیست که مقداری رو بهش بدیم. اما اگر مقداری undefined باشه و ما بهش مقدار پیش فرض ندیم در این صورت برنامه به خطا میرسه !
پس برای مقادیری که ممکنه undefined باشه حتما از مقادیر پیش فرض استفاده کنید.

رقیب جاواسکریپت رو هم میتونید یاد بگیرید:

همچنین میتونید این مطلب رو هم مطالعه کنید:

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/