रिएक्टर में कंटेनर बनाम प्रस्तुति घटक

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

कंटेनर घटक क्या हैं?

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

यहाँ एक कंटेनर घटक का एक उदाहरण दिया गया है:

वर्ग कोलाज घटक बढ़ाता है {
   कंस्ट्रक्टर (प्रॉप्स) {
      सुपर (सहारा);
      
      this.state = {
         इमेजिस: []
      };
   }
   घटकडिमाउंट () {
      लाने ( '/ API / current_user / IMAGE_LIST')
         .then (प्रतिक्रिया => response.json ())
         .then (चित्र => this.setState ({images}));
   }
   प्रस्तुत करना() {
      वापसी (
         
            {this.state.images.map (छवि => {                
                                               })}                 )    } }

इसके विपरीत, प्रस्तुतिकरण घटक क्या हैं?

  • प्रेजेंटेशनल कंपोनेंट्स मुख्य रूप से इस बात से संबंधित हैं कि चीजें कैसे दिखती हैं
  • शायद केवल एक रेंडर विधि और थोड़ा और तर्क होता है
  • वे यह नहीं जानते कि वे उस डेटा को कैसे लोड या बदल सकते हैं जो वे प्रस्तुत करते हैं
  • वे सर्वश्रेष्ठ स्टेटलेस कार्यात्मक घटकों के रूप में लिखे गए हैं

यहाँ एक प्रस्तुति घटक का एक उदाहरण है:

// घटक को एक अभिकर्मक घटक के रूप में परिभाषित करना
वर्ग छवि का विस्तार घटक {
   प्रस्तुत करना() {
      वापसी ;
   }
}
डिफ़ॉल्ट छवि निर्यात करें
// घटक को एक स्थिर के रूप में परिभाषित करना
const छवि = सहारा => (
   
)
डिफ़ॉल्ट छवि निर्यात करें

प्रस्तुति घटकों के साथ, आपके पास उन्हें नियमित प्रतिक्रिया घटकों या स्थिरांक के रूप में परिभाषित करने का विकल्प होता है। उन्हें स्थिरांक के रूप में परिभाषित करना कुछ निर्भरता को दूर करने और कोड की अतिरिक्त लाइनों को आयात करने में मदद कर सकता है। इस प्रकार, यदि आप बहुत सारे डेटा लोड करना चाहते हैं, तो स्थैतिक घटकों को परिभाषित करना, स्थिरांक को ऐप लोड समय में कटौती कर सकता है।

कंटेनर घटक का उपयोग करके चिंताओं का पृथक्करण

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

यहां देखें कि यह कैसा हो सकता है:

const छवि = सहारा => (
   
)
डिफ़ॉल्ट छवि निर्यात करें
क्लास ImageContainer फैली हुई है React.Component {
   कंस्ट्रक्टर () {
      उत्तम();
      
      this.state = {
         इमेजिस: []
      };
   }
   घटकडिमाउंट () {
      लाने ( '/ API / current_user / IMAGE_LIST')
         .then (प्रतिक्रिया => response.json ())
         .then (चित्र => this.setState ({images}));
   }
   प्रस्तुत करना() {
      वापसी (
         
            {this.state.images.map (छवि => {                <छवि छवि = {छवि} />             })}                 )    } } डिफ़ॉल्ट ImageContainer निर्यात करें

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