रिएक्ट ट्यूटोरियल भाग 13: कक्षा आधारित घटक

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



→ भाग 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: पाठ्यक्रम परियोजना

पाठ 24. कक्षा आधारित घटक

→ मूल

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

जब मैं प्रतिक्रिया पाठ्यक्रम पढ़ाता हूं, तो मैं कार्यात्मक घटकों के साथ शुरू करना पसंद करता हूं, क्योंकि फ़ंक्शन स्पष्ट निर्माण हैं। एक कार्यात्मक घटक पर एक नज़र पर्याप्त रूप से यह समझने के लिए पर्याप्त है कि यह क्या कार्य करता है। कहते हैं, यहां एक कार्यात्मक घटक का कोड है, जो एक नियमित फ़ंक्शन है जो कुछ पाठ के लिए <h1> तत्व युक्त <div> तत्व देता है।

 function App() {   return (       <div>           <h1>Code goes here</h1>       </div>   ) } 

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

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

क्लास-आधारित घटक विवरण class कीवर्ड से शुरू होते हैं। फिर घटक का नाम आता है, समान घटकों के नाम के समान नियमों के अनुसार संकलित किया जाता है। उसी समय, class App जैसे निर्माण के बाद class App ब्रेस जैसा कुछ नहीं होने वाला है, लेकिन फ़ॉर्म का निर्माण extends React.Component । इसके बाद इसे घुंघराले ब्रेसिज़ की एक जोड़ी डालें जिसमें कक्षा के शरीर का वर्णन किया जाएगा।

जावास्क्रिप्ट में कक्षाएं पारंपरिक प्रोटोटाइप वंशानुक्रम मॉडल के लिए एक ऐड-ऑन हैं। class App extends React.Component के निर्माण का सार class App extends React.Component का class App extends React.Component है कि हम एक नया वर्ग घोषित करते हैं और बताते हैं कि इसका प्रोटोटाइप React.Component होना चाहिए। हमारे घटक में इस प्रोटोटाइप की उपस्थिति हमें इस घटक में React.Component में उपलब्ध सभी उपयोगी सुविधाओं का उपयोग करने की अनुमति देती है।

इसलिए, कक्षाओं के आधार पर एक घटक पर काम के इस चरण में, इसका कोड इस तरह दिखता है:

 class App extends React.Component {  } 

क्लास-आधारित घटक में कम से कम एक विधि होनी चाहिए। यह render() तरीका है। इस विधि को वही लौटना चाहिए जो हम आमतौर पर कार्यात्मक घटकों से लौटते हैं। यह क्लास-आधारित घटक का पूर्ण कोड जैसा दिखता है, उपरोक्त कार्यात्मक घटक के समान सुविधाओं को लागू करना है।

 class App extends React.Component {   render() {       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

कार्यात्मक घटकों के समान कक्षा-आधारित घटकों के साथ काम करें। यही है, हमारे मामले में, कार्यात्मक कोड के कोड को नए कोड के साथ बदलने के लिए पर्याप्त है और एप्लिकेशन पहले की तरह काम करेगा।

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

 class App extends React.Component {     yourMethodHere() {         }     render() {       const style = this.yourMethodHere()       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

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

अब बात करते हैं कि कक्षा-आधारित घटकों में उनके उदाहरण बनाते समय कक्षाओं में उत्तीर्ण होने वाले गुणों के साथ कैसे काम करें।

कार्यात्मक घटकों का उपयोग करते समय, हमने props पैरामीटर के साथ एक संबंधित फ़ंक्शन घोषित किया, जो कि एक वस्तु है जिसे प्राप्त होने पर घटक को पारित किया गया था। यह इस तरह दिखता है:

 function App(props) {   return (       <div>           <h1>{props.whatever}</h1>       </div>   ) } 

जब एक वर्ग के आधार पर एक घटक के साथ काम करते हैं, तो एक ही चीज इस तरह दिखती है:

 class App extends React.Component {   render() {       return (           <div>               <h1>{this.props.whatever}</h1>           </div>       )   } } 

परिणाम

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

प्रिय पाठकों! यदि आप व्यावसायिक रूप से रिएक्ट का उपयोग कर रहे हैं, तो कृपया हमें बताएं कि आप किन स्थितियों में कार्यात्मक घटकों का उपयोग करते हैं और किस वर्ग-आधारित घटकों में।