रिऐक्ट बेसिक एनिमेटेड गाइड

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

एक प्रतिक्रिया अनुप्रयोग शुरू करना

यह ध्यान दिया जाना चाहिए कि रिएक्ट एप्लिकेशन बनाने के लिए, आप शायद रिएक्ट के आंतरिक तंत्र के बारे में नहीं जानते होंगे। लेकिन मैंने उन सभी के लिए इस सामग्री को तैयार करने का फैसला किया, जो किसी भी कारण से, रिएक्ट के काम को बेहतर ढंग से समझना चाहते हैं। वर्णित प्रक्रियाओं को एनिमेटेड रूप में प्रस्तुत किया गया है। मुझे उम्मीद है कि यह उनके विश्लेषण को स्पष्ट करने में मदद करता है।

प्रतिक्रिया करें, जब आप पहली बार आवेदन शुरू करते हैं, तो स्वचालित रूप से App वर्ग को App के रूट कंटेनर में माउंट कर देता है।


पहला माउंट <App />

वर्चुअल डोम और तुलना एल्गोरिथ्म

रिएक्ट सबसिस्टम के काम के दौरान, डिफिंग अल्गोरिथम को लागू करता है, दो वर्चुअल DOM (वर्चुअल डॉक्यूमेंट ऑब्जेक्ट मॉडल, वर्चुअल डॉक्यूमेंट मॉडल) के बीच अंतर के लिए एक खोज की जाती है। थोड़ी देर के लिए धीरे। दो आभासी डोम? लगता है रिएक्ट में केवल एक ही वर्चुअल डोम है ... आइए इसे जानें। प्रतिक्रिया पिछले आभासी डोम की तुलना नए के साथ करती है। ब्राउज़र-आधारित DOM को अपडेट करना केवल तभी किया जाता है, जब वर्चुअल DOM की तुलना करते समय, उनके बीच अंतर प्रकट हो।


प्रतिक्रिया तुलना एल्गोरिथ्म का सार एनीमेशन। यदि यह पाया जाता है कि दो आभासी DOM पेड़ अलग हैं, तो ब्राउज़र में वास्तविक DOM नवीनतम आभासी DOM पेड़ के साथ मेल खाता है

उपरोक्त एनीमेशन पर क्या होता है पर विचार करें।

• click इवेंट पर, एक API.tweet() कॉल POST अनुरोध डेटा युक्त message ।
• अनुरोध के जवाब में, payload लौटाया जाता है, यह डेटा कॉलबैक (event) => { … } भेजा जाता है।
• यदि payload लौटाए गए डेटा में props में बदलाव का कारण होना चाहिए, तो वर्चुअल डोम पेड़ों की तुलना की जाती है।
• यदि पेड़ अलग-अलग होते हैं, तो सबसे हाल के पेड़ को ब्राउज़र में भेजा जाता है।
• तब नया वर्चुअल DOM पुराना हो जाता है, और हम नई घटनाओं की उम्मीद करते हैं।

प्रतिक्रिया घटक

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

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

रेंडर () विधि हमेशा एक शुद्ध कार्य रहना चाहिए।

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


फ़ंक्शन कॉल के साथ रेंडर () पद्धति को प्रदूषित न करें जो किसी तरह डोम को सीधे अपडेट करते हैं

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

घटक जीवन चक्र घटनाओं

जब कोई घटक पहली बार DOM में लगाया जाता है, तो React अपना componentWillMount WillMount जीवनचक्र घटना बढ़ाता है। वर्चुअल घटक पहली बार प्रदर्शित होने के बाद (अर्थात, यह ब्राउज़र के वास्तविक DOM में पहली बार आरोहित होता है), एक अन्य घटना को कहा जाता है - componentDidMount ।

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

परिणाम

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

प्रिय पाठकों! क्या आप रिएक्ट हुक का उपयोग करते हैं?