क्लासिक क्लास घटकों के साथ रिएक्ट हुक को एकीकृत करना

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

निम्नलिखित वर्ग घटक पर विचार करें:

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 ;
  }
}

हालाँकि सीधे क्लास घटक से हुक का उपयोग नहीं किया जाता है, यह विधि आपको कोड रीफैक्टरिंग के बिना हुक की कार्यक्षमता का लाभ उठाने की अनुमति देती है।

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

export default withMyHook(MyComponent);

इस दृष्टिकोण का उपयोग करके, आप उत्तरोत्तर अपने वर्ग-आधारित घटकों में हुक पेश कर सकते हैं, जिससे अधिक आधुनिक रिएक्ट आर्किटेक्चर की ओर एक सहज संक्रमण की अनुमति मिलती है।