रिएक्ट में एक जीवनचक्र को तीन अलग-अलग चरणों में माना जा सकता है:माउंटिंग, अपडेटिंग और अनमाउंटिंग। माउंटिंग तब होती है जब रिएक्ट कंपोनेंट DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) को रेंडर करता है। जब उस घटक में परिवर्तन किए जाते हैं, तो यह अद्यतन करने के चरण में प्रवेश करता है।

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

इस लेख में पाठ्यक्रम जीवनचक्र के व्यापक निहितार्थों और आमतौर पर उपयोग की जाने वाली कुछ विधियों पर चर्चा करता है। ऐसी और भी जीवनचक्र विधियां हैं जिनका उपयोग किया जा सकता है जिनकी चर्चा यहां नहीं की जाएगी। अन्य जीवनचक्र विधियों के बारे में अधिक जानकारी के लिए, इस परिचय को देखें।

प्रतिक्रिया जीवनचक्र क्या है?

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

दूसरे चरण में, उपयोगकर्ता ने घटक के साथ बातचीत की और कुछ बदलाव किए। ज्यादातर मामलों में, उपयोगकर्ता ने एक क्रिया की है जिसने घटकों की स्थिति को बदल दिया है। अब हम जीवनचक्र के अद्यतन चरण में हैं।

अद्यतन चरण में, रिएक्ट परिवर्तनों को प्रदर्शित करने के लिए घटक को फिर से प्रस्तुत करेगा। अद्यतन चरण को ट्रिगर करने के लिए राज्य बदलने के ऊपर हमारे उदाहरण में, setState() प्रारंभिक स्थिति को बदलने और पुन:प्रतिपादन प्रक्रिया शुरू करने के लिए विधि को बुलाया जाएगा। सेटस्टेट के बारे में अधिक जानकारी के लिए, इस परिचयात्मक लेख को पढ़ें।

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

सामान्य जीवनचक्र के तरीके

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

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

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

बढ़ते

क्लास कंपोनेंट को माउंट करते समय, आमतौर पर इस्तेमाल की जाने वाली पहली वैकल्पिक विधि है constructor() तरीका। यह यहाँ है कि कंस्ट्रक्टर विधि में घटक की प्रारंभिक स्थिति को सीधे घोषित किया जा सकता है।

 क्लास ऐप रिएक्ट का विस्तार करता है। कॉम्पोनेंट {कन्स्ट्रक्टर (प्रॉप्स) {सुपर (प्रॉप्स); this.state={ वर्तमान उपयोगकर्ता :" " } }} 

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

हमारे उद्देश्यों के लिए, जब यह घटक माउंट किया जाता है, तो हम मान लेंगे कि किसी ने अभी तक लॉग इन नहीं किया है। उपयोगकर्ता को लॉग इन करने के लिए, हमें एक लॉगिन फॉर्म की आवश्यकता होती है। यह हमें पहली आवश्यक विधि render() . पर लाता है .

एक घटक को माउंट करने में एक आवश्यक विधि है render() तरीका। प्रारंभिक अवस्था सेट के साथ वर्ग घटक के निर्माण के बाद, हम या तो किसी अन्य घटक या HTML को प्रस्तुत कर सकते हैं।

रेंडर(){ रिटर्न (  ) }

render() . का सिंटैक्स और इसका रिटर्न स्टेटमेंट अन्य तरीकों से थोड़ा अलग है। ध्यान दें कि हम वापसी के बाद कोष्ठक का उपयोग करते हैं न कि घुंघराले कोष्ठक का। यहां रिटर्न स्टेटमेंट में, हम लॉग इनफॉर्म कंपोनेंट को रेंडर कर रहे हैं।

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

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

ऐसा करने के लिए, हम एक और काफी सामान्य वैकल्पिक विधि का उपयोग कर सकते हैं, componentWillMount() . यदि इस जीवनचक्र विधि को कहा जाता है, तो यह घटक प्रस्तुत करने के बाद निष्पादित होगी। यह हमारे नए राज्य को स्थापित करने के लिए एक अच्छी जगह है।

componentWillMount() { this.setState({currentUser:"जॉन"})}

अब, घटक को प्रस्तुत करने के बाद और माउंट करने से पहले, घटक की स्थिति जॉन के वर्तमान उपयोगकर्ता के साथ सेट की जाती है। यहां तक ​​​​कि अगर पृष्ठ को ताज़ा किया जाता है, तो स्थिति जॉन के साथ सेट हो जाएगी, इसलिए हमारा उपयोगकर्ता लॉग इन रहता है।

seState() . का उपयोग करना विधि हमें जीवनचक्र के अद्यतन चरण में भी लाती है। जब setState() कहा जाता है, यह रिएक्ट को संकेत देता है कि घटक में परिवर्तन किया गया है। प्रतिक्रिया अब उपयोगकर्ता को किए गए किसी भी बदलाव को दिखाने के लिए घटक को फिर से प्रस्तुत करेगी। हमारे मामले में, यह दिखाएगा कि जॉन लॉग इन है।

अपडेट करना

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

अनमाउंट करना

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

अनमाउंटिंग की केवल एक वैकल्पिक विधि है, componentWillUnmount() . हमारा उपयोगकर्ता, जॉन, अब लॉग आउट करना चाहता है। जब वह लॉगआउट बटन पर क्लिक करता है, तो हम componentWillUnmount() . का उपयोग कर सकते हैं अपने उपयोगकर्ता प्रोफ़ाइल को DOM से निकालने के लिए।

यह उदाहरण थोड़ा काल्पनिक है, लेकिन यह स्पष्ट रूप से दिखाता है कि जीवनचक्र के प्रत्येक चरण में क्या हो रहा है।