دمج خطافات React في مكونات فئة React الموجودة

كما لاحظت، تقدم خطافات React طريقة بديلة لإدارة الحالة والمنطق في تطبيقات الرد. ومع ذلك، قد ترغب في ترحيل المكونات القائمة على الصنف لديك تدريجيًا لاحتضان مزايا الخطافات.

ولحسن الحظ، يوجد حل لهذا التحدي: المكونات ذات الترتيب الأعلى (HOCs). توفر المكوّنات ذات الترتيب الأعلى طريقة لتغليف مكون الفصل الخاص بك بوظيفة تُدخل وظائف قائمة على الخطاف.

إنشاء ملف ذو ترتيب عالي باستخدام الخطافات

لإنشاء ملف ذو ترتيب عالي يدمج React هوك، اتبع الخطوات التالية:

1. حدد دالة تأخذ مكون الفصل الخاص بك كوسيطة.
2. ضمن هذه الوظيفة، قم بإنشاء مكون جديد يسمى WrappedComponent.
3. داخل WrappedComponent، استخدم خطاف React المطلوب لاستخراج واستخدام الحالة أو المنطق الضروري.
4. قم بتمرير قيمة الإرجاع للخطاف كدعائم لمكون الفئة.
5. قم بإرجاع WrappedComponent من الدالة HOC.

مثال:

لنفترض أن لديك مكون فئة يسمى MyDiv:

class MyDiv extends React.component {
   constructor(){
      this.state={sampleState:'hello world'}
   }
   render(){
      return 
{this.state.sampleState}
   }
}

لإضافة حالة قائمة على الخطاف إلى MyDiv، يمكنك إنشاء HOC:

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return ;
  }
}

دمج المكون المخصص

الآن، يمكنك تغليف مكون فئة MyDiv الخاص بك مع withMyHook HOC:

class MyComponent extends React.Component {
  render(){
    const myHookValue = this.props.myHookValue;
    return 
{myHookValue}
;
  }
}

export default withMyHook(MyComponent);

باستخدام هذه التقنية، يمكنك دمج خطافات React تدريجيًا في قاعدة التعليمات البرمجية الحالية القائمة على الفصل دون الحاجة إلى إعادة هيكلة كبيرة.