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

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

سایر قسمت های ری اکت رو قورت بده:

https://virgool.io/iran-react-community/ری-اکت-رو-قورت-بده-۲-dqoyeo4msihl
https://virgool.io/@novonimo/ری-اکت-رو-قورت-بده-۳-li3bflaoxflt
https://virgool.io/@novonimo/ری-اکت-رو-قورت-بده-۴-uxjcsfy81hve


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

همچنین میتونید به سایر مقاله های من در ویرگول سری بزنید:

https://virgool.io/iran-react-community/نکات-طلایی-برای-توسعه-دهندگان-ری-اکت-نیتو-reactnative-قسمت-۱-l8kuhkrr98ps


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

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

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

آبجکت در خروجی یک Arrow func
آبجکت در خروجی یک Arrow func


ب: در صورتی که بدنه کد به صورت 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 ...


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

در حالت عادی که دارید کد میزنید هیچ وقت لازم نیست به یک کامپوننت پراپس key اختصاص بدیم جز زمانی که داریم یک آرایه (آبجکت و یا لیست) رو enumerate میکنیم یا به عبارتی دیگه دارید برای تک تک اعضاشون کاری انجام میدیم مثلا وقتی که از map & filter بر روی یک آرایه استفاده میکنیم.
تو این حالت استفاده از پراپس 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 هستند. پس اگر به مقدار مشخصی نیاز داشتیم به صورت صریح پراپس جداگونه بهش میدیم.

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

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

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

نگاه ری اکت به key ها با سایر پارپس ها متفاوت هست . به این شکل که تغییر پراپس ها منجر به update شدن کامپوننت ها میشه اما تغییر key ها منجر به Mount دوباه کامپوننت ها میشه!
کلیدهایی که مفصل ازش صحبت کردیم برای خود ری اکت هست که بدونه چه جوری کامپوننت هاشو آپدیت و یا Mount و unMount کنه !


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

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


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

استایل دهی inline در JSX
استایل دهی inline در JSX

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


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


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

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

استفاده از prevState
استفاده از prevState

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

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


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

event.target[0].value


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

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

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

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


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


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

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


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

https://virgool.io/@novonimo/آموزش-مقدماتی-دارت-dart-قسمت-۱-vrd1jjuoble1

تکنیک های برنامه نویسی Functional با جاواسکریپت:به https://virgool.io/@novonimo/فوت-و-فن-برنامه-نویسی-functional-با-جاواسکریپت-ujucyxjfn0zw




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/