الگوهای ری اکت - قسمت ۱

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

تو این مقاله قصد دارم الگوهای ری اکت رو با بیان ساده شرح بدم . این مقاله برداشت آزادی از سایت الگوهای ری اکت است.

سر فصل های بیان شده در قسمت اول :

Functional component, Destructuring drops, JSX spread attributes, Merge desctructured props with other values, Conditional rendering

استفاده از Function component

استفاده از کامپوننت های تابعی در ری اکت بسیار متداول است. کلاس کامپوننت ها مزیت استفاده از state و همچنین life cycle methods مثل componentDidMount رو دارند . هرچند که از ری اکت ۱۶.۸ به لطف اضافه شدن Hook ها میشه از state و life cycle methods در فانکشنال کامپوننت ها استفاده کرد.

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

توجه کنید که هر فانکشنال کامپوننت باید در انتها یک return داشته باشه! یعنی چیزی رو برگردونه.

استفاده از Destructuring props

از اکماسکریپت ۲۰۱۵ به بعد این ویژگی به جواسکریپت اضافه شد.

برای object

برای array

خوب بعضی وقتا هم پیش میاد که ما فقط یک مقدار رو از تو یک شی یا یک لیست می‌خواهیم و بقیشو احتیاجی نداریم:

اینجا ما از پراپس name استفاده کردیم و بقیه پراپس های موجود رو با سه نقطه توی rest operator ریختیم. در صورتی که در مورد این ویژگی چیزی نمی‌دونید جای نگرانی نیست، نکته بعدی رو بخونید.

استفاده از JSX spread attributes

این از ویژگی های JSX است و خیلی خیلی کاربردی!
با گذاشتن ۳ تا نقطه پشت سر یک شی یا لیست می‌تونیم اون رو باز کنیم و همه پراپس هاشو بیرون بکشیم.

مثال قبلی رو یادتونه ؟‌
ما از پراپس name استفاده کردیم و بقیه پراپس هارو بدون اینکه بدونیم چیا هستن و حتی چند تا هستن به مقدار restProps دادیم. حالا میخواهیم این پراپس هارو به المان div خودمون بدیم .برای مثال این پراپس ها میتونن سایر ویژگی های مورد نیاز یک المان باشند.

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

استفاده از Merge destructured props with other values

یکی از ویژگی های خوب ری اکت اینه که می‌تونیم چندین ویژگی رو باهم ترکیب کنیم. از این ویژگی معمولا برای ترکیب css ها به کار میره!

برای مثال این کامپوننت رو در نظر بگیرید:

یک دکمه نوشتیم و براش یک کلاس به اسم btn در نظر گرفتیم. حالا میخواهیم از این دکمه تو جاهای دیگه هم استفاده کنیم:

اینجا یک کلاس جدید بهش دادم. اسم این کلاس جدید detele-btn هست. اما چه اتفاقی برای btn افتاد

در واقع کلاس جدیدی که استفاده کردیم کلاس قبلی رو override کرد.

ولی اگه بخواهیم هر دوتا کلاس رو داشته باشیم چی ؟‌ یعنی ویژگی های مشترکشون override شه و ویژگی های غیر تکراری همشون باشه!

راهش اینه که از join استفاده کنیم و همه کلاس هایی که میخواهیم رو باهم ترکیب کنیم:

مقدار className="" هم برای اینه که اگه این کلاس تعریف نشده بود و توی پراپس ها وجود نداشت ، مقدار undefiend نگیره. به این شکل کلاس btn با همه ویژگی هایی که از طریق پراپس className اومدن ترکیب میشه!

استفاده از Conditional rendering

خیلی وقتا بعد از بررسی یک شرط و در صورت صحیح بودنش نیاز داریم که چیزی رو نمایش بدیم و در غیر این صورت نیازی به نمایشش نداریم. برای این کار از رندر شرطی استفاده می‌کنیم:

conditional operator with ternary operator

مقدار condition بررسی میشه و در صورتی که صحیح باشه ، مقدار Rendered when truthy روی صفحه نمایش داده میشه و در غیر این صورت عبارت Rendered when falsy نمایش داده میشه.

برای نمایش شرطی، من از ternary operator استفاده کردم. در صورتی که با این سینتکس آشنایی ندارین باید بگم که ساده شده عبارت if-else است.

بعضی مواقع هم هست که نیاز داریم تا درصورت صحیح بودن شرطمون مقداری نمایش داده بشه و در غیر این صورت هیچ اتفاقی نیوفته . برای این منظور از short circuit استفاده میکنیم. به این شکل: