हम पैटर्न का उपयोग करके Vue पर विकास को पंप करते हैं: HOC

HOC (हायर ऑर्डर कंपोनेंट) पैटर्न रिएक्ट डेवलपर्स के साथ बहुत लोकप्रिय है। लेकिन Vue-Developers किसी तरह इसे बायपास करते हैं। बहुत व्यर्थ। आइए इसे जानने की कोशिश करते हैं।

HOC क्या है?

एक उच्च-क्रम घटक (HOC) एक फ़ंक्शन है जो एक मौजूदा घटक लेता है और एक अन्य घटक देता है जो मूल तर्क को लपेटता है, नए तर्क जोड़ता है।

HOC बनाम मिश्रण

शायद बहुत से लोग आश्चर्य करेंगे कि अशुद्धियाँ होने पर HOC का उपयोग क्यों करें? वे घटकों में नई कार्यक्षमता भी जोड़ते हैं। एचओसी क्या अशुद्धियों को नहीं जान सकता है?

सबसे पहले, याद रखें कि Vue में कौन सी अशुद्धियाँ हैं (Vue के दस्तावेज़ से ली गई परिभाषा):

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

ऐसा लगता है कि अशुद्धियों और एचओसी का उद्देश्य समान है - वे आपको विभिन्न घटकों की कार्यक्षमता का विस्तार करने की अनुमति देते हैं। और बाहर (अंतिम घटक का उपयोग करके) यह समान दिख सकता है।

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

HOC डेकोरेटर डिज़ाइन पैटर्न की तरह एक सा है।

HOC निर्माण

तो ठीक है। आइए एक उदाहरण के साथ इस सब पर एक नज़र डालें।

तो, हमारे पास एक बटन घटक है:

कुछ समय बाद, हमें अचानक कुछ बटन (लेकिन सभी नहीं) को दबाने के लिए लॉग इन करने की आवश्यकता थी। हम बटन घटक में लॉगिंग के लिए कोड को मिलाकर अशुद्धियों के माध्यम से ऐसा कर सकते हैं, और फिर, सही जगह पर, कुछ घटक संपत्ति के माध्यम से लॉगिंग को सक्षम या अक्षम कर सकते हैं। लेकिन सहमत हूं, यह बहुत सुविधाजनक नहीं है? और अगर इस तरह की कार्यक्षमता बहुत है? एक गलती - और सभी बटन सही ढंग से काम करना बंद कर सकते हैं।

इस मामले में HOC एक बेहतरीन समाधान होगा। हम इसी HOC के साथ बटन को कुछ स्थानों पर लपेटते हैं।

व्यवहार में HOC को जानने का समय आ गया है।

चरण 1. एक एचओसी फ़ंक्शन बनाएं

हमें याद है कि एचओसी एक फ़ंक्शन है जो एक घटक को इनपुट के रूप में लेता है और दूसरा रिटर्न देता है। तो चलिए ऐसे फंक्शन बनाते है। चलो इसे लॉगरबटन के साथ कहते हैं।
यह नाम के साथ एचओसी कार्यों को शुरू करने के लिए प्रथागत है - यह एचओसी की पहचान का एक प्रकार है।

परिणाम एक फ़ंक्शन है जो एक इनपुट के रूप में एक बटन घटक लेता है, और फिर एक नया घटक देता है। रेंडर फ़ंक्शन में, हम मूल घटक का उपयोग करते हैं, लेकिन एक परिवर्तन के साथ - हम DOM नोड पर क्लिक करने के लिए एक घटना जोड़ते हैं, कंसोल में क्लिक किए गए शिलालेख का आउटपुट।

यदि आपको यह समझ में नहीं आ रहा है कि यहाँ क्या हो रहा है, क्या h और संदर्भ हैं, तो पहले vue प्रलेखन पढ़ें कि फंक्शन कैसे कार्य करते हैं।

वर्तमान उदाहरण में, मैंने कार्यात्मक घटक का उपयोग किया, क्योंकि मुझे किसी शर्त की जरूरत नहीं है। कोई भी आपको कार्यात्मक के बजाय एक नियमित घटक को वापस करने के लिए मना नहीं करता है, लेकिन यह मत भूलो कि कार्यात्मक घटक सामान्य लोगों की तुलना में बहुत तेज हैं।

चरण 2. एचओसी का उपयोग करना

अब, परिणामी फ़ंक्शन का उपयोग करके, हम बस एक नया घटक बनाते हैं।

केवल एक चीज बची है जो प्राप्त घटक को जोड़ने के लिए है जहां हमें क्लिक लॉगिंग की आवश्यकता है।

अंतिम उदाहरण:

रचना

यह सब निश्चित रूप से बहुत अच्छा है, लेकिन क्या होगा यदि आपको एक बटन की आवश्यकता है जो न केवल लॉग इन करता है, बल्कि कुछ अन्य कार्रवाई भी करता है?

सब कुछ सरल है। हम एक HOC को दूसरे में बदल रहे हैं। हम जितने चाहें उतने एचओसी मिला सकते हैं।

रचना के लिए भी बहुत सारे तैयार कार्य और पुस्तकालय हैं जो रचना की सुविधा प्रदान करते हैं।

HOC एक सरल लेकिन बहुत शक्तिशाली पैटर्न है। इसका उपयोग कई पुस्तकालयों के आधार पर किया जाता है। यह सिल्वर बुलेट या मिक्सिन्स और कंपोनेंट इनहेरिटेंस के तंत्र के लिए पूर्ण प्रतिस्थापन नहीं है। अन्य पैटर्न के साथ संयोजन में इसे बुद्धिमानी से उपयोग करें और आपके Vue एप्लिकेशन वास्तव में लचीले हो जाएंगे।

क्रॉस पोस्ट