#FAQ
What is this ?

مجموعه ای کامل از سوالات مصاحبه ،‌ همراه با پاسخ و برخی از نکات کد که به شما کمک می کند تا برای مصاحبه های فنی آماده شوید . بسیاری از این سؤالات از مصاحبه های واقعی هستند و برای اکثرمفاهیم وب سوال وجود دارد

توجه داشته باشید که بسیاری از این سوالات باز هستند و می توانند منجر به بحث های جالبی شوند
مطالب مورد پوشش :‌
#JavaScript #React #VueJs #Angular #NodeJs #AngularJS #Bootstrap #CSS #HTML5 #Sass #Webpack #MongoDB #SQL #GraphQL #CSharp #Golang #Java #ASPNET #ASPNETMVC #NETFramework #Ruby #RubyOnRails #TypeScript #PHP #Android #RESTAPI #DataStructures #DesignPattern #Swift #Agile #Scrum



📌📌 لینک : https://goo.gl/KaMsmK
@fullStackDevs

#DesignPattern
#TypeScript

دیزاین پترن در تایپ اسکریپت

🌀 Design Pattern in TypeScript


https://refactoring.guru/design-patterns/typescript

@FullStackDevs

#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