بررسی Higher-Order-Components در ری اکت ! HOC در ری اکت چیست ؟

‫HOC یا Higher-Order-Components در ری اکت یکی از مهمترین ویژگی های کتابخونه ری اکت هست که به ما اجازه میده از یک منطق ( Logic ) در چندین کامپوننت استفاده کنیم.عبارت HOC در ری اکت مخفف Higher-Order-Component هست و تو این مقاله ممکنه هر دو لغت رو ببینید.با فرانت اندی همراه باشید که میخوایم ویژگی خفن HOC در ری اکت رو بررسی کنیم ?‫Higher-Order-Components در ری اکت چیست ؟HOC به ما این اجازه رو میده که یک قابلیت یا ویژگی رو به کامپوننت های خودمون اضافه کنیم، بدون اینکه اون کامپوننت هارو تغییر بدیم ( کدشون رو ویرایش کنیم )در واقع Higher-Order-Components در ری اکت از ما یک کامپوننت به عنوان ورودی میگیره و یک کامپوننت بروز شده تحویل میده.بطور مثال ما میتونیم قابلیت احراز هویت ( Authentication ) رو به کامپوننت ها و صفحات خودمون به صورتی اضافه کنیم که لازم نباشه هیچ تغییری در کامپوننت ها و صفحات خودمون اعمال کنیم!رعایت قانون DRY با HOC !توی برنامه نویسی اصولی، یک اصل هست به اسم Clean Coding ( کد نویسی تمیز )کد نویسی تمیز قوانین زیادی داره که ما به عنوان یک Developer حرفه ای باید اون قوانین رو رعایت کنیم. یکی از این قوانین DRY ( مخفف don,t Repeat Yourself ) هست.این قانون میگه که :کد های تکراری ننویس !قانون DRY در برنامه نویسی‫HOC به ما اجازه میده که از نوشتن کدهای تکراری جلوگیری کنیم.در واقع این امکان رو به ما میده که یک logic رو بین کامپوننت های خودمون به اشتراک بزاریم و دیگه نیازی نباشه بارها اون logic رو در کامپوننت های مختلف بنویسیم!ویژگی منحصر بفرد HOC چیه ؟این سه مورد زیر ویژگی منحصربفرد higher-order-components در ری اکت هست :‫HOC ها برای Reusable کردن یک تیکه کد کاربرد دارن.‫HOC ها کامپوننت هارو ویرایش نمیکنن، بلکه یک نسخه بروز شده از اون کامپوننت میسازن.‫HOC ها pure function هستن و هیچ side Effect ندارن.چطور یک Higher-Order-Components بسازیم ؟برای ساخت یک HOC در ری اکت باید طبق دستورالعمل زیر عمل کنیم.تو مرحله اول باید یک تابع HOC بسازیم. این تابع به عنوان آرگومان ورودی یک کامپوننت دریافت میکنه و یک کامپوننت جدید با ویژگی های اضافی به ما تحویل میده.در حقیقت همون کامپوننت ورودی رو ، با یکسری ویژگی های اضافه return میکنیم.تابع HOC باید بصورت زیر باشه :const hoc = (WrappedComponent) => { // ... }تو مثال بالا تابع HOC رو ساختیم. ضمن اینکه به عنوان آرگومان ورودی، یک کامپوننت دریافت کردیم.حالا برای اینکه به کامپوننت دریافت شده یکسری قابلیت یا ویژگی اضافه کنیم، باید یک کامپوننت جدید بسازیم.کامپوننت جدید ما، همون کامپوننت ورودی ما هست + یکسری ویژگی جدید :class NewComponent extends React.Component { // ... render() { // ... } }تو تیکه کد بالا، ما یک کامپوننت جدید ساختیم که قراره همون کامپوننت ورودی رو داخلش return کنیم. این کامپوننت جدید میتونه ویژگی های جدیدی به کامپوننت ورودی اضافه کنه.حالا که کامپوننت جدید ( NewComponent ) رو ساختیم، باید کامپوننت ورودی رو داخلش return کنیم + Props ها و ویژگی های جدید !class NewComponent extends React.Component { // ... render() { return <WrappedComponent {...this.props} additionalProp={additionalProp} /> }}تو تیکه کد بالا، ما یکسری ویژگی به کامپوننت ورودی خودمون اضافه کردیم.این یعنی ما میتونیم یکسری قابلیت به کامپوننت های خودمون اضافه کنیم بدون اینکه اون کامپوننت رو ویرایش کنیم .تابع HOC کامل ما بصورت زیر میشه :const hoc = (WrappedComponent) => { class NewComponent extends React.Component { render() { return <WrappedComponent {...this.props} additionalProp={additionalProp} /> } } return NewComponent; }برای مطالعه ادامه مقاله + تیکه کد ها و مثال های بیشتر لطفا روی لینک زیر کلیک کنید : ‫Higher Order Components در ری اکت