जावास्क्रिप्ट स्थिति

| | | | | | | | |

क्या आपने कभी React JavaScript लाइब्रेरी में State के बारे में सुना है लेकिन यह नहीं जानते कि इसका उपयोग कैसे किया जाए? राज्य का अर्थ है "जिस तरह से प्रत्येक वस्तु एक वेब पेज पर दिखाई देती है।" "अवधारणा सरल है - यह घटक की वर्तमान स्थिति के बारे में डेटा का एक संग्रह है, जिसे वर्णित डेटा को संशोधित करके बदला जा सकता है। जब भी डेटा बदलता है, तो इसे कंप्यूटर स्क्रीन पर फिर से प्रदर्शित किया जाता है। स्थिति का सबसे कठिन हिस्सा यह जान रहा है कि इसका उपयोग कैसे और कब करना है। लेकिन चिंता न करें क्योंकि यह ट्यूटोरियल बताता है कि राज्य का उपयोग कैसे किया जाता है।

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

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

रिएक्ट स्टेट एक घटक के लिए निर्दिष्ट गुणों के एक सेट के साथ एक वस्तु है और यह घटक को प्रस्तुत करने के तरीके में मदद करता है। राज्य वाले एक घटक को स्टेटफुल कहा जाता है। आप आमतौर पर इसका उपयोग करते हैं यदि किसी घटक को मेक के बीच इसके बारे में जानकारी ट्रैक करने की आवश्यकता होती है।

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

एक घटक के राज्य डेटा को this.state के माध्यम से एक्सेस किया जा सकता है और .setState< का उपयोग करके संपादित किया जा सकता है। / कोड> विधि। राज्य निजी है क्योंकि इसे उस घटक द्वारा नहीं बदला जा सकता है जिसमें राज्य शामिल है

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

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

राज्य को शुरू में कंस्ट्रक्टर नाम के फंक्शन में परिभाषित किया गया है। राज्य बदल सकता है, हम आपको आश्वस्त करना चाहते हैं कि एक प्रारंभिक वर्तमान मूल्य है। स्थिति निर्धारित करने के लिए सामान्य प्रारूप है:

उदाहरण के लिए , यदि आप एक टाइमर घटक बना रहे हैं, तो आपको प्रारंभ स्थिति को this.state = {0} सेकंड: के रूप में सेट करना चाहिए। आप जानते हैं कि एक टाइमर हर सेकेंड में अपनी स्थिति बदलेगा, लेकिन इसकी गिनती शुरू करनी होगी कहीं। जिस घटक में आप कोड करते हैं उसे "यह" कहा जाता है। यह कथन आपके द्वारा चुने गए मान के बराबर होने के लिए इसकी एक विशेषता ("सेकंड") सेट करके घटक की स्थिति को बदल देता है (इस मामले में "0") को सेट.

यहां एक नमूने का "व्यक्ति" रिकॉर्ड नाम का एक घटक है। हम घटक में राज्य वस्तु के लिए चार मान ‚Äã‚Äã- नाम, व्यवसाय, बाल और उम्र - जोड़ देंगे:

p>

// मूल प्रतिक्रिया विवरण आयात

// घटक जिन्हें हमने "व्यक्ति" नाम दिया है, कंस्ट्रक्टर में परिभाषित राज्य के गुणों के साथ:

// एक रेंडर फंक्शन जो परिभाषित करता है कि स्क्रीन पर क्या दिखाया जाएगा:

व्यक्ति

); }} ReactDOM.render (<पढ़ें />, document.getElementById (`रूट`));

अंतिम पंक्ति इंगित करती है कि कोड आपके HTML दस्तावेज़ के माध्यम से जाएगा और उस तत्व की तलाश करेगा जिसमें आईडी "रूट" है, और वही करता है जो आपने रेंडर में करने का निर्देश दिया था। () विधि ऊपर। यही कारण है कि आपको अपनी index.html फ़ाइल के दस्तावेज़ के मुख्य भाग में निम्नलिखित जोड़ना चाहिए:

इस HTML टैग में "रूट" पर संपूर्ण आईडी विशेषता है। यह वह जगह है जहां आपने घटक को प्रस्तुत करने के लिए कहा था।

