रिएक्ट ट्यूटोरियल भाग 19: घटक जीवन चक्र के तरीके

रिएक्ट ट्यूटोरियल के अनुवाद के भाग में, आपको घटक जीवन चक्र विधियों के अवलोकन के साथ प्रस्तुत किया जाएगा।



→ भाग 1: पाठ्यक्रम अवलोकन, प्रतिक्रिया की प्रतिक्रिया के कारण, ReactDOM और JSX
→ भाग 2: कार्यात्मक घटक
→ भाग 3: घटक फाइलें, परियोजना संरचना
→ भाग 4: माता-पिता और बच्चे के घटक
→ भाग 5: एक TODO आवेदन, स्टाइलिंग की मूल बातें पर काम शुरू
→ भाग 6: पाठ्यक्रम की कुछ विशेषताओं के बारे में, जेएसएक्स और जावास्क्रिप्ट
→ भाग 7: इनलाइन शैली
→ भाग 8: TODO आवेदन पर काम जारी रखा, घटकों के गुणों से परिचित
→ भाग 9: घटक गुण
→ भाग 10: घटक गुणों और स्टाइल के साथ काम करने पर कार्यशाला
→ भाग 11: डायनेमिक मार्कअप जेनरेशन और मैप एरे विधि
→ भाग 12: कार्यशाला, एक TODO आवेदन पर काम का तीसरा चरण
→ भाग 13: वर्ग-आधारित घटक
→ भाग 14: वर्ग-आधारित घटकों, घटक स्थिति पर कार्यशाला
→ भाग 15: घटक स्वास्थ्य कार्यशालाएँ
→ भाग 16: TODO अनुप्रयोग, ईवेंट हैंडलिंग पर काम का चौथा चरण
→ भाग 17: TODO अनुप्रयोग पर काम का पांचवा चरण, घटकों की स्थिति को संशोधित करता है
→ भाग 18: TODO आवेदन पर काम का छठा चरण
→ भाग 19: घटक जीवन चक्र विधियाँ
भाग 20: सशर्त प्रतिपादन में पहला पाठ
→ भाग 21: सशर्त प्रतिपादन पर दूसरा पाठ और कार्यशाला
→ भाग 22: TODO आवेदन पर काम का सातवां चरण, बाहरी स्रोतों से डेटा डाउनलोड करना
→ भाग 23: रूपों के साथ काम करने पर पहला पाठ
→ भाग 24: दूसरा रूप पाठ
→ भाग 25: रूपों के साथ काम करने पर कार्यशाला
→ भाग 26: अनुप्रयोग वास्तुकला, कंटेनर / घटक पैटर्न
→ भाग 27: पाठ्यक्रम परियोजना

पाठ 34. घटक जीवन चक्र के तरीके, भाग 1

→ मूल

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

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

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

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

अब, आइए रिएक्ट घटकों के जीवन चक्र के तरीकों के बारे में चर्चा शुरू करें जिसे आप सबसे अधिक बार सामना करेंगे।

हम हमेशा की तरह यहां डेमो प्रोजेक्ट का उपयोग करेंगे। इस स्थिति में, हम App.js फ़ाइल में create-react-app का उपयोग करके बनाई गई एक मानक परियोजना से शुरू करते हैं, जिसमें निम्न कोड होता है:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

शुरू करने के लिए, आइए एक नजर डालते हैं उस विधि पर जो आपने पहले ही कक्षा-आधारित घटकों के साथ प्रयोग की है। यह render() तरीका है।

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

अब आइए एक और घटक जीवन चक्र विधि पर ध्यान दें - componentDidMount() । यह विधि किसी अन्य वर्ग-आधारित घटक विधियों की तरह, घटक वर्ग के शरीर में घोषित की जाती है:

 componentDidMount() { } 

