#HOC
#DesignPattern
#ReactJs

❇️ HOC (Higher Order Component) Design Pattern in React JS

🔹 این پست درباره یکی از روش های رعایت DRY با استفاده از الگوی HOC در ری اکت جی اس میباشد.

🔸 الگوی HOC تکنیکی است که از آن برای استفاده مجدد از منطق یک کامپوننت استفاده میشود.
درواقع HOC یک فانکشن است که به عنوان پارامتر یک کامپوننت دریافت میکند و خروجی آن یک کامپوننت جدید است.

🔹شرایطی را در نظر بگیرید که برای ساخت یک کامپوننت باید منطقی را پیاده سازی کنید اما قبلا یک کامپوننت دیگر با همین منطق پیاده سازی کرده اید و دو کامپوننت فقط در UI با یکدیگر متفاوت اند، در چنین شرایطی می توانید با استفاده از HOC منطق اصلی کامپوننت پیشین خود را دوباره استفاده کنید و به جای دوباره پیاده سازی کردن آن، از آن در کامپوننت جدید خود استفاده کنید. کامپوننت جدید می تواند UI ای کاملا متفاوت از کامپوننت اصلی داشته باشد، در حالی که منطق مشابهی دارد.


▫️برای دانستن اینکه HOC چیست و چگونه میتوان از آن استفاده کرد به مثال زیر توجه نمایید :
🔻در مثال زیر یک کامپوننت clickable ساده ساخته ایم که یک Button را رندر میکند و به عنوان props یک text و یک onClick ایونت دریافت میکند.

 
import React from "react";

export function Clickable(props) {
  return <Button onClick={props.onClick}>
    {props.text}
  </Button>
} 

🔻حال با استفاده از HOC می خواهیم کامپوننتی بسازیم که منطقی یکسان دارد و به آن ویژگی های جدید اضافه کنیم همچنین لازم است کامپوننت خود را Toggleable کنیم. و از این به بعد هر زمان که به HOC فانکشن خود یک Clickable کامپوننت به عنوان پارامتر دهیم یک کامپوننت جدید با عملکری Toggleable ریترن میکند.
```
import React from "react";

makeToggleable(Clickable) {

return class extends React.Component {

constructor() {
super();
this.toggle = this.toggle.bind(this);
this.state = {
show: false
};
}

toggle() {
this.setState(prevState => ({ show: !prevState.show }));
}

render() {
return (
<div>
<Clickable {...this.props} onClick={this.toggle} />
{this.state.show && this.props.children}
</div>
)
}
}
} ```


@fullStackDevs