React में लाइफसाइकिल को तीन अलग-अलग चरणों में माना जा सकता है: माउंटिंग, अपडेटिंग, और अनमाउंटिंग। माउंटिंग तब होती है जब React कंपोनेंट DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) पर रेंडर होता है। जब उस कंपोनेंट में परिवर्तन किए जाते हैं, तो यह अपडेटिंग चरण में प्रवेश करता है।
लाइफसाइकिल के अपडेट चरण में, नई जानकारी की जांच करने और उस कंपोनेंट को फिर से रेंडर करने के लिए आंतरिक मेथड्स की एक श्रृंखला चलाई जाती है। अनमाउंटिंग बस तब होती है जब कोई कंपोनेंट DOM से हटा दिया जाता है।
इस लेख में कोर्स लाइफसाइकिल के व्यापक प्रभावों और कुछ आमतौर पर उपयोग किए जाने वाले मेथड्स पर चर्चा करता है। अधिक लाइफसाइकिल मेथड्स हैं जिनका उपयोग किया जा सकता है जिन पर यहां चर्चा नहीं की जाएगी। अन्य लाइफसाइकिल मेथड्स के बारे में अधिक जानकारी के लिए, इस परिचय को देखें।
React Lifecycle क्या है?
जब कोई कंपोनेंट DOM में लोड होता है, तो यह अपने तीन चरणों, या लाइफसाइकिल में से पहले में प्रवेश करता है। इस पहले चरण को माउंटिंग कहा जाता है। इस चरण में, कंपोनेंट को मूल रूप से परिभाषित किए अनुसार रेंडर किया जाता है। यह अब यूजर के साथ इंटरैक्ट करने और दूसरे चरण में प्रवेश करने के लिए तैयार है।
दूसरे चरण में, यूजर ने कंपोनेंट के साथ इंटरैक्ट किया है और कुछ परिवर्तन किए हैं। ज्यादातर मामलों में, यूजर ने कोई एक्शन किया है जिसने कंपोनेंट की स्टेट को बदल दिया है। हम अब लाइफसाइकिल के अपडेट चरण में हैं।
अपडेट चरण में, React कंपोनेंट को परिवर्तन प्रदर्शित करने के लिए फिर से रेंडर करेगा। स्टेट बदलकर अपडेट चरण को ट्रिगर करने के हमारे उपरोक्त उदाहरण में, प्रारंभिक स्टेट को बदलने और पुनः रेंडरिंग प्रक्रिया शुरू करने के लिए setState() मेथड को कॉल किया जाएगा। setState पर अधिक के लिए, इस परिचयात्मक लेख को पढ़ें।
अंत में, जब हम किसी विशिष्ट कंपोनेंट से दूर नेविगेट करते हैं, तो हम इसे DOM से साफ़ कर सकते हैं। इसे अनमाउंटिंग के रूप में जाना जाता है और यह लाइफसाइकिल का तीसरा चरण है। हालांकि यह चरण आवश्यक नहीं है, लेकिन कंपोनेंट-हेवी ऐप्स के लिए इसकी सिफारिश की जाती है।
सामान्य लाइफसाइकिल मेथड्स
अब जब हम React कंपोनेंट के लाइफसाइकिल क्रम पर चर्चा कर चुके हैं, तो आइए कुछ सामान्य लाइफसाइकिल मेथड्स देखें। लाइफसाइकिल मेथड्स React मेथड्स हैं जिन्हें विभिन्न लाइफसाइकिल चरणों में कॉल किया जाता है। उनमें से कुछ आवश्यक हैं जबकि कुछ वैकल्पिक हैं। हम आवश्यक और आमतौर पर उपयोग किए जाने वाले वैकल्पिक मेथड्स को देखने जा रहे हैं।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी टेक जॉब संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही बूटकैंप से मैच करवाएं।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी ढूंढने तक।
माउंटिंग
क्लास कंपोनेंट को माउंट करते समय, पहला आमतौर पर उपयोग किया जाने वाला वैकल्पिक मेथड constructor() मेथड है। कंस्ट्रक्टर मेथड में ही कंपोनेंट की प्रारंभिक स्टेट को सीधे घोषित किया जा सकता है।
class App extends React.Component { constructor(props) { super(props); this.state= { currentUser : " " } } }
इस उदाहरण में, हम करंट यूजर के लिए एक ऑब्जेक्ट के रूप में प्रारंभिक स्टेट सेट कर रहे हैं। constructor() मेथड में बॉयलरप्लेट super() मेथड की आवश्यकता होती है। बेस कंस्ट्रक्टर super() पर अधिक के लिए, हमारे setState गाइड को पढ़ें।
हमारे उद्देश्यों के लिए, जब यह कंपोनेंट माउंट होता है, तो हम मान लेंगे कि अभी तक किसी ने लॉग इन नहीं किया है। यूजर को लॉग इन करने के लिए, हमें लॉगिन फॉर्म की आवश्यकता है। यह हमें पहले आवश्यक मेथड, render() पर लाता है।
कंपोनेंट को माउंट करने में एक आवश्यक मेथड render() मेथड है। क्लास कंपोनेंट के निर्माण और इसकी प्रारंभिक स्टेट सेट होने के बाद, हम या तो दूसरा कंपोनेंट या HTML रेंडर कर सकते हैं।
render(){ return ( <LoginForm /> ) }
render() का सिंटैक्स और इसका रिटर्न स्टेटमेंट अन्य मेथड्स से थोड़ा अलग है। ध्यान दें कि हम रिटर्न के बाद पैरेंथेसिस का उपयोग करते हैं न कि कर्ली ब्रैकेट्स का। यहां रिटर्न स्टेटमेंट में, हम LoginForm कंपोनेंट रेंडर कर रहे हैं।
जब कोई यूजर लॉग इन करता है, तो हमारे पास क्रेडेंशियल्स तक पहुंच होगी। एक कार्यशील ऐप में, लॉग इन के लिए मिलते-जुलते क्रेडेंशियल्स प्राप्त करने के लिए सर्वर पर फेच रिक्वेस्ट की आवश्यकता होती है। लाइफसाइकिल पर इस परिचयात्मक लेख के संदर्भ में, हम स्टेट को सीधे सेट करेंगे।
इस सरल उदाहरण में, हमारे पास एक यूजर, जॉन है। वह अपना पासवर्ड दर्ज करता है और लॉगिन बटन दबाता है। यह सर्वर पर फेच रिक्वेस्ट भेजता है और सर्वर जॉन के क्रेडेंशियल्स के साथ प्रतिक्रिया करता है। अब जब जॉन लॉग इन है, तो हम चाहते हैं कि वह तब तक लॉग इन रहे जब तक वह लॉग आउट करने का फैसला न करे।
इसे करने के लिए, हम एक और काफी सामान्य वैकल्पिक मेथड, componentWillMount() का उपयोग कर सकते हैं। यदि यह लाइफसाइकिल मेथड कॉल किया जाता है, तो यह कंपोनेंट रेंडर होने के बाद निष्पादित होगा। यह हमारी नई स्टेट सेट करने के लिए एक अच्छी जगह है।
componentWillMount() { this.setState({ currentUser: "John" }) }
अब, कंपोनेंट रेंडर होने के बाद और माउंट होने से पहले, कंपोनेंट की स्टेट जॉन के करंट यूजर के साथ सेट है। भले ही पेज रीफ्रेश हो, स्टेट जॉन के साथ सेट होगी, इसलिए हमारा यूजर लॉग इन रहता है।
setState() मेथड का उपयोग करना हमें लाइफसाइकिल के अपडेट चरण में भी लाता है। जब setState() कॉल किया जाता है, तो यह React को संकेत देता है कि कंपोनेंट में परिवर्तन किया गया है। React अब यूजर को किए गए किसी भी परिवर्तन को दिखाने के लिए कंपोनेंट को फिर से रेंडर करेगा। हमारे मामले में, यह दिखाएगा कि जॉन लॉग इन है।
अपडेटिंग
लाइफसाइकिल में अपडेट चरण में काफी कुछ वैकल्पिक लाइफसाइकिल मेथड्स हैं जो इस परिचय के दायरे से बाहर हैं। हमारे उद्देश्यों के लिए यह कहना पर्याप्त है कि जब परिवर्तन का पता चलता है (आमतौर पर setState के साथ), React आवश्यक render() मेथड को फिर से कॉल करेगा। फिर कंपोनेंट किए गए परिवर्तनों को प्रतिबिंबित करने के लिए फिर से रेंडर होगा।
अनमाउंटिंग
कंपोनेंट के लाइफसाइकिल में अंतिम चरण को अनमाउंटिंग कहा जाता है। यह वह जगह है जहां एक कंपोनेंट को DOM से हटा दिया जाता है। हालांकि आवश्यक नहीं, यह कंपोनेंट-हेवी ऐप को अधिक कुशलता से प्रदर्शन करने में मदद करता है।
अनमाउंटिंग में केवल एक वैकल्पिक मेथड है, componentWillUnmount()। हमारा यूजर, जॉन, अब लॉग आउट करना चाहता है। जब वह लॉगआउट बटन क्लिक करता है, तो हम उसके यूजर प्रोफाइल को DOM से हटाने के लिए componentWillUnmount() का उपयोग कर सकते हैं।
यह उदाहरण थोड़ा बनावटी है, लेकिन लाइफसाइकिल के प्रत्येक चरण में क्या हो रहा है यह स्पष्ट रूप से दिखाता है।
class UserContainer extends React.Component { constructor(props) { super(props); this.state = { currentUser: " " } } componentWillMount() { this.setState({ currentUser: "John" }) } logout = () => { this.setState({ currentUser: " " }) } render() { if this.state.currentUser === "John" { return ( <UserProfile /> <button type="button" onclick={this.logout}>Logout</button> ) } else { return( <button type="button>">Login</button> ) } } } class UserProfile extends React.Component { componentWillUnmount() { alert("Logged Out") } render() { return ( <h1>Welcome back, John!</h1> ) } }
हमारे पास दो कंपोनेंट्स हैं। पहला UserContainer है और यह केवल UserProfile कंपोनेंट को होल्ड करता है। UserProfile में यूजर जानकारी होती है।
UserContainer में, हम पहले की तरह अपना कंपोनेंट बनाते हैं और प्रारंभिक स्टेट सेट करते हैं। कंपोनेंट बहुत संक्षिप्त रूप से लॉगिन बटन के साथ रेंडर होता है। कंपोनेंट माउंट होने से ठीक पहले, हम जॉन को लॉग इन करते हैं। इससे React कंपोनेंट को अपडेट करता है और इसे जॉन के क्रेडेंशियल्स के साथ फिर से रेंडर करता है।
अब जब जॉन लॉग इन है, तो हम UserProfile कंपोनेंट रेंडर करते हैं। इसमें जॉन की सभी यूजर जानकारी होती है, इसलिए जैसे ही वह लॉग आउट करता है हमें इसे DOM से हटाने की आवश्यकता होती है।
जब लॉगआउट बटन क्लिक किया जाता है, तो यह हमारे लॉगआउट फंक्शन को निष्पादित करता है जो केवल करंट यूजर को खाली स्ट्रिंग की प्रारंभिक स्टेट पर वापस करता है। क्योंकि हमारा लॉगआउट फंक्शन setState को कॉल करता है, React कंटेनर कंपोनेंट को फिर से रेंडर करेगा। अब, यह UserProfile कंपोनेंट नहीं दिखाएगा और हमें पॉप-अप अलर्ट मिलेगा जो यूजर को सूचित करेगा कि उसने लॉग आउट कर दिया है।
निष्कर्ष
React लाइफसाइकिल में यहां कवर किए गए से कहीं अधिक है। इस लेख का लक्ष्य कुछ सरल कोड उदाहरणों के साथ बेसिक कॉन्सेप्ट्स को पेश करना है। अब जब लाइफसाइकिल की अवधारणा पेश की गई है, तो आधिकारिक React डॉक्यूमेंटेशन अधिक स्पष्ट होगा।
इस गाइड और लिंक किए गए पूरक लेखों को पढ़ने के बाद, अब आपकी समझ में आ गया है कि React में लाइफसाइकिल क्या है और साथ ही अपने दम पर गहराई तक जाने की क्षमता भी। प्रोग्रामिंग में सभी जटिल अवधारणाओं की तरह, दैनिक अभ्यास विवरणों को सुलझाने में मदद करता है।
