React Higher Order Components چیست

اینکه تا الان با React برنامه نویسی می کردید عالی است.آیا در مورد یکی از الگوهای جالب React که High Order Components نامیده می شود، چیزی شنیده اید؟در این مقاله، اجازه دهید نگاهی اجمالی بهReact Higher بیندازیم و یاد بگیریم که چجوری میتونیم از آنها در برنامه های React خود استفاده کنیم. پس سعی میکنیم در این پست بلاگ به این سوال پاسخ دهیم که React Higher چیست و در مورد React Higher Order Components صحبت کنیم.

یادگیری Higher Order Components کاری سختی نیست و استفاده از آن می توانید برای شما خیلی مفید باشد و این کاملا اختیاری است.شما هنوز هم می توانید بدون Higher Order Components برنامه های React بسیار جذابی را تولید کنید.اما این یک الگوی طراحی که با یک بار یادگیری می توانید از مزایا آن استفاده کنید.

High Order Functions

high order component مفهوم جدیدی نیست که با React معرفی شده باشد.در جاوا اسکریپت گاهی اوقات از High Order Function استفاده می کنیم.

ساده ترین تعریفی که میتونیم از Higher-Order functions داشته باشیم :

تابعی که یک تابع دیگر را بپذیرد یا return کند را higher-order function گویند

دیاگرام زیر مفهوم high order function را به صورت کامل نشان می دهد.

مدتی قبل مقاله ای در این باره نوشتم که می توانید برای درک بهتر Higher-Order Functions در جاوا اسکریپت آن را بخوانید.

Higher-Order Functions در جاوا اسکریپت

React Higher Order Components چیست

اکنون می توانیم همان مفهوم را در معماری کامپوننت ها در React گسترش دهیم. در React همه چیز بر پایه کامپوننت است.

