React Higher Order Components چیست
اینکه تا الان با React برنامه نویسی می کردید عالی است.آیا در مورد یکی از الگوهای جالب React که High Order Components نامیده می شود، چیزی شنیده اید؟در این مقاله، اجازه دهید نگاهی اجمالی به Higher Order Components بیندازیم و یاد بگیریم که چجوری میتونیم از آنها در برنامه های React خود استفاده کنیم.
یادگیری 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 در جاوا اسکریپت آن را بخوانید.
https://reactapp.ir/what-are-higher-order-functions-in-javascript
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 کنه
1 2 3 4 5 6 7 | function myHOC (myOtherComponent) { return class extends React.Component { render() { return <myOtherComponent {...this.props}/> } } } |
مثال
تا الان با مفهوم Higher Order Components آشنا شدیم.در ادامه با یک مثال نحوه استفاده و کار با HOCs را یاد می گیریم.
ایجاد Component
1 2 3 4 5 6 7 8 9 10 | class BlogInformation extends React.Component { render() { return ( <div className="blogInfo"> <h3>Blog Author: {this.props.author}</h3> <h3>Article: {this.props.article}</h3> </div> ); } } |
من یک کامپوننت به نام BlogInformation ایجاد کردم که یک class component ساده است و نام نویسنده و نام مقاله پاس داده شده را نمایش می دهد.هر دو نام به عنوان props به کامپوننت پاس داده شدند.
فراخوانی Component
من قصد دارم در فایل App.js کامپوننت را با پاس دادن props فراخوانی کنم
1 2 3 4 5 6 7 | export default function App() { return ( <div className="App"> <BlogInformation author="Adhithi" article="New article" /> </div> ); } |
تاکنون ، کار خاصی انجام نداده ایم. ما فقط یک کامپوننت را ایجاد کردیم و آن رادر parent component فراخوانی کردیم. وقتی این کد را اجرا می کنیم ، خروجی زیر را خواهیم دید.
خوب ، اکنون بیایید در مورد تقویت این کامپوننت فکر کنیم.اگر بخواهیم نام نویسنده بدون نام مقاله نوشته شده را در بخش مقاله نشان دهیم،زمانی که هیچ نام مقاله ای به عنوان props پاس داده نشود، چه می شود؟
یا اگر هیچ نویسنده ای پاس داده نشود و قصد داشته باشیم یک پیغام اختصاصی نمایش بدهیم، باید چکار کنیم؟
در این مرحله ، کامپوننت شروع به رشد می کند. به خاطر داشته باشید که ما هنوز با یک ویژگی ساده سروکار داریم که می توانیم بدون استفاده از HOC همه این موارد را در یک کامپوننت داشته باشیم. اما این پست با هدف نشان دادن استفاده از HOC با یک مثال ساده برای درک نحوه استفاده از آن نوشته شده است.
خوب ، من قصد دارم تا کمی کامپوننت BlogInformation را تغییر دهم.
1 2 3 4 5 6 7 8 9 10 11 12 | 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> ); } } |
ایجاد Higher Order Component
اکنون فرصتی مناسب برای ایجاد HOC است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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); |
در ادامه خلاصه ای از کد بالا آورده شده است:
- ما یک HOC به نام myHOCFunction ایجاد کردیم که یک component را می گیرد و یک component جدید را returns می کند.
- چک می شود که آیا author به عنوان props به کامپوننت پاس داده شده است یا نه.
- اگر author پاس داده شدع باشد، کامپوننت بدون هیچ تغییری returns می شود.
- اگر اطلاعات author وجود نداشت، یک component جدید با یک پیغام سفارشی renders می شود.
- در پایان ما myHOCFunction را با پاس دادن BlogInformation فراخوانی می کنیم.
کد کامل برنامه و نحوه کار اون رو می تونید در sandbox به آدرس زیر ببینید:
برای درک بهتر این موضوع و کار با یک مثال واقعی می توانید مقاله نوشتن HOC برای مدیریت کردن Error های axios در React رو که قبلا در ویرگول منتشر کردم رو بخونید.
نتیجه گیری
Higher Order Components اجازه می دهد تا کد شما abstract شود . HOC فقط یک الگوی طراحی است ، و شما می توانید بسته به سبک برنامه نویسی ویژگی های مورد نیاز پروژه از آن استفاده کنید.
دیدگاهتان را بنویسید