जावास्क्रिप्ट में सेटस्टेट

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

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

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

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

React setState क्या है?

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

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

अब आइए इन दिशानिर्देशों के संदर्भ में सिंटैक्स पर एक नज़र डालते हैं।

setState React सिंटैक्स

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

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

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

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

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

आपका कार्ट

); }} ReactDOM.render (<कार्ट />, document.getElementById (`रूट`));

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

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

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

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

निष्कर्ष

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

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