आप पहले से ही रिएक्ट हुक के बारे में जान सकते हैं और यहां तक ​​​​कि फ्रेमवर्क द्वारा प्रदान किए जाने वाले मूल हुक के बारे में भी। हुक आपको बिना कक्षा लिखे राज्य और अन्य सुविधाओं का प्रबंधन करने देता है। मूल हुक हैं राज्य का उपयोग करें, उपयोग प्रभाव, तथा उपयोग प्रसंग. इस लेख में, आप कुछ अतिरिक्त हुक के बारे में जानेंगे जो अधिक जटिल व्यवहार जोड़ते हैं।

आप जो अतिरिक्त हुक सीखेंगे, वे हैं उपयोग रेफरी तथा मेमो का उपयोग करें.

उपयोग रेफरी

NS उपयोग रेफरी फ़ंक्शन एक परिवर्तनशील रेफरी ऑब्जेक्ट देता है और इसकी शुरुआत करता है ।वर्तमान पारित तर्क के लिए संपत्ति। लोग अक्सर के उपयोग को भ्रमित करते हैं उपयोग रेफरी हुक के साथ राज्य का उपयोग करें हुक आप इस हुक को a का संदर्भ रखने के लिए निर्देश दे सकते हैं एचटीएमएल तत्व. इस संदर्भ का उपयोग करके, आप आसानी से उस तत्व में हेरफेर कर सकते हैं।

NS उपयोग रेफरी हुक में केवल एक ही संपत्ति है: ।वर्तमान. जब इसका तत्व बदलता है तो प्रतिक्रिया पृष्ठ को फिर से प्रस्तुत नहीं करता है। न ही यह फिर से प्रस्तुत करता है यदि आप का मान बदलते हैं।वर्तमान संपत्ति। आइए इस हुक के उपयोग को एक उदाहरण से समझते हैं:

'प्रतिक्रिया' से आयात प्रतिक्रिया, {useState, useRef};
निर्यात डिफ़ॉल्ट फ़ंक्शन ऐप () {
कॉन्स्ट काउंट = यूजरेफ (अशक्त);
कॉन्स्ट [संख्या, सेटनंबर] = यूज़स्टेट (0);
कॉन्स्ट चेकनंबर = () => {
अगर (गिनती। वर्तमान। मूल्य <10) {
count.current.style.backgroundColor = "लाल";
} अन्यथा {
count.current.style.backgroundColor = "हरा";
}
};
वापसी (


10. से बड़ी कोई संख्या दर्ज करें

रेफरी = {गिनती}
टाइप = "टेक्स्ट"
मूल्य = {संख्या}
onChange={(e) => setNumber (e.target.value)}
/>
 चेकनंबर ()}>क्लिक करें



);
}

उपरोक्त कोड में आपके द्वारा इनपुट बॉक्स में दर्ज की गई संख्या के अनुसार इनपुट तत्व का रंग बदल जाता है। सबसे पहले, यह से परिणाम प्रदान करता है उपयोग रेफ () हुक करने के लिए गिनती चर. दो तत्व हैं: इनपुट और बटन। इनपुट तत्व का मान है संख्या और यह संदर्भ इनपुट टैग की संपत्ति है गिनती चर से मेल खाने के लिए।

जब आप बटन पर क्लिक करते हैं, तो संख्या जांचे() समारोह कहा जाता है। यह फ़ंक्शन यह देखने के लिए जाँच करता है कि क्या का मान है संख्या 10 से अधिक है। फिर वो पृष्ठभूमि का रंग सेट करता है का उपयोग कर इनपुट तत्व का गिनती.वर्तमान.शैली.पृष्ठभूमिरंग संपत्ति।

सम्बंधित: CSS फंडामेंटल: कलर्स के साथ काम करना

मेमो का उपयोग करें

यूज़मेमो हुक कैश्ड वैल्यू को फिर से कंप्यूट करेगा जब उसकी कोई भी निर्भरता बदल जाएगी। यह अनुकूलन प्रत्येक रेंडर पर महंगी गणनाओं से बचने में मदद करता है।

का वाक्य-विन्यास मेमो का उपयोग करें हुक इस प्रकार है:

const memoizedValue = useMemo (() => कंप्यूटएक्सपेंसिववैल्यू (ए), [ए]);