(Higher Order Component (HOC یک تابع است که یک component را میگیرد و یک component را return می کند

نکته: HOCs در واقع یک بخش از React API نیست. اما این بیشتر یک الگوی کد است که به دلیل ماهیت ترکیبی آن به نظر می رسد متناسب با React باشد.

HOCs چه مشکلی را حل می کند

قبل از اینکه شما یک Higher Order Components را بنویسید باید این سوال رو از خودتون بپرسید که “HOCs های سعی دارند چه مشکلی را برطرف کنند؟”

در توسعه نرم افزار یکی از اصول متداول این است که “Don’t Repeat YourSelf” که اختصارا DRY نامیده می شود.من در از اصل DRY در چندین زبان استفاده کرده ام و توصیه می کنم به عنوان یک متخصص حتما از این اصل استفاده کنید.

در React یکی از راه های رسیدن به DRY این است که از مفهوم (Higher Order Component (HOC استفاده کنید.شما می توانید قابلیت های مشترک را بدون تکرار کد با استفاده از HOCs به اشتراک بزارید.

ساختار HOC

در مثال زیر می توانید ببنید که HOC در React چگونه است.Higher Order Component در واقع یک تابع است که یک component را به عنوان argument می گیرد و یک کامپوننت جدید را returns می کند.همچنین میتونه کامپوننت original رو که به عنوان argument پاس داده شده رو returns کنه

function myHOC (myOtherComponent) {
  return class extends React.Component {
    render() {
      return <myOtherComponent {...this.props}/>
    }
  }
}

function myHOC (myOtherComponent) {

return class extends React.Component {

render() {

return <myOtherComponent {...this.props}/>

}

مثال

تا الان با مفهوم Higher Order Components آشنا شدیم.در ادامه با یک مثال نحوه استفاده و کار با HOCs را یاد می گیریم.

ایجاد Component

class BlogInformation extends React.Component {
  render() {
    return (
      <div className="blogInfo">
        <h3>Blog Author: {this.props.author}</h3>
        <h3>Article: {this.props.article}</h3>
      </div>
    );
  }
}

class BlogInformation extends React.Component {

render() {

return (

<h3>Blog Author: {this.props.author}</h3>

<h3>Article: {this.props.article}</h3>

</div>

);

}

من یک کامپوننت به نام BlogInformation ایجاد کردم که یک class component ساده است و نام نویسنده و نام مقاله پاس داده شده را نمایش می دهد.هر دو نام به عنوان props به کامپوننت پاس داده شدند.

Hook های مفیدی که باید در پروژه بعدی React خود از آن استفاده کنید

فراخوانی Component

من قصد دارم در فایل App.js کامپوننت را با پاس دادن props فراخوانی کنم

export default function App() {
  return (
    <div className="App">
      <BlogInformation author="Adhithi" article="New article" />
    </div>
  );
}

export default function App() {

return (

</div>

);

}

تاکنون ، کار خاصی انجام نداده ایم. ما فقط یک کامپوننت را ایجاد کردیم و آن رادر parent component فراخوانی کردیم. وقتی این کد را اجرا می کنیم ، خروجی زیر را خواهیم دید.

خوب ، اکنون بیایید در مورد تقویت این کامپوننت فکر کنیم.اگر بخواهیم نام نویسنده بدون نام مقاله نوشته شده را در بخش مقاله نشان دهیم،زمانی که هیچ نام مقاله ای به عنوان props پاس داده نشود، چه می شود؟

یا اگر هیچ نویسنده ای پاس داده نشود و قصد داشته باشیم یک پیغام اختصاصی نمایش بدهیم، باید چکار کنیم؟

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

خوب ، من قصد دارم تا کمی کامپوننت BlogInformation را تغییر دهم.

class BlogInformation extends React.Component {
  render() {
    return (
      <div className="blogInfo">
        <h3>Blog Author: {this.props.author}</h3>
        <h3>Article:{" "}
          {this.props.article ? this.props.article : "No articles written"}
       </h3>
      </div>
    );
  }
}

class BlogInformation extends React.Component {

render() {

return (

<h3>Blog Author: {this.props.author}</h3>

<h3>Article:{" "}

{this.props.article ? this.props.article : "No articles written"}

</h3>

</div>

);

}

ایجاد Higher Order Component

اکنون فرصتی مناسب برای ایجاد HOC است.

const myHOCFunction = MyComponent => {
  return class extends MyComponent {
    render() {
      if (this.props.author) {
        return <MyComponent {...this.props} />;
      } else {
        return (
          <div className="UserInfo">
            <h3>There are no authors at this time</h3>
          </div>
        );
      }
    }
  };
};

export default myHOCFunction(BlogInformation);

const myHOCFunction = MyComponent => {

return class extends MyComponent {

render() {

if (this.props.author) {

return <MyComponent {...this.props} />;

} else {

return (

<h3>There are no authors at this time</h3>

</div>

);

}

};

export default myHOCFunction(BlogInformation);

در ادامه خلاصه ای از کد بالا آورده شده است:

ما یک HOC به نام myHOCFunction ایجاد کردیم که یک component را می گیرد و یک component جدید را returns می کند.
چک می شود که آیا author به عنوان props به کامپوننت پاس داده شده است یا نه.
اگر author پاس داده شدع باشد، کامپوننت بدون هیچ تغییری returns می شود.
اگر اطلاعات author وجود نداشت، یک component جدید با یک پیغام سفارشی renders می شود.
در پایان ما myHOCFunction را با پاس دادن BlogInformation فراخوانی می کنیم.

کد کامل برنامه و نحوه کار اون رو می تونید در sandbox به آدرس زیر ببینید:

React HOC Sandbox

برای درک بهتر این موضوع و کار با یک مثال واقعی می توانید مقاله نوشتن HOC برای مدیریت کردن Error های axios در React رو که قبلا در ویرگول منتشر کردم رو بخونید.

نتیجه گیری

Higher Order Components اجازه می دهد تا کد شما abstract شود . HOC فقط یک الگوی طراحی است ، و شما می توانید بسته به سبک برنامه نویسی ویژگی های مورد نیاز پروژه از آن استفاده کنید.

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

navid khalilian گفت:

مارس 18, 2022 در 3:21 ب.ظ

خیلی بد توضیح میدید. الان اشاره کردید که HOC ها مشکل DRY را حل میکنند. ولی در مثال هیچ اشاره ای به این موضوع نشده. در واقع من بعنوان مخاطب اصلا با خوندن متن شما متوجه نشدم که در این مثال شما تفاوت استفاده از HOC و عدم استفاده چیه. پیشنهاد میکنم به متنی که مینویسید دقت کنید. مخاطب شما چیزهایی که در فکر شما میگذره رو نمیدونه و باید با خوندن این متن بتونه موضوع رو کامل درک کنه. این انتقاد رو بجهت سازندگی و بهبود کیفیت مقالات داشتم. پیشاپیش سال نو مبارک.

پاسخ
- مهدی حسن زاده گفت:
  
  مارس 19, 2022 در 11:33 ق.ظ
  
  سلام ممنون از پشنهادتون
  این ترجمه یک مقاله است و هیچ دخل و تصرفی در اون انجام نشده. در انتها این مقاله به یک مقاله در ویرگول ارجاع دادیم که به طور کامل میتونید درک کنید کاربرد HOC
  
  پاسخ

High Order Functions

React Higher Order Components چیست

HOCs چه مشکلی را حل می کند

ساختار HOC

مثال

ایجاد Component

فراخوانی Component

ایجاد Higher Order Component

نتیجه گیری

مطالب زیر را حتما مطالعه کنید

ویژگی ها و قابلیت های جدید react 18

فریمورک های Frontend که باید در سال 2021 یاد بگیرید

نگاه اولیه به React Server Component

5 React Best Practice که باید در سال 2020 یاد بگیرید

Hook های مفیدی که باید در پروژه بعدی React خود از آن استفاده کنید

آموزش استفاده و کار با useContext Hook در react

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