سه الگوی پر کاربرد در ReactJS

سلام دوستان

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

الگوی Function as Child (تابع به عنوان فرزند)

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

? پارانتز باز:

فرزند یا فرزندان داخل یک کامپوننت در اجرای کلاس یا تابع کامپوننت تحت عنوان یک prop به نام children به کامپوننت ارسال میشه.

پارانتز بسته!

الگوی نمونه رو در کد زیر مشاهده میکنید:

در کارکرد استاندارد در واقع ما با ارسال تابع فرزند انتظار داریم که اون تابع به عنوان متد رندر کامپوننت عمل کنه. الان باید ببینیم که داخل کامپوننت Calculator چه اتفاقی باید بیفته تا چیزی که انتظار داریم انجام بشه.

همونطور که میبینید، کامپوننت MyComponent به عنوان مقدار برگشتی، نتیجه ی اجرای پراپرتی children رو برمیگردونه. یعنی در واقع متدی که به عنوان فرزند بهش پاس دادیم (که چون متد هست پس قابل فراخوانی هم هست) رو اجرا میکنه و نتیجه ی اجرای اون تابع به عنوان مقدار برگشتی MyComponent رندر میشه.

این الگو کاربردهای زیادی داره. مثلا وقتی بخواید روی پراپرتی های یک کامپوننت محاسباتی انجام بدید و یا وقتی بخواید مقادیر async رو کنترل کنید میتونید از این الگو استفاده کنید.

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

نکته ای که باید بهش توجه کنید اینه که تابعی که به عنوان فرزند به یک کامپوننت پاس میدیم، یک تابع ساده است و نمیتونه نقش یک Functional Component رو برامون بازی کنه. یعنی در واقع react در هر بار رندر کامپوننت به جای اینکه کامپوننت (های) فرزند رو صدا بزنه و رندر کنه، یک تابع معمولی رو دوباره فراخوانی میکنه. در نتیجه در داخل Child Function نمیشه از hook ها و متد های Lifecycle استفاده کرد.

الگوی HOC یعنی Higher-order components

الگویی کاربردی دیگه ای که قراره بررسی کنیم HOC هست. به احتمال زیاد این الگو رو بارها در کدهای react دیدین.

? پارانتز باز:

در برنامه نویسی یک تعریف داریم به اسم تابع بالا مرتبه و یا higher-order function. برای اینکه بتونیم بگیم یک تابع HO هست یا نه حداقل باید یکی از شرایط زیر در موردش صادق باشه:

• یک یا چند تابع دیگه رو به عنوان ورودی (argument) بگیره
• نتیجه ای که برمیگردونه یک تایع باشه

پارانتز بسته!

با استناد به پارانتزی که بالا باز کردم و همینطور با توجه به اینکه میدونیم هر کامپوننت react هم در واقع یک function هست پس دور از انتظار نیست که یک Component داشته باشیم که تابع یا توابعی رو به عنوان پراپرتی بگیره ویا یک تابع رو به عنوان خروجی برگردونه. در react به کامپوننتی که حداقل یکی از ورودی هاش و خروجیش کامپوننت باشه میگیم Higher-order Component.

در یک توضیح کامل تر، HOC کامپوننتی هست که به عنوان یک لایه برای کامپوننت ورودی (کامپوننتی که به عنوان پارامتر به تابع فرستاده میشه) عمل میکنه. یعنی کامپوننت رو میگیره و بعد از انجام یک سری عملیات یک کامپوننت دیگه رو به عنوان خروجی برگشت میده.

زمانی که بخوایم عملیات مشترکی روی کامپوننت ها انجام بدیم اون عملیات رو در قالب یک HOC پیاده سازی میکنیم و در مواقع نیاز HOC رو همراه با کامپوننت هدف صدا میزنیم. مثلا در مثال withSomething من خواستم که پراپرتی something رو به کامپوننت هام اضافه کنم. پس MyComponent رو به تابع withSomething پاس دادم و اون هم بعد از اضافه کردن پراپرتی مورد نظر به کامپوننت من، در خروجی یک کامپوننت جدید برام برگشت داده.

الگوی Sub Components ویا Dot notation components

تا حالا با کامپوننت های آماده ای کار کردید که sub-component هم داشته باشن؟ در واقع اکثر کتابخانه های UI از این ویژگی استفاده میکنند. یعنی یک کامپوننت که چند کامپوننت دیگه رو به عنوان زیرمجموعه اش داره.

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

? پارانتز باز:

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

پارانتز بسته!

برای پیاده سازی این الگو روش های مختلفی وجود داره که من در زیر چند موردش رو مثال زدم

معمولا برای دسته بندی کامپوننت ها تحت یک اسم و بالا بردن خوانایی کد و دسترسی سریع به کامپوننت ها از این الگو استفاده میکنیم.

امیدوارم این مطلب براتون مفید واقع بشه. نظراتتون خوشحالم میکنه. :)

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

• چینش خاص عناصر در HTML اصلا سخت نیست
• محیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020
• چند نکته خودمانی در مورد برنامه نویسی JS و ReactJS
• بررسی iterable و iterator در جاوا اسکریپت
• سایه رنگی با کمی خلاقیت - سری نوت های CSS من
• مربع بدون ارتفاع - سری نوت های CSS من

برای مطالعه نوشته هام منو در توییتر دنبال کنید.