मौजूदा रिएक्ट क्लास घटकों में रिएक्ट हुक को एकीकृत करना

जैसा कि आपने देखा है, रिएक्ट हुक राज्य और तर्क को प्रबंधित करने के लिए एक वैकल्पिक दृष्टिकोण प्रदान करते हैं प्रतिक्रिया आवेदन. हालाँकि, आप हुक के लाभों को अपनाने के लिए अपने मौजूदा वर्ग-आधारित घटकों को धीरे-धीरे स्थानांतरित करना चाह सकते हैं।

सौभाग्य से, इस चुनौती का एक समाधान है: उच्च-क्रम वाले घटक (एचओसी)। HOCs आपके क्लास कंपोनेंट को एक फ़ंक्शन के साथ लपेटने का एक तरीका प्रदान करते हैं जो हुक-आधारित कार्यक्षमता को इंजेक्ट करता है। हुक, इन चरणों का पालन करें:

एक फ़ंक्शन को परिभाषित करें जो आपके क्लास घटक को एक के रूप में लेता है तर्क।

उस फ़ंक्शन के भीतर, WrappedComponent नामक एक नया घटक बनाएं।

WrappedComponent के अंदर, आवश्यक स्थिति या तर्क को निकालने और उपयोग करने के लिए वांछित रिएक्ट हुक का उपयोग करें।

1. Pass वर्ग घटक के लिए प्रॉप्स के रूप में हुक का रिटर्न मान।
2. HOC से WrappedComponent लौटाएं फ़ंक्शन।
4. उदाहरण:
5. मान लीजिए आपके पास MyDiv नामक एक क्लास घटक है:

क्लास MyDiv React.component का विस्तार करता है { कंस्ट्रक्टर(){ this.state={sampleState:'हैलो वर्ल्ड'} } प्रदान करना(){ वापसी

} }MyDiv में एक हुक-आधारित स्थिति जोड़ने के लिए, आप एक HOC:

function withMyHook(Component) बना सकते हैं { वापसी फ़ंक्शन WrappedComponent(props) { const myHookValue = useMyHook(); वापसी ; } }

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

HOC को एकीकृत करना

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

क्लास MyComponent React.Component का विस्तार करता है { प्रदान करना(){ const myHookValue = this.props.myHookValue; वापसी

; } } निर्यात डिफ़ॉल्ट withMyHook(MyComponent);इस तकनीक का उपयोग करके, आप महत्वपूर्ण रीफैक्टरिंग के बिना धीरे-धीरे रिएक्ट हुक को अपने मौजूदा क्लास-आधारित कोडबेस में एकीकृत कर सकते हैं।