بررسی Higher-Order-Components در ری اکت ! HOC در ری اکت چیست ؟
HOC یا Higher-Order-Components در ری اکت یکی از مهمترین ویژگی های کتابخونه ری اکت هست که به ما اجازه میده از یک منطق ( Logic ) در چندین کامپوننت استفاده کنیم.
عبارت HOC در ری اکت مخفف Higher-Order-Component هست و تو این مقاله ممکنه هر دو لغت رو ببینید.
با فرانت اندی همراه باشید که میخوایم ویژگی خفن HOC در ری اکت رو بررسی کنیم 🙂
Higher-Order-Components در ری اکت چیست ؟
HOC به ما این اجازه رو میده که یک قابلیت یا ویژگی رو به کامپوننت های خودمون اضافه کنیم، بدون اینکه اون کامپوننت هارو تغییر بدیم ( کدشون رو ویرایش کنیم ).
در واقع Higher-Order-Components در ری اکت از ما یک کامپوننت به عنوان ورودی میگیره و یک کامپوننت بروز شده تحویل میده.
بطور مثال ما میتونیم قابلیت احراز هویت ( Authentication ) رو به کامپوننت ها و صفحات خودمون به صورتی اضافه کنیم که لازم نباشه هیچ تغییری در کامپوننت ها و صفحات خودمون اعمال کنیم!
رعایت قانون DRY با HOC !
توی برنامه نویسی اصولی، یک اصل هست به اسم Clean Coding ( کد نویسی تمیز )
کد نویسی تمیز قوانین زیادی داره که ما به عنوان یک Developer حرفه ای باید اون قوانین رو رعایت کنیم. یکی از این قوانین DRY ( مخفف don,t Repeat Yourself ) هست.
این قانون میگه که :
کد های تکراری ننویس !
HOC به ما اجازه میده که از نوشتن کدهای تکراری جلوگیری کنیم.
در واقع این امکان رو به ما میده که یک logic رو بین کامپوننت های خودمون به اشتراک بزاریم و دیگه نیازی نباشه بارها اون logic رو در کامپوننت های مختلف بنویسیم!
ویژگی منحصر بفرد HOC چیه ؟
این سه مورد زیر ویژگی منحصربفرد higher-order-components در ری اکت هست :
- HOC ها برای Reusable کردن یک تیکه کد کاربرد دارن.
- HOC ها کامپوننت هارو ویرایش نمیکنن، بلکه یک نسخه بروز شده از اون کامپوننت میسازن.
- HOC ها pure function هستن و هیچ side Effect ندارن.
چطور یک Higher-Order-Components بسازیم ؟
برای ساخت یک HOC در ری اکت باید طبق دستورالعمل زیر عمل کنیم.
تو مرحله اول باید یک تابع HOC بسازیم. این تابع به عنوان آرگومان ورودی یک کامپوننت دریافت میکنه و یک کامپوننت جدید با ویژگی های اضافی به ما تحویل میده.
در حقیقت همون کامپوننت ورودی رو ، با یکسری ویژگی های اضافه return میکنیم.
تابع HOC باید بصورت زیر باشه :
const hoc = (WrappedComponent) => {
// ...
}
تو مثال بالا تابع HOC رو ساختیم. ضمن اینکه به عنوان آرگومان ورودی، یک کامپوننت دریافت کردیم.
حالا برای اینکه به کامپوننت دریافت شده یکسری قابلیت یا ویژگی اضافه کنیم، باید یک کامپوننت جدید بسازیم.
کامپوننت جدید ما، همون کامپوننت ورودی ما هست + یکسری ویژگی جدید :
class NewComponent extends React.Component {
// ...
render() {
// ...
}
}
تو تیکه کد بالا، ما یک کامپوننت جدید ساختیم که قراره همون کامپوننت ورودی رو داخلش return کنیم. این کامپوننت جدید میتونه ویژگی های جدیدی به کامپوننت ورودی اضافه کنه.
حالا که کامپوننت جدید ( NewComponent ) رو ساختیم، باید کامپوننت ورودی رو داخلش return کنیم + Props ها و ویژگی های جدید !
class NewComponent extends React.Component {
// ...
render() {
return <WrappedComponent {...this.props} additionalProp={additionalProp} />
}}
تو تیکه کد بالا، ما یکسری ویژگی به کامپوننت ورودی خودمون اضافه کردیم.
این یعنی ما میتونیم یکسری قابلیت به کامپوننت های خودمون اضافه کنیم بدون اینکه اون کامپوننت رو ویرایش کنیم .
تابع HOC کامل ما بصورت زیر میشه :
const hoc = (WrappedComponent) => {
class NewComponent extends React.Component {
render() {
return <WrappedComponent {...this.props} additionalProp={additionalProp} />
}
}
return NewComponent;
}
چه زمانی HOC در ری اکت لازمه ؟
در برخی موارد ما باید از HOC در React استفاده کنیم تا بهتر بتونیم اون موارد رو مدیریت کنیم.
برخی از این موارد عبارتند از :
احراز هویت با HOC در ری اکت ( Authentication )
فرض کنید ما یک اپیکیشن با صفحات مختلفی داریم. کاربر برای اینکه بتونه به برخی از صفحات دسترسی داشته باشه باید احراز هویت بشه.
مثلا برای دسترسی به صفحه پروفایل، باید کاربر رو احراز هویت کرده باشیم. حالا فرض کنید تعداد صفحاتی که باید وضعیت Authentication کاربر رو بررسی کنیم، 10 صفحس !
نیازی نیست که توابع مربوط به احراز هویت رو توی 10 صفحه تکرار کنیم، میتونیم فقط یکبار این توابع رو بنویسیم و در تمام 10 صفحه ازشون استفاده کنیم.
مثلا میتونیم یک HOC به اسم WithAuthentication بسازیم که وضعیت احراز هویت کاربر رو بررسی کنه و درصورتی که کاربر احراز نشده باشه، کاربر رو به صفحه ورود ریدایرکت کنه.
سپس باید کل صفحات مد نظرمون یا کل App رو داخل اون HOC قرار بدیم. مثل :
<WithAuthentication>
<App/>
</WithAuthentication>
با این روش کد خیلی کمتری مینویسیم و اپیکیشن خیلی توسعه پذیرتر و تمیزتری خواهیم داشت.
دیباگینگ و Log گرفتن با HOC در ری اکت ( Logging )
فرض کنیم ما میخوایم در زمان های خاصی از بخش های خاصی log بگیریم تا بهتر بتونیم کامپوننت های خودمون رو دیباگ کنیم.
ما میتونیم یک Higher-Order-Components در ری اکت بسازیم و عملیات Log گرفتن رو داخلش بنویسیم.
مثلا اسمش رو میزاریم WithLogging و هرچیزی که داخل این HOC باشه، طبق خواسته خودمون Log گرفته میشه:
<WithLogging>
<App/>
</WithLogging>
استایل دادن و مدیریت تم با HOC در ری اکت ( Styling & Theming )
ما میتونیم design system خودمون رو به کمک Higher-Order-Components در ری اکت مدیریت کنیم. درحقیقت میتونیم reUsable Styles داشته باشیم!
اگر میخوایم یک استایل یکسان رو به چندین کامپوننت مختلف اعمال کنیم، نیازی نیست که اون استایل رو تو هرکامپوننت بنویسیم!
میتونیم یک HOC بسازیم و اون استایل رو به تمام کامپوننت های مدنظرمون اعمال کنیم.
تمامی کامپوننت هایی که از اون HOC استفاده میکنن، استایل دلخواه ما روشون اعمال میشه:
<WithDarkmode>
<App/>
</WithDarkmode>
جمع بندی
ویژگی HOC در React یکی از ویژگی های بسار کاربردی کتابخونه ری اکت هست. به کمک این ویژگی میتونیم یک Logic رو بین کامپوننت های مختلف به اشتراک بزاریم.
اینجوری دیگه کد تکراری در هر کامپوننت نمینویسیم! در واقع یکبار اون Logic رو مینویسیم و بارها ازش استفاده میکنیم.
بطور مثال برای بحث Authentication و مدیریت Theme میتونیم از HOC در React کمک بگیریم.
HOC به ما این اجازه رو میده که یک قابلیت یا ویژگی رو به کامپوننت های خودمون اضافه کنیم، بدون اینکه اون کامپوننت هارو تغییر بدیم ( کدشون رو ویرایش کنیم ).
در واقع Higher-Order-Components در ری اکت از ما یک یا چند کامپوننت به عنوان ورودی میگیره و یک کامپوننت بروز شده تحویل میده
بطور خلاصه میتونیم یک Logic رو بین کامپوننت های خودمون به اشتراک بزاریم.
برای به اشتراک گذاری یک Logic بین کامپوننت های مختلف.
اینکه کد تکراری نمینویسم!
یک کد رو یکبار مینویسیم و در کامپوننت های مدنظرمون ازش استفاده میکنیم.
دیدگاهتان را بنویسید