प्रतिक्रिया हुक
संस्करण 16.8 में रिएक्ट में हुक जोड़े गए थे।
हुक फ़ंक्शन घटकों को राज्य और अन्य प्रतिक्रिया सुविधाओं तक पहुंचने की अनुमति देते हैं। इस वजह से, आमतौर पर वर्ग घटकों की आवश्यकता नहीं होती है।
हालांकि हुक आम तौर पर वर्ग घटकों को प्रतिस्थापित करते हैं, प्रतिक्रिया से कक्षाओं को हटाने की कोई योजना नहीं है।
एक हुक क्या है?
हुक हमें राज्य और जीवनचक्र विधियों जैसे रिएक्ट सुविधाओं में "हुक" करने की अनुमति देते हैं।
उदाहरण:
यहाँ एक हुक का एक उदाहरण है। अगर इसका कोई मतलब नहीं है तो चिंता न करें। हम अगले भाग में और अधिक विस्तार में जाएंगे ।
import React, { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
आपको importसे हुक करना होगा react.
यहां हम useStateएप्लिकेशन स्थिति का ट्रैक रखने के लिए हुक का उपयोग कर रहे हैं।
राज्य आमतौर पर एप्लिकेशन डेटा या गुणों को संदर्भित करता है जिन्हें ट्रैक करने की आवश्यकता होती है।
हुक नियम
हुक के लिए 3 नियम हैं:
- हुक को केवल रिएक्ट फ़ंक्शन घटकों के अंदर ही बुलाया जा सकता है।
- हुक को केवल एक घटक के शीर्ष स्तर पर ही बुलाया जा सकता है।
- हुक सशर्त नहीं हो सकते
नोट: रिएक्ट क्लास के घटकों में हुक काम नहीं करेगा।
कस्टम हुक
यदि आपके पास स्टेटफुल लॉजिक है जिसे कई घटकों में पुन: उपयोग करने की आवश्यकता है, तो आप अपने स्वयं के कस्टम हुक बना सकते हैं।
हम कस्टम हुक अनुभाग में और अधिक विस्तार में जाएंगे ।