'प्रतिक्रिया में, सब कुछ एक घटक है'
यदि आप रिएक्ट से परिचित हैं, तो आपने इस वाक्यांश को कई बार सुना या पढ़ा होगा। लेकिन क्या आप जानते हैं कि इसका सही अर्थ क्या है और इसका उपयोग कैसे किया जाता है? यदि आप नहीं करते हैं, तो प्रतिक्रियाशील घटकों और जीवनचक्र के विभिन्न चरणों के बारे में जानने के लिए इस ब्लॉग को पढ़ें। मुझे यकीन है कि जब तक आप समाप्त नहीं करेंगे इस ब्लॉग को पढ़ने से आपको रिएक्ट घटकों और इसके आसपास की अवधारणाओं के बारे में पूरी समझ होगी। लेकिन आगे बढ़ने से पहले, जिन विषयों पर चर्चा करूँगा, उन पर एक नज़र डालिए:
जावा प्रोग्राम को कैसे समाप्त करें
- रिएक्ट घटक क्या हैं?
- प्रतिक्रिया घटकों के लाभ
- सहारा देता है
- राज्यों
- राज्यों बनाम सहारा
- प्रतिक्रिया घटक जीवनचक्र
रिएक्ट घटक क्या हैं?
पहले डेवलपर्स को एक सरल सिंगल पेज एप्लिकेशन विकसित करने के लिए 1000 लाइनों का कोड लिखना पड़ता था। उन अनुप्रयोगों में से अधिकांश ने पारंपरिक डोम संरचना का पालन किया और उनमें परिवर्तन करना बहुत चुनौतीपूर्ण और डेवलपर्स के लिए एक कठिन काम था।उन्हें मैन्युअल रूप से उस तत्व की खोज करनी थी, जिसे परिवर्तन की आवश्यकता हो और उसी के अनुसार इसे अपडेट किया जाए। यहां तक कि एक छोटी सी गलती भी आवेदन विफलता का कारण होगी। इसके अलावा, DOM को अपडेट करना बहुत महंगा था। इस प्रकार, घटक-आधारित दृष्टिकोण पेश किया गया था। इस दृष्टिकोण में, पूरे आवेदन को तार्किक विखंडू में विभाजित किया जाता है जिसे अवयव कहा जाता है। रिएक्ट उन रूपरेखाओं में से एक था, जिन्होंने इस दृष्टिकोण को चुना।यदि आप वेब विकास में अपना करियर बनाने की योजना बना रहे हैं, तो शुरुआती शुरुआत आपके लिए बहुत सारे अवसर खोलेगी।
आइए अब समझते हैं कि ये घटक क्या हैं।
रिएक्ट घटकों को यूजर इंटरफेस के निर्माण खंड के रूप में माना जाता है। इनमें से प्रत्येक घटक एक ही स्थान पर मौजूद हैं, लेकिन एक दूसरे से स्वतंत्र रूप से निष्पादित होते हैं। रिएक्ट घटकों की अपनी संरचना, तरीके और साथ ही एपीआई हैं। वे पुन: प्रयोज्य हैं और आवश्यकता के अनुसार इंटरफेस में इंजेक्ट किए जा सकते हैं। बेहतर समझ रखने के लिए, पूरे यूआई को एक पेड़ के रूप में समझें।यहां शुरुआती घटक जड़ बन जाता है और प्रत्येक स्वतंत्र टुकड़े शाखाएं बन जाती हैं, जिन्हें आगे उप-शाखाओं में विभाजित किया जाता है।
यह हमारे यूआई को व्यवस्थित रखता है और डेटा और स्थिति को तार्किक रूप से रूट से शाखाओं और फिर उप-शाखाओं में बदलने की अनुमति देता है। घटक क्लाइंट-साइड से सीधे सर्वर को कॉल करते हैं जो डोम को पृष्ठ को ताज़ा किए बिना गतिशील रूप से अपडेट करने की अनुमति देता है। ऐसा इसलिए है क्योंकि प्रतिक्रिया घटक AJAX अनुरोधों की अवधारणा पर बनाए गए हैं। प्रत्येक घटक का अपना इंटरफ़ेस होता है जो सर्वर पर कॉल कर सकता है और उन्हें अपडेट कर सकता है। जैसा कि ये घटक एक दूसरे से स्वतंत्र हैं, प्रत्येक एक दूसरे के रूप में या यूआई को प्रभावित किए बिना ताज़ा कर सकता है।
हम उपयोग करते हैं React.createClass () घटक बनाने की विधि। इस विधि को एक ऑब्जेक्ट तर्क पारित किया जाना चाहिए जो प्रतिक्रिया घटक को परिभाषित करेगा। प्रत्येक घटक में बिल्कुल एक होना चाहिए प्रस्तुत करना() तरीका। यह एक घटक की सबसे महत्वपूर्ण संपत्ति है जो जावास्क्रिप्ट, जेएसएक्स में HTML को पार्स करने के लिए जिम्मेदार है। यह प्रस्तुत करना() DOM नोड के रूप में घटक का HTML प्रतिनिधित्व लौटाएगा। इसलिए, सभी HTML टैग्स को अंदर संलग्न टैग में संलग्न किया जाना चाहिए प्रस्तुत करना() ।
निम्नलिखित एक घटक बनाने के लिए एक नमूना कोड है।
'प्रतिक्रिया' से आयात प्रतिक्रियाआपकी आईडी {this.state.id} है
)}} ReactDOM.render (, document.getElementById ('सामग्री'))
राज्यों बनाम सहारा
प्रतिक्रिया घटक जीवनचक्र
प्रतिक्रिया विभिन्न तरीकों को प्रदान करती है जो तब सूचित करती है जब किसी घटक के जीवनचक्र में एक निश्चित अवस्था होती है। इन विधियों को जीवनचक्र विधियां कहा जाता है। ये जीवनचक्र विधियाँ बहुत जटिल नहीं हैं। आप इन विधियों को विशेष ईवेंट हैंडलर के रूप में सोच सकते हैं जिन्हें एक घटक जीवन के दौरान विभिन्न बिंदुओं पर बुलाया जाता है। आप विभिन्न कार्यों को करने के लिए इन तरीकों से अपना कोड भी जोड़ सकते हैं। घटक के जीवनचक्र की बात करें तो जीवनचक्र को 4 चरणों में बांटा गया है। वे:
- पहला भाग
- अद्यतन चरण
- Props परिवर्तन चरण
- अनमना चरण
इन चरणों में से प्रत्येक में कुछ जीवन चक्र विधियां शामिल हैं जो केवल उनके लिए विशिष्ट हैं। तो आइए जानें कि इनमें से प्रत्येक चरण के दौरान क्या होता है।
ए। पहला भाग - रिएक्ट घटक के जीवनचक्र का पहला चरण प्रारंभिक चरण या प्रारंभिक रेंडरिंग चरण है। इस चरण में,घटक अपनी यात्रा शुरू करने और DOM के लिए अपना रास्ता बनाने वाला है। इस चरण में निम्नलिखित विधियां शामिल हैं, जिन्हें पूर्वनिर्धारित क्रम में लगाया जाता है।
- getDefaultProps (): इस विधि का उपयोग डिफ़ॉल्ट मान को निर्दिष्ट करने के लिए किया जाता है this.props । आपके कंपोनेंट के बनने से पहले ही इसे कॉल किया जाता है या पेरेंट के किसी भी प्रॉपर को इसमें डाल दिया जाता है।
- getInitialState (): इस विधि का उपयोग किया जाता हैउल्लिखित करना का डिफ़ॉल्ट मान इस इससे पहले कि आपका घटक बनाया जाए।
- कंपोनेंटमाउंट (): यह अंतिम विधि है जिसे आप अपने घटक को DOM में प्रस्तुत करने से पहले कॉल कर सकते हैं। लेकिन अगर तुम बुलाओ सेटस्टैट () इस विधि के अंदर आपका घटक पुन: रेंडर नहीं करेगा।
- प्रस्तुत करना(): गु विधि एकल रूट HTML नोड को लौटाने के लिए जिम्मेदार है और प्रत्येक घटक में परिभाषित किया जाना चाहिए। तुम लौट सकते हो अमान्य या असत्य यदि आप कुछ भी प्रस्तुत नहीं करना चाहते हैं।
- घटकडिमाउंट (): एक बार घटक को प्रस्तुत किया जाता है और उसे DOM पर रखा जाता है विधि कहा जाता है। यहां आप कोई भी DOM क्वेरी ऑपरेशन कर सकते हैं।
बी। अद्यतन चरण - एक बार जब घटक DOM में जोड़ दिया जाता है, तो वे केवल तभी अपडेट और रेंडर कर सकते हैं जब कोई राज्य परिवर्तन होता है। हर बार जब स्थिति बदलती है, तो घटक इसे कॉल करता है प्रस्तुत करना() फिर। कोई भी घटक, जो इस घटक के आउटपुट पर निर्भर करता है, उसे भी कॉल करेगा प्रस्तुत करना() फिर। यह किया जाता है, यह सुनिश्चित करने के लिए कि हमारा घटक स्वयं का नवीनतम संस्करण प्रदर्शित कर रहा है। इस प्रकार घटकों को सफलतापूर्वक अपडेट करने के लिए निम्नलिखित विधियों को दिए गए क्रम में लागू किया जाता है:
- shouldComponentUpdate (): इस पद्धति का उपयोग करके आप अपने घटक के व्यवहार को स्वयं अद्यतन करने पर नियंत्रण कर सकते हैं। यदि आप इस विधि से एक सही वापसी करते हैं,घटक अद्यतन करेगा। यदि यह विधि वापस आती है तो ए.एस.असत्य, घटक अद्यतन को छोड़ देगा।
- कंपोनेंटवेलपडेट (): टीउसका तरीका कहा जाता है जेआपके घटक को अपडेट करने से पहले ust। इस विधि में, आप कॉल करके अपना घटक स्थिति नहीं बदल सकते this.setState ।
- प्रस्तुत करना(): यदि आप के माध्यम से झूठे लौट रहे हैं shouldComponentUpdate () कोड अंदर प्रस्तुत करना() यह सुनिश्चित करने के लिए फिर से बुलाया जाएगा कि आपका घटक खुद को ठीक से प्रदर्शित करता है।
- घटकडिपडेट (): एक बार जब घटक को अपडेट और रेंडर किया जाता है, तो यह विधि लागू होती है। आप इस विधि के अंदर कोई भी कोड डाल सकते हैं, जिसे आप घटक के अपडेट होने के बाद निष्पादित करना चाहते हैं।
सी। परिवर्तन चरण - उपरांत घटक को DOM में प्रस्तुत किया गया है, केवल दूसरी बार घटक अद्यतन करेगा, इसके अलावा राज्य परिवर्तन तब होता है जब इसका प्रोप मूल्य बदलता है। व्यावहारिक रूप से यह चरण पिछले चरण के समान काम करता है, लेकिन राज्य के बजाय यह प्रॉपर से निपटता है। इस प्रकार, इस चरण में अद्यतन चरण से केवल एक अतिरिक्त विधि है।
- कंपोनेंटलीवरिवप्रॉप्स (): यह विधि एक तर्क देती है जिसमें नया प्रोप मान होता है जो घटक को सौंपा जाना है।
जीवन चक्र के बाकी तरीके उन तरीकों से अलग-अलग व्यवहार करते हैं जो हमने पिछले चरण में देखे थे।
- shouldComponentUpdate ()
- कंपोनेंटवेलपडेट ()
- प्रस्तुत करना()
- घटकडिपडेट ()
d।अनमाउंटिंग फेज -यह घटकों के जीवन चक्र का अंतिम चरण होता है जिसमें घटक को नष्ट कर दिया जाता है और DOM से पूरी तरह हटा दिया जाता है। इसमें केवल एक विधि शामिल है:
- कंपोनेंटव्यूनलाउंट (): एक बार जब यह विधि लागू हो जाती है, तो आपके घटक को DOM से स्थायी रूप से हटा दिया जाता है।इस विधि में, यers किसी भी सफाई से संबंधित कार्य कर सकते हैं जैसे कि इवेंट श्रोताओं को हटाना, टाइमर को रोकना, आदि।
निम्नलिखित संपूर्ण जीवन चक्र आरेख है:
यह हमें प्रतिक्रिया घटकों पर ब्लॉग के अंत में लाता है। मुझे उम्मीद है कि इस ब्लॉग में मैं स्पष्ट रूप से समझाने में सक्षम था कि रिएक्ट घटक क्या हैं, उनका उपयोग कैसे किया जाता है। आप मेरे ब्लॉग को देख सकते हैं , यदि आप ReactJS के बारे में अधिक जानना चाहते हैं।
यदि आप रिएक्ट में प्रशिक्षित होना चाहते हैं और अपने आप दिलचस्प यूआई विकसित करना चाहते हैं, तो बाहर की जाँच करें 250,000 से अधिक संतुष्ट शिक्षार्थियों के एक नेटवर्क के साथ एक विश्वसनीय ऑनलाइन शिक्षण कंपनी, एडुरेका द्वारा, दुनिया भर में फैली हुई है।
क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।