HOC یا Higher Order Component در ری اکت

HOC یا Higher Order Component یک الگوی طراحی در ری اکت است که به شما امکان می‌دهد تا قابلیت‌ها یا ویژگی‌هایی را به یک کامپوننت اضافه کنید. اصطلاح "Higher Order" به معنای این است که این کامپوننت یک کامپوننت دیگر را می‌پذیرد و یک کامپوننت جدید با قابلیت‌های اضافی ایجاد می‌کند.

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

مثال:

import React, { useEffect, useState } from 'react';

// یک هاک ساده برای اضافه کردن وضعیت لاگین به یک کامپوننت
const withAuth = (WrappedComponent) => {
  return (props) => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    useEffect(() => {
      // منطق بررسی وضعیت لاگین
      // مثال ساده‌ای از چک کردن این که آیا کاربر لاگین کرده یا نه
      const checkUserLoginStatus = () => {
        // اینجا باید منطق بررسی وضعیت لاگین شما قرار گیرد
        // این تابع باید یک مقدار بولین برگرداند
        // مثال: return true; یا return false;
      };

      const isLoggedIn = checkUserLoginStatus();
      setIsLoggedIn(isLoggedIn);
    }, []);

    // اگر کاربر لاگین کرده، وضعیت لاگین را به عنوان پراپ به کامپوننت اصلی ارسال کنید
    if (isLoggedIn) {
      return <WrappedComponent isLoggedIn={isLoggedIn} {...props} />;
    } else {
      // در غیر این صورت می‌توانید یک پیام یا رفتار خاص را نمایش دهید
      return <p>لطفاً وارد شوید</p>;
    }
  };
};

// استفاده از هاک برای اضافه کردن وضعیت لاگین به یک کامپوننت
const Profile = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <p>پروفایل کاربر</p> : <p>لطفاً وارد شوید</p>}
    </div>
  );
};

const ProfileWithAuth = withAuth(Profile);

در اینجا، `withAuth` یک HOC است که وضعیت لاگین را به کامپوننت اصلی `Profile` اضافه می‌کند. می‌توانید از `ProfileWithAuth` به جای `Profile` در بخش‌هایی از برنامه خود استفاده کنید که نیاز به چک کردن وضعیت لاگین دارند.

در واقع Higher Order Component یک تکنیک قدرتمند در ری اکت است که امکان می‌دهد تا منطق یا ویژگی‌های خاصی را به صورت تجمیعی به کامپوننت‌های دیگر اضافه کنید. در واقع، HOC یک تابع است که یک کامپوننت را می‌پذیرد و یک کامپوننت جدید با ویژگی‌های اضافی یا تغییرات ایجاد می‌کند.

در مثال قبلی:

- `withAuth` یک HOC است که به عنوان ورودی یک کامپوننت (`WrappedComponent`) می‌پذیرد.

- این HOC یک کامپوننت جدید با ویژگی اضافی `isLoggedIn` ایجاد می‌کند.

- این کامپوننت جدید در اصطلاح، "اطلاعات لاگین را دریافت کرده و به `WrappedComponent` ارسال می‌کند.

استفاده از HOC به تنظیم منطق مشترک در بین کامپوننت‌ها، جلوگیری از تکرار کد، و افزایش قابلیت‌توسعه و نگهداری کد کمک می‌کند. این تکنیک به ویژه در مواردی مانند مدیریت استیت‌ها، توزیع قابلیت‌های لاگین، یا حتی اعمال ویژگی‌های UI مشترک مفید است.

با کلیک روی اینجا: برام قهوه بخر