आप this.state.attributeName लिखकर राज्य वस्तु को संदर्भित कर सकते हैं। यह "विशेषतानाम" को परिभाषित विशेषताओं से बदल देगा।

यहां एक उदाहरण दिया गया है जो हमारे "व्यक्ति" घटक की स्थिति बनाने के लिए पहले परिभाषित गुणों का उपयोग करता है। हम जिस घटक में अपना कोड लिख रहे हैं, उसके गुण मान को कॉल करने के लिए हम फॉर्म {} this.state.attribute का उपयोग करेंगे।

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

{this.state.name}

{{this.state.name} वह है। State.occupation} और वह है {} this.state.age वर्ष वर्तमान में उसके बाल हैं {this.state.hair}

) .. }

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

The

.setState () this.setState () का उपयोग किसी स्थिति वस्तु के मूल्यों को अद्यतन करने के लिए करता है। इस विधि में एक तर्क की आवश्यकता होती है, जो एक नई विशेषता और उसका मूल्य बनें: {विशेषता: "नया मान"}। विधियों का उपयोग ऐसा करने के लिए किया जाता है क्योंकि रिएक्ट दृश्यों के पीछे रेंडर विधि को कॉल करेगा ताकि आपकी नई सामग्री हमेशा प्रदर्शित हो।

यहां पहले से हमारे "व्यक्ति" घटक का उपयोग करने का एक उदाहरण दिया गया है। निम्नलिखित कोड को "व्यक्ति" कोड घटक में जोड़ें जिसे हमने लेख की शुरुआत में देखा था।

  1. जोड़ें बॉडी क्लास में "व्यक्ति" के लिए एक व्यवसाय संशोधन फ़ंक्शन। यह फ़ंक्शन .setState विधि को कॉल करेगा। यहां लिखी गई विशेषता अधिभोग विशेषता है और हम वह मान लिखते हैं जिसे हम बदलना चाहते हैं। अनुस्मारक "व्यक्ति " घटक कोड जो वर्तमान में काम करता है
    job = () => {this.setState ({occupation "model"});} "actor"।
  2. .render () मुख्य विधि a>

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

    क्या आपको राज्य का उपयोग करना है?

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

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

    निष्कर्ष

    React का उपयोग करते समय स्टेट और प्रॉप्स दो महत्वपूर्ण वस्तुएं हैं जिन्हें ध्यान में रखना चाहिए। राज्य एक घटक की वर्तमान स्थिति को ट्रैक करता है क्योंकि यह एक राज्य को परिभाषित करने वाले अद्यतन डेटा के आधार पर बदलता है। दूसरी ओर, सहायक उपकरण नहीं बदलते हैं। अंगूठे का एक सरल नियम जिसका उपयोग करना है, यह पूछना है, "क्या इस घटक की विशेषताओं को किसी भी समय बदला जा रहा है?" "। अगर उत्तर "हां" है तो आप स्थिति श्रेणी का उपयोग करना चाहते हैं, क्योंकि प्रॉप्स अपरिवर्तनीय है।

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

    जावास्क्रिप्ट स्थिति __del__: Questions

    जावास्क्रिप्ट स्थिति __dict__: Questions

    Shop

    Best Python online courses for 2022

    $

    Best laptop for Fortnite

    $

    Best laptop for Excel

    $

    Best laptop for Solidworks

    $

    Best laptop for Roblox

    $

    Best computer for crypto mining

    $

    Best laptop for Sims 4

    $

    Best laptop for Zoom

    $499

    Latest questions

    NUMPYNUMPY

    psycopg2: insert multiple rows with one query

    12 answers

    NUMPYNUMPY

    How to convert Nonetype to int or string?

    12 answers

    NUMPYNUMPY

    How to specify multiple return types using type-hints

    12 answers

    NUMPYNUMPY

    Javascript Error: IPython is not defined in JupyterLab

    12 answers

    Wiki

    Python OpenCV | cv2.putText () method

    numpy.arctan2 () in Python

    Python | os.path.realpath () method

    Python OpenCV | cv2.circle () method

    Python OpenCV cv2.cvtColor () method

    Python - Move item to the end of the list

    time.perf_counter () function in Python

    Check if one list is a subset of another in Python

    Python os.path.join () method