रिएक्ट एक फ्रंट-एंड जावास्क्रिप्ट फ्रेमवर्क है। HTML पेज बनाना और उनका प्रबंधन करना थकाऊ हो सकता है, रिएक्ट ऑन-स्क्रीन तत्वों और उनके तर्क को घटकों में तोड़कर चीजों को आसान बनाता है।

रिएक्ट टेबल पर बहुत कुछ लाता है, लेकिन सबसे उपयोगी सुविधाओं में से एक राज्य प्रबंधन है। इस लेख में, आप सीखेंगे कि रिएक्ट हुक का उपयोग करके राज्य का प्रबंधन कैसे करें। आगे बढ़ने से पहले, यह लेख मानता है कि आप रिएक्ट की मूल बातें जानते हैं।

ReactJS में हुक क्या हैं?

हुक एक नई अवधारणा है जिसे रिएक्ट में राज्य और अन्य के प्रबंधन के लिए पेश किया गया है प्रतिक्रिया की विशेषताएं. रिएक्ट में हुक का उपयोग करके, आप लंबा कोड लिखने से बच सकते हैं जो अन्यथा कक्षाओं का उपयोग करेगा। निम्नलिखित उदाहरण का एक उदाहरण प्रदर्शित करता है: राज्य का उपयोग करें हुक

कॉन्स [चर, सेट वेरिएबल] = यूज़स्टेट (प्रारंभिक मान);

यहां ही चर राज्य है और सेट वेरिएबल वह कार्य है जो राज्य को निर्धारित करता है। राज्य का उपयोग करें वह हुक है जो राज्य चर का प्रारंभिक मान रखता है। चिंता न करें अगर इससे आपको कोई मतलब नहीं है। इस ट्यूटोरियल के अंत तक, आपके पास हुक पर एक ठोस समझ होगी।

दो प्रकार के हुक हैं:

• बुनियादी हुक
  1. राज्य का उपयोग करें
  2. उपयोग प्रभाव
  3. उपयोग प्रसंग
• अतिरिक्त हुक
  1. उपयोग रेफरी
  2. मेमो का उपयोग करें
  3. रेड्यूसर का उपयोग करें

यूजस्टेट ()

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

आप रिएक्ट हुक के सिंटैक्स के लिए पिछले उदाहरण का उल्लेख कर सकते हैं। समझाने का सबसे सरल उदाहरण यूजस्टेट () गणना चर उदाहरण है:

"प्रतिक्रिया" से {useState} आयात करें;
फ़ंक्शन ऐप () {
कास्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0);
वापसी (


हुक उदाहरण

{गिनती}

सेटकाउंट (गिनती+1)}>जोड़ें
सेटकाउंट (गिनती -1)}>घटाना



);
}

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

उपरोक्त कोड में के मान को बढ़ाने और घटाने के लिए दो बटन हैं गिनती चर। वृद्धि करते समय, आप वर्तमान गणना स्थिति में +1 और गिनती को 1 से घटाने के लिए -1 जोड़ सकते हैं।

उपयोग प्रभाव

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

का उपयोग करने का एक उत्कृष्ट उदाहरण उपयोग प्रभाव हुक है एपीआई से डेटा प्राप्त करना या किसी पोस्ट पर पसंद या सदस्यता की गणना करना।

उपयोग प्रभाव (() => {
// कोड
}, [निर्भरता सरणी]);

उपरोक्त उदाहरण को ध्यान में रखते हुए

"प्रतिक्रिया" से आयात {useState, useEffect};
फ़ंक्शन ऐप () {
कास्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0);
उपयोग प्रभाव (() => {
document.title = `आपने ${count} बार क्लिक किया है';
}, [गिनती]);
वापसी (


हुक उदाहरण

{गिनती}

 सेटकाउंट (गिनती + 1)}>जोड़ें



);
}

पास होने पर गिनती में राज्य चर उपयोग प्रभाव निर्भरता सरणी, यह जांचता है कि राज्य बदल गया है या नहीं। यह तब दस्तावेज़ शीर्षक को गणना चर पर सेट करता है।

उपयोग प्रसंग

NS उपयोग प्रसंग हुक प्रोप के माध्यम से मैन्युअल रूप से किए बिना घटक के माध्यम से डेटा पास करने में मदद करता है। यह Context API का उपयोग त्वरित और आसान बनाता है। एक उदाहरण के माध्यम से चलने के बाद आपको बेहतर समझ होगी।

सबसे पहले, यह समझें कि Context का उपयोग किए बिना कोड कैसा दिखता है। जैसा कि आप देख सकते हैं, आपको टेक्स्ट को प्रॉप्स के जरिए चाइल्ड कंपोनेंट में पास करना होगा। जटिलताओं से बचने के लिए, आप उपयोग कर सकते हैं उपयोग प्रसंग हुक

निर्यात डिफ़ॉल्ट फ़ंक्शन ऐप () {
पाठ करने दें = "नमस्कार, MUO में आपका स्वागत है";
वापसी (






);
}
कॉन्स चाइल्डकंपोनेंट = ({पाठ}) => {
वापसी 
{मूलपाठ}
;
};

सबसे पहले, अपनी मुख्य फ़ाइल में एक प्रदाता बनाएँ (ऐप.जेएस).

कॉन्स संदर्भ = React.createContext (शून्य);

NS अनुप्रयोग घटक शीर्ष-स्तरीय घटक या "पैरेंट" घटक है। आपको पूरे घटक को लपेटने की आवश्यकता है और उस ऑब्जेक्ट या डेटा को पास करें जिसे आप चाइल्ड कंपोनेंट पर रेंडर करना चाहते हैं।

निर्यात डिफ़ॉल्ट फ़ंक्शन ऐप () {
पाठ करने दें = "नमस्कार, MUO में आपका स्वागत है";
वापसी (








);
}

अब, एक चाइल्ड कंपोनेंट बनाएं और टेक्स्ट प्रोप का उपयोग करके एक्सेस करें उपयोग प्रसंग हुक इधर दें संदर्भ चर का उपयोग कर क्रिएट कॉन्टेक्स्ट.

कॉन्स्ट चाइल्डकंपोनेंट = () => {
पाठ करने दें = उपयोग करेंकॉन्टेक्स्ट (संदर्भ);
कंसोल.लॉग (पाठ);
वापसी 
{मूलपाठ}
;
};

सम्बंधित: सीखने लायक जावास्क्रिप्ट फ्रेमवर्क​​​​​

प्रतिक्रिया के साथ अन्वेषण करने के लिए और भी बहुत कुछ

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

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

ReactJS में प्रॉप्स का उपयोग कैसे करें

यदि आप रिएक्टजेएस में प्रॉप्स का उपयोग करने के तरीके के बारे में सुझावों की तलाश कर रहे हैं, तो आप सही जगह पर हैं।

आगे पढ़िए

लेखक के बारे में