बेहतर समझ के लिए, आइए एक उदाहरण पर विचार करें। नीचे दिया गया कोड दो शीर्षकों के रंगों को टॉगल करता है। यह कॉल करता है राज्य का उपयोग करें उनके मूल्यों का ट्रैक रखने के लिए हुक। एक फ़ंक्शन दिखाता है कि रंग उसके मूल्य के अनुसार गर्म या ठंडा है या नहीं। रंग की स्थिति वापस करने से पहले, थोड़ी देर के लिए लूप होता है जो लगभग एक सेकंड के लिए रुक जाता है। यह प्रदर्शन उद्देश्यों के लिए है, के लाभ की व्याख्या करने के लिए मेमो का उपयोग करें हुक

'प्रतिक्रिया' से आयात प्रतिक्रिया, {useState, useMemo};
निर्यात डिफ़ॉल्ट फ़ंक्शन ऐप () {
const [color1, setColor1] = useState ("नीला");
const [color2, setColor2] = useState ("हरा");
कॉन्स्ट टॉगलकलर 1 = () => {
वापसी रंग 1 "नीला"? setColor1 ("लाल"): setColor1 ("नीला");
};
कॉन्स्ट टॉगलकलर 2 = () => {
रंग 2 "हरा"? setColor2 ("नारंगी"): setColor2 ("हरा");
};
कॉन्स्ट डिस्प्लेकलर = () => {
var अब = नई तिथि ()। getTime ();
जबकि (नई तिथि ()। getTime () वापसी रंग 1 "नीला"? "कूल": "हॉट";
};
वापसी (


टेक्स्ट 1 रंग: {color1}

यह {displayColor ()} रंग. है

रंग टॉगल करें
टेक्स्ट 2 रंग: {color2}

रंग टॉगल करें



);
}

जब आप पर क्लिक करते हैं टॉगलबटन1, राज्य बदलते समय आपको थोड़ी देरी दिखाई देनी चाहिए। ध्यान दें कि जब आप क्लिक करते हैं तो विलंब भी होता है टॉगलबटन2. लेकिन ऐसा नहीं होना चाहिए, क्योंकि एक सेकेंड का ठहराव इसी में होता है प्रदर्शन रंग. इस पृष्ठ पर, बटन स्वतंत्र रूप से कार्य करने में सक्षम होने चाहिए। इसे प्राप्त करने के लिए, आप उपयोग कर सकते हैं मेमो का उपयोग करें हुक

आपको लपेटने की जरूरत है प्रदर्शन रंग में समारोह मेमो का उपयोग करें हुक और पास रंग1 निर्भरता सरणी में।

कॉन्स्ट डिस्प्लेकलर = यूज़मेमो (() => {
var अब = नई तिथि ()। getTime ();
जबकि (नई तिथि ()। getTime () वापसी रंग 1 "नीला"? "कूल": "हॉट";
}, [रंग1]);

NS मेमो का उपयोग करें हुक एक फ़ंक्शन और निर्भरता को पैरामीटर के रूप में लेता है। NS मेमो का उपयोग करें हुक केवल तभी प्रस्तुत होगा जब इसकी निर्भरता में से कोई एक बदलता है। यह उन स्थितियों में उपयोगी होता है जब आपको एपीआई से लाना होता है।

हुक सीखने के बाद आगे क्या करें

हुक एक बहुत ही शक्तिशाली विशेषता है और आमतौर पर रिएक्ट परियोजनाओं में उपयोग किया जाता है। वे अनुकूलन के लिए बहुत अधिक संभावनाएं प्रदान करते हैं। आप फॉर्म या क्लॉक काउंटर जैसे छोटे प्रोजेक्ट बनाकर हुक का अभ्यास कर सकते हैं।

अन्य उन्नत हुक हैं जैसे रेड्यूसर का उपयोग करें, उपयोग लेआउट प्रभाव, तथा डिबगवैल्यू का उपयोग करें. आप आधिकारिक रिएक्ट प्रलेखन का हवाला देकर उन्हें सीख सकते हैं।

उन्नति बमानिया (10 लेख प्रकाशित)

उन्नति एक उत्साही फुल स्टैक डेवलपर है। वह विभिन्न प्रोग्रामिंग भाषाओं का उपयोग करके प्रोजेक्ट बनाना पसंद करती है। अपने खाली समय में, वह गिटार बजाना पसंद करती है और खाना पकाने की शौकीन है।

उन्नति बमानिया. की अन्य फ़िल्में-टीवी शो