ری اکت و (Higher Order Components) به زبان ساده

در این مقاله ابتدا به تعریف و مفهوم HOC می پردازیم و سپس یک HOC می نویسیم.

مفهوم HOC:

نوعی کامپوننت و به عبارتی بهتر نوعی پترن در React JS است که برای به اشتراک گذاری عملیات تکراری بین کامپوننت ها بدون تکرار کد اسفاده میشود. HOC یک کامپوننت را به عنوان ورودی دریافت میکند و یک کامپوننت دیگر را به عنوان خروجی برمیگرداند. در واقع HOC در بین لایه های کامپوننت ها قرار میگیرد. برای درک بهتر به شبه کد زیر دقت کنید :

همانطور که در شکل بالا مشاهده می کنید کامپوننت higherOrderComponent کامپوننت WrappedComponent را به عنوان ورودی دریافت کرده. در این مرحله میتوان یک سری prop به WrappedComponent پاس داده و در نهایت آن را برگرداینم.

فقط باید دقت شود که در این حین نباید prototype کامپوننت تغییر کند .

با استفاده از این روش میتوان پراپ هایی که نیازی به ارسال به WrappedComponent ندارند را فیلتر کنیم. به کد زیر دقت کنید :

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

البته روش بهتر برای ذخیره سازی داده استفاده از global state (به عنوان مثال redux) است.

تا به این مرحله یک Custom HOC نسبتا ساده نوشتیم. نحوه ی استفاده از این HOC به شکل زیر است :

نمونه های معروف HOC که اکثر برنامه نویسان از آن ها به صورت روزمره استفاده میکنند عبارتند از :

• connect (React Redux)
• withRouter (React Router Dom)
• withStyles (Material-ui)

منابع:‌

- https://levelup.gitconnected.com/understanding-react-higher-order-components-by-example-95e8c47c8006

- https://medium.com/@rossbulat/how-to-use-react-higher-order-components-c0be6821eb6c