रिएक्ट या रिएक्टिव नेटिव डेवलपर के रूप में, कंटेनर और प्रेजेंटेशनल घटकों की अवधारणा को समझना महत्वपूर्ण है।
ये डिज़ाइन पैटर्न चिंताओं के उचित पृथक्करण में सहायता करते हैं। आप इस अवधारणा का उपयोग यह सुनिश्चित करने के लिए कर सकते हैं कि आप अपने कोड को अधिक बनाए रखने योग्य और स्केलेबल तरीके से तैयार करें।
कंटेनर घटक क्या हैं?
कंटेनर घटक, जिन्हें स्मार्ट घटक भी कहा जाता है, आपके ऐप में डेटा और तर्क के प्रबंधन के लिए ज़िम्मेदार हैं। वे एपीआई से डेटा लाने, स्थिति को अपडेट करने और उपयोगकर्ता इंटरैक्शन को प्रोसेस करने जैसे कार्यों को संभालते हैं।
इस संरचना को लागू करने के लिए, आप उपयोग कर सकते हैं एक पुस्तकालय जैसे React-Redux अपने घटकों को स्टोर से जोड़ने के लिए और डेटा और क्रियाओं को अपने बाल घटकों या प्रस्तुतिकरण घटकों तक पहुँचाने के लिए।
प्रस्तुतिकरण घटक क्या हैं?
प्रस्तुतिकरण घटक अपने मूल घटकों से डेटा प्रदर्शित करने के लिए जिम्मेदार होते हैं। वे अक्सर स्टेटलेस होते हैं और यूआई और डेटा के दृश्य प्रतिनिधित्व पर ध्यान केंद्रित करते हैं।
यह स्थिति उन्हें हेरफेर करने और परीक्षण करने में आसान बनाती है, जिससे उन्हें गूंगे घटकों का नाम मिलता है। प्रेजेंटेशनल घटकों की गूंगा स्थिति आपके लिए अपने पूरे आवेदन में उनका पुन: उपयोग करना संभव बनाती है। यह घटिया और दोहराव वाले कोड से बचा जाता है।
कंटेनर और प्रस्तुतिकरण घटकों का उपयोग क्यों करें?
इस प्रश्न का संक्षिप्त और सरल उत्तर है: सरोकारों का पृथक्करण। यह वस्तु-उन्मुख, कार्यात्मक और पहलू-उन्मुख प्रोग्रामिंग सहित कई प्रतिमानों में एक प्रमुख सिद्धांत है। हालाँकि, कई रिएक्ट डेवलपर्स इन अवधारणाओं को अनदेखा करते हैं और कोड लिखने का विकल्प चुनते हैं जो बस काम करता है।
कोड जो अभी काम करता है वह बहुत अच्छा है, जब तक कि वह काम करना बंद न कर दे। खराब संगठित कोड को बनाए रखना और अद्यतन करना कठिन होता है। यह नई सुविधाओं को जोड़ने या परियोजना पर काम करने के लिए अन्य प्रोग्रामर लाने में मुश्किल बना सकता है। एक बार पहले से ही इन मुद्दों को ठीक करना एक वर्कलोड है, और उन्हें शुरुआत से ही रोका जा सकता है।
कंटेनर और प्रेजेंटेशनल कंपोनेंट्स डिज़ाइन पैटर्न को लागू करना सुनिश्चित करता है कि आपके प्रोजेक्ट के प्रत्येक कंपोनेंट का एक स्पष्ट कार्य है जिसे वह हैंडल करता है। यह एक मॉड्यूलर संरचना प्राप्त करता है जहां प्रत्येक अनुकूलित घटक आपके ऐप को पूरा करने के लिए एक साथ आता है।
आपके घटक अभी भी ओवरलैप हो सकते हैं; एक कंटेनर और प्रस्तुतिकरण घटक के बीच कर्तव्यों का विभाजन हमेशा अलग नहीं होता है। हालाँकि, एक सामान्य नियम के रूप में, आपको अपने प्रस्तुतिकरण घटकों को विज़ुअल डेटा पर, और अपने कंटेनर घटकों को डेटा और लॉजिक पर केंद्रित करना चाहिए।
रिएक्टिव नेटिव में कंटेनर और प्रेजेंटेशनल कंपोनेंट्स का उपयोग कैसे करें
एक विशिष्ट रिएक्टिव नेटिव ऐप में, ऐसे घटक बनाना आम है जिनमें प्रस्तुतिकरण और तर्क-संबंधी कोड दोनों होते हैं। आप एक एपीआई से डेटा प्राप्त कर सकते हैं, एक फॉर्म की स्थिति का प्रबंधन कर सकते हैं, और सभी को एक वर्ग में आउटपुट प्रदर्शित कर सकते हैं। एक साधारण ऐप पर विचार करें जो करेगा एपीआई से उपयोगकर्ताओं की सूची प्राप्त करें और उनके नाम और आयु प्रदर्शित करें।
आप इसे एक घटक के साथ कर सकते हैं, लेकिन इसके परिणामस्वरूप कोड पढ़ना मुश्किल होगा, पुन: प्रयोज्य नहीं होगा, और परीक्षण और रखरखाव के लिए कठिन होगा।
उदाहरण के लिए:
आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया';
आयात {देखें, टेक्स्ट, फ्लैटलिस्ट} से'प्रतिक्रिया-मूल';कॉन्स्ट उपयोगकर्ता सूची = () => {
कॉन्स्ट [उपयोगकर्ता, सेटयूजर्स] = यूज़स्टेट ([]);उपयोग प्रभाव (() => {
कॉन्स्ट फ़ेच यूज़र्स = async () => {
कॉन्स्ट प्रतिक्रिया = इंतजार लाना(' https://example.com/users');
कॉन्स्ट डेटा = इंतजार प्रतिक्रिया.जेसन ();
सेटयूजर्स (डेटा);
};फ़ेच यूज़र्स ();
}, []);वापस करना (
डेटा = {उपयोगकर्ता}
keyExtractor={आइटम => item.id}
रेंडरआइटम={({आइटम}) => (नाम: {आइटम.नाम</Text> उम्र: {item.age}</Text>
</View>
)}
/>
);
};
निर्यातगलती करना उपयोगकर्ता सूची;
इस उदाहरण में, उपयोगकर्ता सूची एक इनपुट क्षेत्र की स्थिति के प्रबंधन, एक एपीआई से डेटा लाने और डेटा को प्रस्तुत करने के लिए जिम्मेदार है।
इसे लागू करने का बेहतर और अधिक कुशल तरीका उपयोगकर्ता सूची में प्रस्तुतिकरण और कंटेनर घटकों में तर्क को अलग करना है।
आप एक बना सकते हैं UserListContainer घटक जो उपयोगकर्ता डेटा लाने और प्रबंधित करने के लिए ज़िम्मेदार है। यह तब इस डेटा को प्रेजेंटेशनल कंपोनेंट में पास कर सकता है, उपयोगकर्ता सूची, एक सहारा के रूप में।
आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया';// कंटेनर घटक
कॉन्स्ट उपयोगकर्ता सूची कंटेनर = () => {
कॉन्स्ट [उपयोगकर्ता, सेटयूजर्स] = यूज़स्टेट ([]);उपयोग प्रभाव (() => {
कॉन्स्ट फ़ेच यूज़र्स = async () => {
कॉन्स्ट प्रतिक्रिया = इंतजार लाना(' https://example.com/users');
कॉन्स्ट डेटा = इंतजार प्रतिक्रिया.जेसन ();
सेटयूजर्स (डेटा);
};फ़ेच यूज़र्स ();
}, []);वापस करना<उपयोगकर्ता सूचीउपयोगकर्ताओं={उपयोगकर्ता} />;
};
निर्यातगलती करना UserListContainer;
आप प्रस्तुतिकरण को दो प्रस्तुतिकरण घटकों के बीच अलग कर सकते हैं: उपयोगकर्ता और उपयोगकर्ता सूची. प्रत्येक प्राप्त इनपुट प्रॉप्स के आधार पर केवल मार्कअप उत्पन्न करने के लिए जिम्मेदार है।
आयात {देखें, टेक्स्ट, फ्लैटलिस्ट} से'प्रतिक्रिया-मूल';// प्रस्तुतिकरण घटक
कॉन्स्ट उपयोगकर्ता = ({ नाम उम्र }) => (नाम: {नाम</Text> आयु: {उम्र</Text>
</View>
);
// प्रस्तुतिकरण घटक
कॉन्स्ट उपयोगकर्ता सूची = ({उपयोगकर्ता}) => (
डेटा = {उपयोगकर्ता}
keyExtractor={आइटम => item.id}
रेंडरइटम = {({आइटम}) => <उपयोगकर्तानाम={आइटम नाम}आयु={आइटम.उम्र} />}
/>
);
नया कोड मूल घटक को दो प्रस्तुतिकरण घटकों में अलग करता है, उपयोगकर्ता और उपयोगकर्ता सूची, और एक कंटेनर घटक, UserListContainer.
कंटेनर और प्रेजेंटेशनल घटकों को लागू करने के लिए सर्वोत्तम अभ्यास
जब आप कंटेनर और प्रस्तुतिकरण घटकों का उपयोग करते हैं, तो यह सुनिश्चित करने के लिए कुछ सर्वोत्तम अभ्यासों का पालन करना महत्वपूर्ण है कि घटक अपेक्षित रूप से काम करते हैं।
- प्रत्येक घटक की एक स्पष्ट और विशिष्ट भूमिका होनी चाहिए। कंटेनर घटक को राज्य का प्रबंधन करना चाहिए और प्रस्तुतिकरण घटक को दृश्य प्रस्तुति को संभालना चाहिए।
- जहाँ संभव हो, वर्ग घटकों के बजाय कार्यात्मक घटकों का उपयोग करें। वे सरल, परीक्षण करने में आसान और बेहतर प्रदर्शन प्रदान करते हैं।
- किसी ऐसे घटक में तर्क या कार्यक्षमता शामिल करने से बचें जो इसके उद्देश्य के लिए अप्रासंगिक है। यह घटकों को केंद्रित रखने और बनाए रखने और परीक्षण करने में आसान बनाने में मदद करता है।
- घटकों के बीच संचार के लिए प्रॉप्स का उपयोग करें, चिंताओं को स्पष्ट रूप से अलग करें और कसकर युग्मित घटकों से बचें।
- राज्य के लिए अनावश्यक अद्यतन प्रदर्शन के मुद्दों को जन्म दे सकते हैं, इसलिए आवश्यक होने पर ही स्थिति को अद्यतन करना महत्वपूर्ण है।
इन सर्वोत्तम अभ्यासों का पालन करना सुनिश्चित करता है कि आपका कंटेनर और प्रस्तुतिकरण घटक प्रभावी ढंग से एक साथ काम करते हैं अपने रिएक्टिव नेटिव ऐप में राज्य और दृश्य प्रस्तुति के प्रबंधन के लिए एक स्वच्छ, संगठित और स्केलेबल समाधान प्रदान करें।
कंटेनर और प्रेजेंटेशनल घटकों का उपयोग करने के लाभ
कंटेनर और प्रस्तुतिकरण घटक कई लाभ प्रदान कर सकते हैं। वे आपकी कोड संरचना, रखरखाव और मापनीयता को बेहतर बनाने में मदद कर सकते हैं। वे टीमों के बीच बेहतर सहयोग और कार्यों के प्रतिनिधिमंडल का भी परिणाम देते हैं। वे आपके रिएक्टिव नेटिव ऐप के प्रदर्शन और अनुकूलन को भी बढ़ा सकते हैं।
इन घटकों को लागू करने के लिए सर्वोत्तम प्रथाओं का पालन करें, और आप बेहतर और अधिक स्केलेबल रिएक्टिव नेटिव ऐप बना सकते हैं।