किसी एप्लिकेशन के स्टेट को ट्रैक करना ही है जिससे सिंगल पेज एप्लिकेशन (SPA) परिवर्तनों को रजिस्टर करता है और उन्हें यूजर को रेंडर करता है। मॉडल, व्यू, कंट्रोलर (MVC) फ्रेमवर्क के विपरीत, SPAs यूजर को रीडायरेक्ट नहीं करते, और इसलिए क्लाइंट साइड से आने वाले परिवर्तनों को प्रबंधित करने का एक तरीका चाहिए। MVC फ्रेमवर्क की समीक्षा के लिए, इस गाइड को देखें।
React में, कंपोनेंट्स स्वयं अपने स्टेट को मैनेज कर सकते हैं और तदनुसार फिर से रेंडर कर सकते हैं। यह लाइफसाइकिल मेथड्स के माध्यम से किया जाता है, जिन पर यहां गहराई से चर्चा की गई है। इस लेख के उद्देश्य के लिए, हम setState का उपयोग करके स्टेट कैसे बदलें, इस पर एक नज़र डालने जा रहे हैं।
यह गाइड React के साथ बेसिक परिचितता मानता है। React बेसिक्स की समीक्षा या सीखने के लिए, यह लेख कुछ बेहतरीन React लर्निंग संसाधनों को सूचीबद्ध करता है।
React setState क्या है?
React setState मेथड कंपोनेंट के स्टेट को स्थिरता के साथ बदलने का तरीका है। React में स्टेट बदलने के कुछ विशिष्ट दिशानिर्देश हैं।
- setState को केवल क्लास कंपोनेंट के अंदर कॉल किया जा सकता है। क्लास कंपोनेंट्स
constructor()मेथड को कॉल करते हैं और प्रारंभिक स्टेट सेट करते हैं। फिर हम setState को कॉल करके आगे स्टेट बदल सकते हैं।
React में दो अलग-अलग प्रकार के कंपोनेंट्स हैं। फंक्शनल कंपोनेंट और क्लास कंपोनेंट है। हमारे उद्देश्यों के लिए, हम केवल क्लास कंपोनेंट्स का संदर्भ दे रहे हैं। आगे की समीक्षा के लिए, फंक्शनल और क्लास कंपोनेंट्स के बीच अंतर पर इस लेख को देखें। - केवल क्लास कंपोनेंट में setState को कॉल करके, हम this कीवर्ड का उपयोग करके सीधे कंपोनेंट को संदर्भित कर सकते हैं।
this.setState()कॉल करना बेस्ट प्रैक्टिस है और यह सुनिश्चित करता है कि आपका कोड नहीं टूटेगा। - सीधे स्टेट को संशोधित न करें। सीधे स्टेट को संशोधित करने से React को फिर से रेंडर करने के लिए रजिस्टर नहीं होगा। स्टेट बदलने का पूरा उद्देश्य उस कंपोनेंट के पुनः रेंडरिंग को फायर करना है ताकि परिवर्तनों को यूजर को वापस प्रतिबिंबित किया जा सके।
अब, आइए इन दिशानिर्देशों के संदर्भ में सिंटैक्स देखें।
setState React सिंटैक्स
पहले दिशानिर्देश से शुरू करते हुए, हम देखते हैं कि हम केवल क्लास कंपोनेंट के अंदर setState का उपयोग कर सकते हैं। उदाहरण के लिए, मान लें कि हमारे पास एक शॉपिंग ऐप है और हम शॉपिंग कार्ट लागू करना चाहते हैं। हम Cart नामक एक क्लास कंपोनेंट सेट कर सकते हैं। यह कंपोनेंट यूजर द्वारा कार्ट में आइटम जोड़ने पर अपने स्टेट को मैनेज करने के लिए जिम्मेदार होगा।
class Cart extends React.Component { constructor(props){ super(props); this.state = {shoppingCart: []} }
उपरोक्त कोड को तोड़ते हुए, हम क्लास कंपोनेंट Cart घोषित करते हैं। सभी क्लास कंपोनेंट्स की तरह, हम React.Component को extend करते हैं। यह बॉयलरप्लेट React सिंटैक्स है।
चूंकि हम इस कंपोनेंट को स्टेट असाइन करना चाहते हैं, हमें कंस्ट्रक्टर मेथड को कॉल करना होगा। फिर, बेस कंस्ट्रक्टर को super(props) के साथ कॉल किया जाता है। बेस कंस्ट्रक्टर को प्रॉप्स के साथ कॉल न होते देखना संभव है। आधिकारिक React डॉक्यूमेंटेशन का तर्क है कि बेस कंस्ट्रक्टर मेथड को हमेशा प्रॉप्स के साथ कॉल किया जाना चाहिए।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी टेक जॉब संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही बूटकैंप से मैच करवाएं।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी ढूंढने तक।
अब जब हम क्लास कंपोनेंट को स्टेट होल्ड करने के लिए बनाने के आवश्यक React सिंटैक्स के माध्यम से आ गए हैं, तो हम अपनी प्रारंभिक स्टेट असाइन करने के लिए तैयार हैं। यह एकमात्र समय है जब हम सीधे स्टेट को संदर्भित कर सकते हैं। this.state = {shoppingCart: [] } कॉल करके स्टेट असाइन करना हमें अपने शॉपिंग कार्ट के प्रारंभिक स्टेट को खाली ऐरे पर सेट करने की अनुमति देता है।
React setState उदाहरण
उपरोक्त सेक्शन में, हमने प्रारंभिक स्टेट घोषित करने में शामिल सिंटैक्स को देखा। एक बार कंस्ट्रक्टर मेथड में स्टेट सेट हो जाने पर, हम हमेशा की तरह रेंडर कर सकते हैं:
class Cart extends React.Component { constructor(props) { super(props); this.state = { shoppingCart: [] } } render() { return ( <div> <h1>Your Shopping Cart</h1> <div>{this.state.shoppingCart}</div> </div> ); } } ReactDOM.render( <Cart />, document.getElementById('root') );
यहां, हमारे पास Cart क्लास कंपोनेंट है जिसकी प्रारंभिक स्टेट सेट है और रेंडर मेथड के रिटर्न स्टेटमेंट में कार्ट रेंडर कर रहा है। आइए देखें कि हम अपने Cart को अपडेट करने के लिए setState का उपयोग कैसे कर सकते हैं।
हम एक फंक्शन परिभाषित करते हैं जो हमारे शॉपिंगकार्ट में नया आइटम जोड़ेगा जबकि पहले से जोड़े गए आइटम्स को संरक्षित रखेगा। हम प्रारंभिक स्टेट की कॉपी बनाने और नए स्टेट के साथ इसे अपडेट करने के लिए जावास्क्रिप्ट के स्प्रेड ऑपरेटर (...) का उपयोग करते हैं। इस तरह, शॉपिंग कार्ट जोड़े गए सभी आइटम्स को होल्ड करेगा।
addItem(newItem) { this.setState({ shoppingCart: [...this.state.shoppingCart, newItem] }) }
addItem फंक्शन का उपयोग React के बटन के onClick एट्रिब्यूट के अंदर किया जा सकता है यदि हम चाहते हैं कि यूजर बटन क्लिक होने पर उस आइटम को जोड़ सके। हमारे उद्देश्यों के लिए, फंक्शन के संदर्भ में setState का उपयोग कैसे करें यह देखना पर्याप्त है।
यह लेख setState का उपयोग कैसे समझें, इसका परिचय होने के लिए है और किसी भी तरह से संपूर्ण नहीं है।
निष्कर्ष
इस लेख में, हमने सीखा कि setState क्या है, इसका उपयोग करने के कुछ दिशानिर्देश, सिंटैक्स, और एक संक्षिप्त उदाहरण। यह आपको अपने दम पर कंपोनेंट के स्टेट को अपडेट करने का अभ्यास करने के लिए प्रोत्साहित करने वाला एक प्राइमर लेख है।
आधिकारिक React डॉक्यूमेंटेशन में आगे के उदाहरण हैं जो अभ्यास के लिए अधिक अवसर प्रदान करेंगे। याद रखें कि सिंगल पेज एप्लिकेशन में, कंपोनेंट के स्टेट को ट्रैक करना यूजर को परिवर्तन रेंडर करने के लिए आवश्यक है।
