रिएक्ट में यूज़स्टेट और यूज़रेड्यूसर के बीच उलझन? इस सहायक मार्गदर्शिका में अपनी आवश्यकताओं के लिए सर्वोत्तम राज्य प्रबंधन हुक खोजें।
यदि आप वेब डेवलपमेंट की नौकरी करना चाहते हैं, तो रिएक्ट जावास्क्रिप्ट लाइब्रेरी सीखने पर आपके सफल होने की बेहतर संभावना होगी। रिएक्ट उद्योग में सबसे अधिक उपयोग की जाने वाली लाइब्रेरी में से एक है। और रिएक्ट लाइब्रेरी की सबसे दिलचस्प विशेषताओं में से एक हुक की अवधारणा है।
हुक केवल जावास्क्रिप्ट फ़ंक्शन हैं जो आपको रिएक्ट एप्लिकेशन में तर्क को अलग करते हैं और पुन: उपयोग करने में सक्षम बनाते हैं। राज्य प्रबंधन के लिए, आपके लिए दो मुख्य हुक उपलब्ध हैं - द उपयोग राज्य हुक और यूज़रेड्यूसर अंकुश।
यूज़स्टेट हुक का अवलोकन
उपयोग राज्य रिएक्ट में स्थिति को संभालने के लिए हुक सबसे आम तरीका है। नीचे दिया गया सिंटैक्स बताता है कि अपने एप्लिकेशन में इस हुक का उपयोग कैसे करें:
कॉन्स्ट [राज्य, सेटस्टेट] = उपयोगस्टेट (प्रारंभिकस्टेटवैल्यू);
उपरोक्त कोड ब्लॉक में, राज्य वेरिएबल रेंडरर्स के बीच मेमोरी में डेटा रखता है। और सेटस्टेट "सेटर" फ़ंक्शन है जो हेरफेर करता है राज्य चर।
उपयोग राज्य
हुक बिल्कुल दो तत्वों के साथ एक सरणी लौटाता है। यह राज्य चर के लिए प्रारंभिक मान भी लेता है।उदाहरण के लिए, यदि आप एक राज्य चर को परिभाषित करना चाहते हैं जो 17 के प्रारंभिक मान के साथ उपयोगकर्ता की आयु का प्रतिनिधित्व करता है, तो आप इसे इस प्रकार करेंगे:
कॉन्स्ट [यूजरएज, सेटयूजरएज] = यूज़स्टेट(17);
setUserAge फ़ंक्शन को संशोधित करने के लिए जिम्मेदार है उपयोक्ताआयु अवस्था चर।
setUserAge(19);
यह ध्यान रखना महत्वपूर्ण है कि राज्य को अद्यतन करने से, एक घटक पुनः प्रस्तुत करना ट्रिगर हो जाता है, और एक राज्य चर को अनुचित तरीके से अद्यतन करने के परिणामस्वरूप एक अनंत लूप हो सकता है जो आपके कोड को तोड़ सकता है।
रिएक्ट में, राज्य को सीधे संशोधित करना उचित नहीं है (जैसा कि नीचे दिए गए कोड ब्लॉक में दिखाया गया है), क्योंकि गैर-राज्य चर में परिवर्तन घटक रेंडरर्स के बीच जारी नहीं रहते हैं।
उपयोक्ताआयु = 19;
राज्य उस घटक के लिए स्थानीय है जो इसे परिभाषित करता है। यदि आपके पास स्क्रीन पर एक ही घटक कई बार प्रस्तुत किया गया है, तो प्रत्येक घटक की अपनी स्वतंत्र स्थिति होगी।
समारोहअनुप्रयोग(){
वापस करना (
</div>
)
}
उपरोक्त कोड ब्लॉक में, दो हैं बदलना घटक, लेकिन प्रत्येक घटक अपनी स्थिति को संभालता है और दूसरे घटक पर निर्भर नहीं होता है जब तक कि एक घटक दूसरे घटक के साथ अपनी स्थिति साझा नहीं करता है।
रिएक्ट बैचिंग द्वारा राज्य अपडेट को संभालता है। इसका मतलब यह है कि जब आप स्टेट वेरिएबल के सेटर फ़ंक्शन को कॉल करते हैं, तो स्टेट वेरिएबल अगले री-रेंडर तक अपडेट नहीं होता है।
यूज़रेड्यूसर हुक का अवलोकन
यूज़रेड्यूसर एक रिएक्ट हुक है जब भी आप एक ही समय में कई संबंधित राज्यों को संभालना चाहें तो यह काम आ सकता है। के लिए वाक्यविन्यास यूज़रेड्यूसर कुछ इस तरह दिखता है:
कॉन्स्ट [राज्य, प्रेषण] = यूज़रेड्यूसर (रेड्यूसर, इनिशियलस्टेट)
की तुलना में उपयोग राज्य, में यूज़रेड्यूसर, वहां एक है राज्य परिवर्तनशील और ए प्रेषण फ़ंक्शन जो क्रियाएं भेजता है कम करने वह फ़ंक्शन जो पेलोड को संभालता है और अद्यतन करता है राज्य.
उदाहरण के लिए, मान लें कि आप बटनों के साथ एक साधारण काउंटर एप्लिकेशन बना रहे हैं जो काउंटर को रीसेट कर सकता है, काउंटर वैल्यू बढ़ा सकता है, या काउंटर वैल्यू घटा सकता है। का उपयोग करते हुए उपयोग राज्य आपका कोड कुछ इस तरह दिखेगा:
समारोहविरोध करना(){कॉन्स्ट [गिनती, सेटकाउंट] = उपयोगस्टेट(0);
वापस करना(
गिनती है: {गिनती}
उपरोक्त कार्यान्वयन पूरी तरह से काम करता है। लेकिन आप इसकी सहायता से भी वही परिणाम प्राप्त कर सकते हैं यूज़रेड्यूसर अंकुश।
यह उदाहरण केवल यह प्रदर्शित करने के लिए है कि कैसे यूज़रेड्यूसर हुक काम करता है. वास्तविक दुनिया के अनुप्रयोग में, यूज़रेड्यूसर इस परिदृश्य के लिए अतिश्योक्ति है।
यूज़रेड्यूसर संबंधित स्थितियों और उनके आधार पर जटिल तर्क को संभालना आसान बनाता है प्रकार प्रेषित में पारित किया गया कार्य वस्तु।
उदाहरण के लिए, प्रेषण फ़ंक्शन एक भेज सकता है कार्य वह वस्तु जो कुछ इस तरह दिखती है:
{प्रकार:"प्रक्रिया का प्रकार", पेलोड:राज्य * 2}
सबसे पहले आयात करें यूज़रेड्यूसर हुक, फिर परिभाषित करें कम करने पैरामीटर के साथ कार्य करें: राज्य और नष्ट हो गया कार्य वस्तु।
आयात {यूज़रेड्यूसर} से"प्रतिक्रिया";
समारोहकम करने(राज्य, { प्रकार, पेलोड }) {
अगर (प्रकार 'गिनती बढ़ाएँ') {
वापस करना पेलोड;
} अन्यअगर (प्रकार 'गिनती घटाएँ') {
वापस करना पेलोड;
} अन्यअगर (प्रकार 'गिनती रीसेट') {
वापस करना पेलोड;
} अन्य {
वापस करना राज्य;
}
}
परिभाषित करने के बाद कम करने फ़ंक्शन, आप बना सकते हैं विरोध करना के साथ घटक यूज़रेड्यूसर अंकुश।
समारोहविरोध करना() {
कॉन्स्ट [गिनती, प्रेषण] = उपयोगरेड्यूसर (रेड्यूसर, 0);
वापस करना (
गिनती है: {गिनती}
उपरोक्त कोड ब्लॉक में, पहला बटन एक प्रकार की कार्रवाई भेजता है गिनती बढ़ाएँ के पेलोड के साथ गिनती + 1. यह क्रिया गिनती मान बढ़ाने के लिए ज़िम्मेदार है।
दूसरा बटन एक प्रकार की कार्रवाई भेजता है गिनती रीसेट 0 के पेलोड के साथ जो गिनती मान को वापस 0 पर रीसेट कर देता है।
तीसरा बटन एक प्रकार की कार्रवाई भेजता है गिनती घटाना के पेलोड के साथ गिनती - 1 जिससे गिनती का मान 1 कम हो जाता है।
यूज़स्टेट और यूज़रेड्यूसर हुक के बीच चयन करना
अब, आप समझ गए हैं कि कैसे उपयोग करना है उपयोग राज्य और यूज़रेड्यूसर हुक, यह जानना महत्वपूर्ण है कि सही हुक का उपयोग कब करना है।
यदि आपके राज्य को जटिल तर्क की आवश्यकता नहीं है, तो स्पष्ट रूप से उपयोग करना यूज़रेड्यूसर अतिशयोक्ति हो सकती है.
यदि आपका राज्य कुछ भी है लेकिन जावास्क्रिप्ट आदिम जैसे संख्याएँ, तार और बूलियन मान, आपको इसका उपयोग करना चाहिए उपयोग राज्य अंकुश। और यदि राज्य का प्रकार कोई ऑब्जेक्ट या सरणी है, तो आपको इसका उपयोग करने पर विचार करना चाहिए यूज़रेड्यूसर बजाय।
जैसे-जैसे आपका एप्लिकेशन जटिलता में बढ़ता है, केवल स्थिति को संभालना मुश्किल हो जाता है उपयोग राज्य और यूज़रेड्यूसर हुक.
यह तब है जब आप Redux जैसी बाहरी लाइब्रेरी का उपयोग कर सकते हैं, जोताई, और ज़स्टैंड। ये लाइब्रेरी कई घटकों में स्थिति परिवर्तनों को संभालना आसान बनाती हैं।
जावास्क्रिप्ट पुस्तकालयों के साथ राज्य प्रबंधन को आसान बनाना
रिएक्ट, व्यू और स्वेल्ट जैसी लाइब्रेरीज़ के पास राज्य को संभालने के अपने-अपने तरीके हैं। वेनिला जावास्क्रिप्ट के साथ अपने दम पर राज्य प्रबंधन को संभालना निश्चित रूप से कुछ ऐसा है जिसे आप आज़मा सकते हैं, लेकिन युद्ध-परीक्षणित जावास्क्रिप्ट लाइब्रेरी का उपयोग करना बहुत आसान और अधिक सुविधाजनक है।
यदि आप रिएक्ट का उपयोग करके एक जटिल एप्लिकेशन बना रहे हैं जहां आपको कई घटकों को प्रबंधित करने की आवश्यकता है, तो Redux आपके लिए सबसे अच्छा विकल्प हो सकता है।
