सेटस्टेट के साथ प्रतिक्रिया में राज्य का प्रबंधन करें

किसी एप्लिकेशन की स्थिति पर नज़र रखना यह है कि कैसे एक सिंगल पेज एप्लिकेशन (SAP) परिवर्तनों को पंजीकृत करता है और उन्हें उपयोगकर्ता को प्रदान करता है। एक मॉडल, व्यू, कंट्रोलर (एमवीसी) ढांचे के विपरीत, एसएपी उपयोगकर्ता को पुनर्निर्देशित नहीं करते हैं, और इसलिए क्लाइंट पक्ष से आने वाले परिवर्तनों को प्रबंधित करने के लिए एक तरीके की आवश्यकता होती है। एमवीसी ढांचे की समीक्षा करने के लिए, इस गाइड को देखें।

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

यह गाइड रिएक्ट के साथ बुनियादी परिचितता मानता है। रिएक्ट मूल बातें की समीक्षा करने या सीखने के लिए, इस लेख में कुछ बेहतरीन रिएक्ट सीखने के संसाधनों की सूची दी गई है।

रिएक्ट सेटस्टेट क्या है?

रिएक्ट सेटस्टेट विधि यह है कि किसी घटक की स्थिति को स्थिरता के साथ कैसे बदला जाए। प्रतिक्रिया में राज्य बदलने के लिए कुछ विशिष्ट दिशानिर्देश हैं।

1. सेटस्टेट को केवल एक क्लास कंपोनेंट के अंदर ही कॉल किया जा सकता है। वर्ग के घटक constructor()को कहते हैं विधि और एक प्रारंभिक स्थिति निर्धारित करें। फिर हम सेटस्टेट को कॉल करके राज्य को और नीचे बदल सकते हैं।
   
   रिएक्ट में दो अलग-अलग प्रकार के घटक होते हैं। कार्यात्मक घटक और वर्ग घटक है। हमारे उद्देश्यों के लिए, हम केवल वर्ग घटकों का संदर्भ दे रहे हैं। आगे की समीक्षा के लिए, इस लेख को कार्यात्मक और वर्ग घटकों के बीच अंतर पर देखें।
   
2. एक वर्ग घटक में केवल setState को कॉल करके, हम इस का उपयोग करके सीधे घटक को संदर्भित कर सकते हैं खोजशब्द। कॉल करना this.setState() सर्वोत्तम अभ्यास है और यह सुनिश्चित करता है कि आपका कोड टूटेगा नहीं।
   
3. राज्य को सीधे संशोधित न करें। संशोधित राज्य सीधे पुन:प्रस्तुत करने के लिए प्रतिक्रिया करने के लिए पंजीकृत नहीं होगा। बदलते राज्य का पूरा बिंदु उस घटक के पुन:प्रतिपादन को आग लगाना है ताकि उपयोगकर्ता को परिवर्तन वापस प्रतिबिंबित किया जा सके।

अब, आइए इन दिशानिर्देशों के संदर्भ में वाक्य-विन्यास पर एक नज़र डालें।

सेटस्टेट रिएक्ट सिंटैक्स

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

class Cart extends React.Component {
  constructor(props){
    super(props);
    this.state = {shoppingCart: []}
  }

उपरोक्त कोड को तोड़कर, हम क्लास कंपोनेंट कार्ट घोषित करते हैं। सभी वर्ग घटकों की तरह, हम विस्तार . करते हैं प्रतिक्रिया। घटक। यह बॉयलरप्लेट रिएक्ट सिंटैक्स है।

चूँकि हम इस कंपोनेंट को स्टेट असाइन करना चाहते हैं, इसलिए हमें कंस्ट्रक्टर मेथड को कॉल करना होगा। फिर, बेस कंस्ट्रक्टर को super(props) . के साथ बुलाया जाता है . बेस कंस्ट्रक्टर को प्रॉप्स के साथ नहीं देखना संभव है। आधिकारिक रिएक्ट प्रलेखन का तर्क है कि बेस कंस्ट्रक्टर विधि को हमेशा प्रॉप्स के साथ बुलाया जाना चाहिए।

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

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

अब जब हमने राज्य को धारण करने के लिए एक वर्ग घटक के निर्माण के लिए आवश्यक रिएक्ट सिंटैक्स के माध्यम से इसे बना लिया है, तो हम अपनी प्रारंभिक स्थिति निर्दिष्ट करने के लिए तैयार हैं। यह एकमात्र समय है जब हम सीधे राज्य का संदर्भ दे सकते हैं। this.state = {shoppingCart: [] } पर कॉल करके राज्य असाइन करना हमें अपने शॉपिंग कार्ट की प्रारंभिक स्थिति को एक खाली सरणी में सेट करने की अनुमति देता है।

प्रतिक्रिया सेटस्टेट उदाहरण

उपरोक्त खंड में, हमने प्रारंभिक अवस्था घोषित करने में शामिल सिंटैक्स को देखा। कंस्ट्रक्टर विधि में राज्य सेट हो जाने के बाद, हम हमेशा की तरह प्रस्तुत कर सकते हैं:

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')
);

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

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

addItem(newItem) {
    this.setState({
     shoppingCart: [...this.state.shoppingCart, newItem]
    })
  }

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

यह आलेख यह समझने के लिए एक परिचय है कि सेटस्टेट का उपयोग कैसे करें और यह किसी भी तरह से संपूर्ण नहीं है।

निष्कर्ष

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

आधिकारिक रिएक्ट प्रलेखन में और उदाहरण हैं जो अभ्यास के अधिक अवसर प्रदान करेंगे। याद रखें कि एकल पृष्ठ अनुप्रयोगों में, किसी घटक की स्थिति पर नज़र रखना उपयोगकर्ता को परिवर्तन प्रदान करने के लिए आवश्यक है।