परिचय

रिएक्ट की दुनिया में जो कुछ बहुत उपयोगी और व्यापक है, वह इसके डिज़ाइन पैटर्न हैं, क्योंकि वे कोड को स्केलेबल रखने में मदद करते हैं और हमारे द्वारा बनाए गए घटकों में अर्थ जोड़ते हैं।

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

यौगिक घटक क्या है?

कंपाउंड कंपोनेंट्स रिएक्ट में एक उन्नत पैटर्न है। इसका उद्देश्य अधिक लचीला डिज़ाइन बनाना है, जो घटकों के समूह के बीच स्थिति और तर्क को साझा करने की अनुमति देता है, जहां मूल घटक और बाल घटकों के बीच संचार लचीले तरीके से किया जाना चाहिए।

घटकों को शर्मनाक प्रोप ट्री या तर्क पैदा किए बिना कुछ व्यवहार करने के लिए मिलकर काम करना चाहिए जो भविष्य में दोबारा समझने या समझने के लिए बहुत जटिल है।

यह पैटर्न हमें प्रोप फ्लेमिंग को खत्म करने में मदद करता है, जहां हमें घटकों के बीच एक प्रोप ट्री को पास करना होता है। यह प्रोप इंजेक्शन एक समस्या है क्योंकि यह अद्यतन किए गए प्रत्येक राज्य के साथ कई अनावश्यक पुन: प्रस्तुतीकरण का कारण बन सकता है, क्योंकि प्रत्येक राज्य सभी चाइल्ड घटकों को अद्यतन करेगा।

हमारे पास HTML में चयन और विकल्प टैग की संरचना में यौगिक घटकों का एक उदाहरण है:

चयन एक इंटरफ़ेस स्टेट मैनेजर के रूप में काम करता है, जबकि विकल्प कॉन्फ़िगर किए जाते हैं कि चयन कैसे काम करना चाहिए।

यौगिक घटकों का उपयोग करने वाला उदाहरण

इस उदाहरण में, हम एक मॉडल बनाएंगे, जो दो समग्र घटकों में विभाजित है: टॉगल और सामग्री। जहां वे अपने बीच मोडल को खोलने और बंद करने की स्थिति साझा करेंगे।

आइए देखें कि इस घटक को चरण दर चरण बनाना कैसा होगा:

हम मोडल को खोलने और बंद करने की स्थिति के प्रबंधन के लिए जिम्मेदार संदर्भ बनाकर शुरुआत कर सकते हैं

मॉडल घटक का आधार बनाना

ध्यान दें कि हम मॉडल में डाले जाने वाले घटकों को प्राप्त करने के लिए बच्चों का उपयोग कर रहे हैं, हम इसे इस तरह उपयोग करना चाहेंगे:

अब हमें टॉगल घटक बनाने की आवश्यकता है, जो मॉडल को खोलने के लिए जिम्मेदार होगा

हमें उस सामग्री घटक की भी आवश्यकता है जो मॉडल की सामग्री को प्रदर्शित करने के लिए जिम्मेदार होगा

आखिरकार, हम अपने मॉडल घटक दोनों को असाइन कर सकते हैं और बस इतना ही (:

उपयोग

परिणाम

इस तरह, हम मॉडलों के निर्माण और उपयोग को बेहद लचीला और पुन: प्रयोज्य बनाते हैं। Modal.Toggle मोडल डिस्प्ले को सक्रिय करने के लिए जिम्मेदार है, जबकि Modal.Content को हमारे मोडल की सामग्री प्रदर्शित करनी चाहिए।

यह ढांचा डेवलपर्स को उनके अनुप्रयोगों की विशिष्ट आवश्यकताओं के अनुसार मॉडल के व्यवहार और सामग्री को आसानी से अनुकूलित करने की अनुमति देता है, जिससे कोड साफ और अधिक व्यवस्थित हो जाता है।

अन्य उदाहरण

हम अन्य संदर्भों में भी यौगिक घटकों का उपयोग कर सकते हैं, उदाहरण के लिए:

अकॉर्डियन घटक:

मेनू घटक:

सभी लचीले और अनुकूलनीय हैं, जो घटक के विकास, मापनीयता और उपयोग को सुविधाजनक बनाते हैं।

निष्कर्ष

हमने देखा कि कंपाउंड कंपोनेंट पैटर्न में कंपोनेंट लिखना हमारे अनुप्रयोगों में कैसे उपयोगी हो सकता है, हमने यह भी देखा कि इसका उपयोग कैसे किया जाए और कुछ उदाहरण जहां यह पैटर्न फिट हो सकता है।

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

नोट: मैंने इसी सामग्री को रिएक्ट4नोब्स पर पोस्ट किया है, जो रिएक्ट ब्रह्मांड में डेवलपर्स द्वारा बनाए गए लेखों को समूहीकृत करने के लिए डिज़ाइन किया गया एक भंडार है। यह जांचने लायक है =).