کامپوننت های مرتبه بالاتر (HOC) (HOC)

کامپوننت مرتبه بالاتر در ری اکت مثل قاب گوشی است. قاب گوشی ظاهر و امکانات جدید می دهد؛ خود گوشی عوض نمی شود. کامپوننت مرتبه بالاتر در ری اکت هم همین کار را برای کامپوننت ها می کند.

کامپوننت مرتبه بالاتر در ری اکت چیست؟

کامپوننت مرتبه بالاتر (Higher Order Component) یک تابع جاوااسکریپت است. این تابع یک کامپوننت می گیرد و یک کامپوننت جدید برمی گرداند.

کامپوننت جدید همان قبلی است؛ فقط کمی قوی تر شده است. مثلاً استایل اضافه می گیرد یا داده بیشتری به آن می رسد.

مثل این است که روی دفتر مشق، جلد شفاف بکشی. جلد از دفتر محافظت می کند؛ اما نوشته ها همان است.

نکته: HOC خودش «کامپوننت» نیست؛ یک «تابع سازنده کامپوننت» است.

مثال HOC: اضافه کردن کادر دور کامپوننت

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

// این HOC است؛ دور هر کامپوننت کادر می کشد
function withBorder(WrappedComponent) {
  return function NewComponent(props) {
    return (
      <div
        style={{
          border: '2px solid blue',
          padding: '10px'
        }}
      >
        <WrappedComponent
          {...props}
        />
      </div>
    );
  };
}

// کامپوننت ساده بدون کادر
function Greeting({ name }) {
  return (
    <h1>
      Hello, {name}!
    </h1>
  );
}

// ساختن نسخه دارای کادر
const GreetingWithBorder = withBorder(Greeting);

function App() {
  return (
    <div>
      <Greeting
        name="John"
      />
      <GreetingWithBorder
        name="Jane"
      />
    </div>
  );
}

مشاهده در ادیتور

گام به گام ساخت HOC با کادر

1. تابع withBorder را تعریف کن؛ ورودی آن WrappedComponent است.
2. داخلش یک کامپوننت جدید به نام NewComponent برگردان.
3. در NewComponent یک div با استایل کادر آبی بساز.
4. داخل این div کامپوننت WrappedComponent را با props اصلی رندر کن.
5. حالا با withBorder(Greeting) یک GreetingWithBorder جدید داری.

نکته: کامپوننت Greeting عوض نشده است. فقط یک نسخه جدید کنارش ساخته ای که کادر دارد.

چه زمانی از HOC استفاده کنیم؟

بعضی کارها در چند کامپوننت تکرار می شوند. مثلاً احراز هویت (Authentication) یعنی چک کنیم کاربر لاگین است یا نه.

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

• پیچیدن کامپوننت های محافظت شده پشت یک HOC احراز هویت
• اضافه کردن لاگ و گزارش گیری به چند کامپوننت مختلف
• گرفتن داده مشترک و دادن آن به چند صفحه

نکته: امروز خیلی وقت ها به جای HOC از هوک ها (Hooks) استفاده می کنیم. اما برای بعضی الگوهای سراسری هنوز HOC گزینه خوبی است.

بعد از یادگیری کامپوننت مرتبه بالاتر در ری اکت می توانی سراغ Forward Ref در ری اکت و استایل دهی Sass در ری اکت هم بروی.

جمع بندی سریع

• کامپوننت مرتبه بالاتر در ری اکت یک تابع سازنده کامپوننت است.
• HOC کامپوننت ورودی را نمی شکند؛ فقط به آن قابلیت می افزاید.
• برای کارهای تکراری مثل احراز هویت و گرفتن داده عالی است.
• در پروژه های جدید، هوک ها معمولاً ساده ترند؛ اما HOC هنوز کاربرد دارد.