विश्व स्तर पर राज्य बनाने से आपके ऐप का प्रदर्शन धीमा हो सकता है। जानें कि आप अपने रिएक्ट एप्लिकेशन में राज्यों को प्रभावी ढंग से कैसे बना और उपयोग कर सकते हैं।
यदि आपने बहुत सारे रिएक्ट कोड लिखे हैं, तो संभावना है कि आपने स्टेट का गलत इस्तेमाल किया है। एक सामान्य गलती जो बहुत सारे रिएक्ट डेवलपर्स करते हैं, वह है एप्लिकेशन में स्टेट्स को विश्व स्तर पर स्टोर करना, उन्हें उन घटकों में संग्रहीत करने के बजाय जहां उनका उपयोग किया जाता है।
जानें कि आप स्थानीय राज्य का उपयोग करने के लिए अपने कोड को कैसे रिफलेक्टर कर सकते हैं और ऐसा करना हमेशा एक अच्छा विचार क्यों है।
प्रतिक्रिया में राज्य का मूल उदाहरण
यहाँ एक बहुत है सरल काउंटर आवेदन यह उदाहरण देता है कि प्रतिक्रिया में आमतौर पर राज्य को कैसे नियंत्रित किया जाता है:
आयात {यूज़स्टेट} से'प्रतिक्रिया'
आयात {विरोध करना} से'विरोध करना'समारोहअनुप्रयोग(){
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0)
वापस करना<विरोध करनागिनती करना={गिनती करना}setCount={सेटकाउंट} />
}
निर्यातगलती करना अनुप्रयोग
लाइन 1 और 2 पर, आप आयात करते हैं यूज़स्टेट () राज्य बनाने के लिए हुक, और
विरोध करना अवयव। आप परिभाषित करते हैं गिनती करना राज्य और setCount राज्य को अद्यतन करने की विधि। फिर आप दोनों को पास करते हैं विरोध करना अवयव।विरोध करना घटक फिर प्रस्तुत करता है गिनती करना और कॉल करता है setCount गिनती बढ़ाने और घटाने के लिए।
समारोहविरोध करना({गिनती, सेटकाउंट}) {
वापस करना (
आपने परिभाषित नहीं किया गिनती करना चर और setCount के अंदर स्थानीय रूप से कार्य करता है विरोध करना अवयव। बल्कि, आपने इसे मूल घटक से पास किया है (अनुप्रयोग). दूसरे शब्दों में, आप वैश्विक स्थिति का उपयोग कर रहे हैं।
वैश्विक राज्यों के साथ समस्या
वैश्विक स्थिति का उपयोग करने में समस्या यह है कि आप राज्य को मूल घटक (या माता-पिता के माता-पिता) में संग्रहीत कर रहे हैं और फिर इसे प्रॉप्स के रूप में पास करना उस घटक के लिए जहां वास्तव में उस राज्य की आवश्यकता है।
कभी-कभी यह ठीक होता है जब आपके पास एक ऐसा राज्य होता है जिसे बहुत सारे घटकों में साझा किया जाता है। लेकिन इस मामले में, कोई अन्य घटक परवाह नहीं करता है गिनती करना राज्य को छोड़कर विरोध करना अवयव। इसलिए, राज्य को स्थानांतरित करना बेहतर है विरोध करना घटक जहां यह वास्तव में प्रयोग किया जाता है।
राज्य को बाल घटक में ले जाना
जब आप राज्य को विरोध करना घटक, यह इस तरह दिखेगा:
आयात {यूज़स्टेट} से'प्रतिक्रिया'
समारोहविरोध करना() {
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0)
वापस करना (
फिर अपने अंदर अनुप्रयोग घटक, आपको नीचे कुछ भी पास करने की आवश्यकता नहीं है विरोध करना अवयव:
// आयात
समारोहअनुप्रयोग(){
वापस करना<विरोध करना />
}
काउंटर ठीक वैसे ही काम करेगा जैसे पहले करता था, लेकिन बड़ा अंतर यह है कि आपके सभी राज्य स्थानीय रूप से इसके अंदर हैं विरोध करना अवयव। तो अगर आपको होम पेज पर एक और काउंटर चाहिए, तो आपके पास दो स्वतंत्र काउंटर होंगे। प्रत्येक काउंटर आत्मनिर्भर है और अपने सभी राज्य का ख्याल रखता है।
अधिक जटिल अनुप्रयोगों में राज्य को संभालना
एक और स्थिति जहां आप वैश्विक स्थिति का उपयोग करेंगे, रूपों के साथ है। अनुप्रयोग नीचे दिया गया घटक फॉर्म डेटा (ईमेल और पासवर्ड) और सेटर विधि को पास करता है लॉगिन फॉर्म अवयव।
आयात {यूज़स्टेट} से"प्रतिक्रिया";
आयात { लॉगिन फॉर्म } से"।/लॉगिन फॉर्म";समारोहअनुप्रयोग() {
कॉन्स्ट [फॉर्मडाटा, सेटफॉर्मडाटा] = यूजस्टेट ({
ईमेल: "",
पासवर्ड: "",
});समारोहअपडेटफॉर्मडाटा(नए आंकड़े) {
सेटफॉर्मडाटा ((पिछला) => {
वापस करना {...पिछला, ...नया डेटा};
});
}समारोहऑनसबमिट() {
सांत्वना देनालॉग (फॉर्मडाटा);
}
वापस करना (
डेटा = {फॉर्मडाटा}
अपडेटडेटा = {अपडेटफॉर्मडेटा}
सबमिट करें = {ऑन सबमिट करें}
/>
);
}
लॉगिन फॉर्म घटक लॉगिन जानकारी लेता है और इसे प्रस्तुत करता है। जब आप फॉर्म जमा करते हैं, तो यह कॉल करता है अद्यतन आकड़ें कार्य जो मूल घटक से भी पारित किया जाता है।
समारोहलॉगिन फॉर्म({ऑनसबमिट, डेटा, अपडेटडेटा}) {
समारोहहैंडल सबमिट करें(इ) {
e.preventDefault ();
ऑनसबमिट ();
}
वापस करना (
राज्य को मूल घटक पर प्रबंधित करने के बजाय, राज्य को स्थानांतरित करना बेहतर है लॉग इनफॉर्म.जेएस, जहां आप कोड का उपयोग करेंगे। ऐसा करने से प्रत्येक घटक स्व-निहित हो जाता है और डेटा के लिए किसी अन्य घटक (यानी मूल) पर निर्भर नहीं होता है। पेश है इसका मॉडिफाइड वर्जन लॉगिन फॉर्म:
आयात {उपयोग संदर्भ} से"प्रतिक्रिया";समारोहलॉगिन फॉर्म({सबमिट करें}) {
कॉन्स्ट ईमेलRef = useRef ();
कॉन्स्ट पासवर्डरफ = यूसेरफ ();
समारोहहैंडल सबमिट करें(इ) {
e.preventDefault ();
सबमिट करने पर({
ईमेल: ईमेलRef.current.value,
पासवर्ड: पासवर्डRef.current.value,
});
}
वापस करना (
यहां आप इनपुट को एक वेरिएबल का उपयोग करके बांधते हैं संदर्भ गुण और उपयोग संदर्भ अद्यतन विधियों को सीधे पास करने के बजाय हुक पर प्रतिक्रिया करें। यह आपको वर्बोज़ कोड और निकालने में मदद करता है useRef हुक का उपयोग करके प्रपत्र प्रदर्शन को अनुकूलित करें.
मूल घटक में (ऐप.जेएस), आप वैश्विक स्थिति और दोनों को हटा सकते हैं अपडेटफॉर्मडाटा () विधि क्योंकि अब आपको इसकी आवश्यकता नहीं है। कार्य ही शेष रह गया है ऑनसबमिट (), जिसे आप अंदर से आह्वान करते हैं लॉगिन फॉर्म घटक कंसोल पर लॉगिन विवरण लॉग करने के लिए।
समारोहअनुप्रयोग() {
समारोहऑनसबमिट(फॉर्मडेटा) {
सांत्वना देनालॉग (फॉर्मडाटा);
}
वापस करना (
डेटा = {फॉर्मडाटा}
अपडेटडेटा = {अपडेटफॉर्मडेटा}
सबमिट करें = {ऑन सबमिट करें}
/>
);
}
आपने न केवल अपने राज्य को यथासंभव स्थानीय बनाया, बल्कि आपने वास्तव में किसी भी राज्य की आवश्यकता को हटा दिया (और उपयोग किया संदर्भ बजाय)। तो आपका अनुप्रयोग घटक काफी सरल हो गया है (केवल एक फ़ंक्शन होने पर)।
आपका लॉगिन फॉर्म घटक भी सरल हो गया क्योंकि आपको स्थिति को अद्यतन करने के बारे में चिंता करने की आवश्यकता नहीं थी। बल्कि, आप बस दो का ध्यान रखें संदर्भ, और बस।
साझा राज्य को संभालना
राज्य को यथासंभव स्थानीय बनाने की कोशिश के दृष्टिकोण के साथ एक मुद्दा है। आप अक्सर ऐसे परिदृश्यों में भाग लेते हैं जहाँ मूल घटक राज्य का उपयोग नहीं करता है, लेकिन यह इसे कई घटकों में भेज देता है।
एक उदाहरण हो रहा है टोडोकंटेनर दो बाल घटकों के साथ मूल घटक: करने के लिए सूची और टूडू काउंट.
समारोहटोडोकंटेनर() {
कॉन्स्ट [todos, setTodos] = useState([])
वापस करना (
<>
</>
)
}
इन दोनों बाल घटकों की आवश्यकता है सब राज्य, इसलिए टोडोकंटेनर उन दोनों को देता है। ऐसे परिदृश्य में, आपको राज्य को यथासंभव स्थानीय बनाना होगा। उपरोक्त उदाहरण में, इसे अंदर रखना टोडोसकंटेनर उतना ही स्थानीय है जितना आप प्राप्त कर सकते हैं।
यदि आप इस अवस्था को अपने में रखते हैं अनुप्रयोग घटक, यह जितना संभव हो उतना स्थानीय नहीं होगा क्योंकि यह डेटा की आवश्यकता वाले दो घटकों के निकटतम माता-पिता नहीं है।
बड़े अनुप्रयोगों के लिए, केवल के साथ राज्य का प्रबंधन करना यूज़स्टेट () हुक मुश्किल साबित हो सकता है। ऐसे मामलों में, आपको विकल्प चुनने की आवश्यकता हो सकती है प्रतिक्रिया संदर्भ एपीआई या रिडक्स रिडक्स प्रभावी ढंग से राज्य का प्रबंधन करने के लिए।
रिएक्ट हुक के बारे में अधिक जानें
हुक रिएक्ट की नींव बनाते हैं। रिएक्ट में हुक का उपयोग करके, आप लंबे कोड लिखने से बच सकते हैं जो अन्यथा कक्षाओं का उपयोग करेंगे। यूज़स्टेट () हुक निर्विवाद रूप से सबसे अधिक इस्तेमाल किया जाने वाला रिएक्ट हुक है, लेकिन कई अन्य हैं जैसे कि यूज़एफ़ेक्ट (), यूज़रीफ (), और यूज़ कॉन्टेक्स्ट ()।
यदि आप रिएक्ट के साथ एप्लिकेशन विकसित करने में कुशल बनना चाहते हैं, तो आपको यह जानना होगा कि अपने एप्लिकेशन में इन हुक का उपयोग कैसे करें।