इस पद्धति को घटक के जीवन चक्र के समय कहा जाता है, जिसकी तुलना इस घटक के "जन्म" से की जा सकती है। DOM ट्री में कंपोनेंट माउंटेड (सम्मिलित) होने के बाद यह विधि एक बार चालू हो जाती है। इस मामले में, उदाहरण के लिए, यदि घटक की उपस्थिति को प्रभावित करने वाले कुछ डेटा को बदलने के बाद, इसे फिर से प्रस्तुत किया जाएगा, तो componentDidMount() विधि नहीं कहा जाएगा। यह इस तथ्य के कारण होता है कि जब इस तरह के ऑपरेशन करते हैं, तो घटक को डोम ट्री से हटाया नहीं जाता है और फिर फिर से पेड़ में शामिल किया जाता है।

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

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

 componentWillReceiveProps(nextProps) { } 

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

 componentWillReceiveProps(nextProps) {   if (nextProps.whatever !== this.props.whatever) {       //   -    } } 

आमतौर पर इस पद्धति का उपयोग उस तरीके से किया जाता है।

हालांकि, जैसा कि पहले ही उल्लेख किया गया है, प्रतिक्रिया 16.3 की रिहाई के बाद, घटक जीवन चक्र के कुछ तरीकों को पदावनत कर दिया गया था, और componentWillReceiveProps() WillReceiveProps componentWillReceiveProps() ऐसे तरीकों में से एक है।

रिएक्ट 17 तक, इन विरासत विधियों का उपयोग अभी भी किया जा सकता है, हालांकि यह बेहतर नहीं है। यदि आप विचाराधीन विधि के बिना नहीं कर सकते हैं, तो आपको इसे UNSAFE_componentWillReceiveProps() कॉल करना UNSAFE_componentWillReceiveProps() । रिएक्ट 17 के बाद, componentWillReceiveProps() विधि के नाम का मतलब कुछ खास नहीं होगा।

पुरानी पद्धति को समझने में सक्षम होने के लिए इस पद्धति के बारे में जानना उपयोगी है, लेकिन इसका उपयोग आधुनिक प्रतिक्रिया अनुप्रयोगों के विकास में नहीं किया जाएगा।

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

यह घटकों को फिर से प्रस्तुत करने के लिए रिएक्ट का कारण बनता है, तब भी जब घटक से संबंधित कुछ भी नहीं बदलता है। यह एप्लिकेशन को धीमा कर सकता है, क्योंकि इस सिद्धांत द्वारा रिएक्ट उन सभी घटकों को संसाधित करता है जो एप्लिकेशन बनाते हैं। shouldComponentUpdate() विधि डेवलपर को एप्लिकेशन को ऑप्टिमाइज़ करने की अनुमति देती है। यहां आप कुछ तर्क को लागू कर सकते हैं जो घटक को अपडेट करने की आवश्यकता का पता लगाने में मदद करता है। इस विधि को आमतौर पर इस तरह घोषित किया जाता है:

 shouldComponentUpdate(nextProps, nextState) {   //  true        //  false    } 

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

एक और घटक जीवनचक्र विधि जिसके बारे में हम बात करेंगे, उसे componentWillUnmount() कहा जाता है। यह विधि घटक के "जीवन" के अंत को चिह्नित करती है - वह क्षण जब इसे DOM ट्री से हटा दिया जाता है और स्क्रीन से गायब हो जाता है।

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

यहाँ हमारे App घटक का पूरा कोड है, जिसमें जीवन चक्र विधियाँ जोड़ी गयी हैं:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     componentDidMount() {       //  ,        }     componentWillReceiveProps(nextProps) {       if (nextProps.whatever !== this.props.whatever) {           //   -        }   }     shouldComponentUpdate(nextProps, nextState) {       //  true            //  false      }     componentWillUnmount() {       //            // ( -   )   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

यह इस पाठ को समाप्त करता है, हालांकि यह ध्यान दिया जाना चाहिए कि रिएक्ट घटकों के जीवन चक्र के तरीके उन तक सीमित नहीं हैं जिनकी हमने आज समीक्षा की।

पाठ 35. घटक जीवन चक्र के तरीके, भाग 2

→ मूल

जैसा कि पिछले पाठ में पहले ही उल्लेख किया गया है, जब रिएक्ट 16.3 सामने आया, तो यह बताया गया कि तीन घटक जीवन चक्र विधियां पुरानी थीं। ये विधियां componentWillMount() , componentWillReceiveProps() और componentWillUpdate() । दो नए तरीके भी बताए गए। यह स्थिर getDerivedStateFromProps() विधि और getSnapshotBeforeUpdate() विधि है। यह नहीं कहा जा सकता है कि ये विधियां इस पाठ्यक्रम के भविष्य की कक्षाओं में महत्वपूर्ण भूमिका निभाएंगी, लेकिन इसके बावजूद, हम उन्हें यहां जान पाएंगे।

हम उसी परियोजना में प्रयोग करेंगे जिसका हमने पिछली बार उपयोग किया था।

यहाँ getDerivedStateFromProps() विधि की घोषणा की तरह दिखता है:

 static getDerivedStateFromProps(props, state) { } 

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

अब हम getSnapshotBeforeUpdate() विधि के बारे में बात करते हैं। यहां बताया गया है कि उनकी घोषणा किस तरह की होती है:

 getSnapshotBeforeUpdate() { } 

इसे एक जीवन चक्र विधि के रूप में माना जा सकता है जो आपको अपडेट करने से पहले घटक में जो कुछ है उसका बैकअप बनाने की अनुमति देता है। यह एक एप्लिकेशन की स्थिति का एक स्नैपशॉट जैसा दिखता है। यह ध्यान दिया जाना चाहिए कि रिएक्ट के डेवलपर्स का कहना है कि इस पद्धति का दायरा सीमित है। यहाँ इसके लिए प्रलेखन है।

परिणाम

आज हमने घटक जीवन चक्र विधियों के बारे में बात की। जब आप प्रतिक्रिया अनुप्रयोगों के विकास में आगे बढ़ते हैं, तो वे निश्चित रूप से काम में आएंगे। इस पाठ्यक्रम की आगे की कक्षाओं में, हम इन विधियों के साथ, विशेष रूप से, componentDidMount() साथ मिलेंगे। अगली बार हम सशर्त प्रतिपादन के बारे में बात करेंगे।

प्रिय पाठकों! यदि आप पेशेवर रूप से रिएक्ट एप्लिकेशन विकसित कर रहे हैं, तो कृपया हमें इस बारे में बताएं कि आप घटक जीवन चक्र विधियों का उपयोग कैसे करते हैं।