🔵 با HOC در React.js آشنا بشید

‏Higher-Order Components یا HOC در React.js یک پترن پیشرفته برای استفاده مجدد از منطق کامپوننت‌ها هست. HOC یک تابعه که یک کامپوننت رو به عنوان ورودی می‌گیره و یک کامپوننت جدید با قابلیت‌های افزوده‌شده رو برمی‌گردونه.

از ‏HOCها معمولاً برای موارد زیر استفاده میکنن:

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

🔢 محدود کردن دسترسی: وقتی که می‌خواید دسترسی به یک کامپوننت رو محدود کنید، مثلاً فقط برای کاربران لاگین شده.

🔢 تزریق داده: وقتی که می‌خواید داده‌ها رو به یک کامپوننت تزریق کنید.

😉رعایت قانون DRY با HOC !

در برنامه نویسی اصولی، یک اصل هست به اسم Clean Coding، که قوانین زیادی داره و ما به عنوان یک Developer حرفه ای باید اون قوانین رو رعایت کنیم. یکی از این قوانین DRY ( dont Repeat Yourself ) هست.

این قانون میگه وقتی یک تیکه کدی رو یکبار نوشتید، دیگه نباید اون رو مجددا بنویسید تا در جاهای دیگه ای استفاده کنید. باید یکبار برای همیشه نوشته بشه و استفاده بشه.

🚀 ویژگی‌های منحصر به فرد HOC چیه؟

🔵اول اینکه HOC ها برای Reusable کردن یک تیکه کد کاربرد دارن.

🔵دوم اینکه HOC ها کامپوننت هارو ویرایش نمیکنن، بلکه یک نسخه بروز شده از اون کامپوننت میسازن.

🔵سوم اینکه HOC ها pure function هستن و هیچ side Effect ندارن.


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

#hoc #react
@CodeModule