اجزای مرتبه بالاتر (HOC) در React js

یک جزء مرتبه بالاتر (HOC) یک تکنیک پیشرفته برای استفاده مجدد از منطق مؤلفه است. HOC ها بخشی از React API نیستند، بلکه الگویی هستند که از ماهیت ترکیبی React بیرون می آیند.

یک جزء مرتبه بالاتر تابعی است که یک جزء را به عنوان آرگومان می گیرد و یک مؤلفه جدید را برمی گرداند که مؤلفه اصلی را می پیچد.
این به شما امکان می دهد تا بدون تغییر کد اصلی آن، عملکرد اضافی را به مؤلفه اضافه کنید. HOC ها معمولاً برای به اشتراک گذاشتن عملکردهای مشترک بین چندین مؤلفه، مانند تغییر حالت یا تغییر پایه استفاده می شوند.

1. ایجاد یک جزء با مرتبه بالاتر:

import React from 'react';

// This is the HOC function
function withCounter(WrappedComponent) {
  class WithCounter extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        count: 0,
      };
    }

    handleIncrement = () => {
      this.setState((prevState) => {
        return { count: prevState.count + incremntNuber };
      });
    };
    render() {
      return (
        
      );
    }
  }
return WithCounter;
}

2. استفاده از HOC:

// A simple component
function MyComponent(props) {
  return (
      
        {props.name} Click {props.count} times
      
    );
}

// Wrap the component with the HOC
const EnhancedComponent = withCounter(MyComponent);

// Usage
function App() {
  return ;
}

در این مثال، withCounter است HOC که اطلاعات اضافی را به آن اضافه می کند MyComponent جزء. چه زمانی کامپوننت پیشرفته استفاده می‌شود، MyComponent را با پایه‌های اصلی همراه با پاراگراف اضافی حاوی «برخی اطلاعات اضافی» رندر می‌کند.

3. نکات کلیدی درباره HOC:

توابع خالص: HOC ها باید خالص باشند، به این معنی که نباید جزء اصلی را تغییر دهند. در عوض، آنها باید یک جزء جدید ایجاد کنند که مولفه اصلی را بپیچد.

Props Proxy: HOC ها می توانند پروپ ها را به جزء پیچیده شده ارسال کنند. این الگو برای تزریق لوازم اضافی یا اصلاح موارد موجود قبل از ارسال آنها مفید است.

ترکیب پذیری: HOC ها را می توان تشکیل داد. می توانید چندین HOC ایجاد کنید و آنها را به صورت متوالی روی یک جزء اعمال کنید.

قرارداد: نامگذاری HOC ها با پیشوندی مانند with، مانند withRouter یا withUser، یک قرارداد معمول است تا نشان دهد که HOC است.

روش های استاتیک: HOC ها روش های ایستا را از جزء پیچیده شده کپی نمی کنند. اگر کامپوننت پیچیده شده دارای روش های ثابتی است که باید به آنها دسترسی داشت، باید آنها را به صورت دستی کپی کنید.

در اینجا نمونه ای از حصول اطمینان از حفظ روش های استاتیک آورده شده است:

import React from 'react';

// Helper function to copy static methods
function hoistStatics(targetComponent, sourceComponent) {
  const keys = Object.getOwnPropertyNames(sourceComponent);
  keys.forEach(key => {
    if (!targetComponent.hasOwnProperty(key)) {
      targetComponent[key] = sourceComponent[key];
    }
  });
  return targetComponent;
}

function withExtraInfo(WrappedComponent) {
  class HOC extends React.Component {
    render() {
      return (
        
      );
    }
  }

  // Copy static methods
  hoistStatics(HOC, WrappedComponent);

  return HOC;
}

نتیجه:

HOC ها یک الگوی قدرتمند در React برای استفاده مجدد از منطق مؤلفه هستند، اما باید با احتیاط از آنها برای جلوگیری از سلسله مراتب اجزای بیش از حد پیچیده استفاده شود.