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

تو این مقاله میخوام در مورد بهترین روش های استفاده از امکانات و قدرت ری اکت صحبت کنم. استفاده از الگوهای ری اکت باعث میشه کدهایی بنویسیم که به لحاظ کارایی و خوانایی سطح بالاتری داشته باشند.تو این مقاله قصد دارم الگوهای ری اکت رو با بیان ساده شرح بدم . این مقاله برداشت آزادی از سایت الگوهای ری اکت است.سر فصل های بیان شده در قسمت اول :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 در فانکشنال کامپوننت ها استفاده کرد.functional component simple exampleاستفاده از فانکشنال کامپوننت ها در ری اکت باعث میشه که کدها به شدت کاهش پیدا کنه. در ضمن دیباگ کردن فانکشنال کامپوننت ها هم کار ساده تری است.توجه کنید که هر فانکشنال کامپوننت باید در انتها یک return داشته باشه! یعنی چیزی رو برگردونه.استفاده از Destructuring propsاز اکماسکریپت ۲۰۱۵ به بعد این ویژگی به جواسکریپت اضافه شد. برای objectobject destruction برای arrayarray destructionخوب بعضی وقتا هم پیش میاد که ما فقط یک مقدار رو از تو یک شی یا یک لیست می‌خواهیم و بقیشو احتیاجی نداریم:object destruction with restPropsاینجا ما از پراپس name استفاده کردیم و بقیه پراپس های موجود رو با سه نقطه توی rest operator ریختیم. در صورتی که در مورد این ویژگی چیزی نمی‌دونید جای نگرانی نیست، نکته بعدی رو بخونید.استفاده از JSX spread attributesاین از ویژگی های JSX است و خیلی خیلی کاربردی!با گذاشتن ۳ تا نقطه پشت سر یک شی یا لیست می‌تونیم اون رو باز کنیم و همه پراپس هاشو بیرون بکشیم.مثال قبلی رو یادتونه ؟‌ما از پراپس name استفاده کردیم و بقیه پراپس هارو بدون اینکه بدونیم چیا هستن و حتی چند تا هستن به مقدار restProps دادیم. حالا میخواهیم این پراپس هارو به المان div خودمون بدیم .برای مثال این پراپس ها میتونن سایر ویژگی های مورد نیاز یک المان باشند.spread operatorبرای مثال سایر پراپس ها که به div دادیم میتونه این شکلی باشه:spread operator in div tagاستفاده از Merge destructured props with other valuesیکی از ویژگی های خوب ری اکت اینه که می‌تونیم چندین ویژگی رو باهم ترکیب کنیم. از این ویژگی معمولا برای ترکیب css ها به کار میره! برای مثال این کامپوننت رو در نظر بگیرید:custom buttonیک دکمه نوشتیم و براش یک کلاس به اسم btn در نظر گرفتیم. حالا میخواهیم از این دکمه تو جاهای دیگه هم استفاده کنیم:merge custom button's classNameاینجا یک کلاس جدید بهش دادم. اسم این کلاس جدید detele-btn هست. اما چه اتفاقی برای btn افتاددر واقع کلاس جدیدی که استفاده کردیم کلاس قبلی رو override کرد.ولی اگه بخواهیم هر دوتا کلاس رو داشته باشیم چی ؟‌ یعنی ویژگی های مشترکشون override شه و ویژگی های غیر تکراری همشون باشه!راهش اینه که از join استفاده کنیم و همه کلاس هایی که میخواهیم رو باهم ترکیب کنیم:merging classNamesمقدار className="" هم برای اینه که اگه این کلاس تعریف نشده بود و توی پراپس ها وجود نداشت ، مقدار undefiend نگیره. به این شکل کلاس btn با همه ویژگی هایی که از طریق پراپس className اومدن ترکیب میشه!استفاده از Conditional renderingخیلی وقتا بعد از بررسی یک شرط و در صورت صحیح بودنش نیاز داریم که چیزی رو نمایش بدیم و در غیر این صورت نیازی به نمایشش نداریم. برای این کار از رندر شرطی استفاده می‌کنیم:conditional operator with ternary operator مقدار condition بررسی میشه و در صورتی که صحیح باشه ، مقدار Rendered when truthy روی صفحه نمایش داده میشه و در غیر این صورت عبارت Rendered when falsy نمایش داده میشه.برای نمایش شرطی، من از ternary operator استفاده کردم. در صورتی که با این سینتکس آشنایی ندارین باید بگم که ساده شده عبارت if-else است.بعضی مواقع هم هست که نیاز داریم تا درصورت صحیح بودن شرطمون مقداری نمایش داده بشه و در غیر این صورت هیچ اتفاقی نیوفته . برای این منظور از short circuit استفاده میکنیم. به این شکل:conditional rendering with short circuitبرای اینکه خیلی طولانی نشه این مقاله رو همینجا تمومش میکنم و ادامه مقاله رو در قسمت های بعدی منتشر می‌کنم. سایر مقاله های من در ویرگول: https://virgool.io/iran-react-community/آشنایی-با-الگوریتم-reconciliation-ری-اکت-nnmzcqkj4idr https://virgool.io/iran-react-community/فانکشنال-کامپوننت-در-مقابل-کلاس-کامپوننت-b8bhzvut2zp1 https://virgool.io/iran-react-community/ریداکس-به-زبان-ساده-emxqh7w4gnpk Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123