रिएक्ट जावास्क्रिप्ट के लिए सबसे लोकप्रिय फ्रंट-एंड फ्रेमवर्क में से एक है। एंगुलर जैसे अन्य ढांचे के विपरीत, यह बहुत अव्यवस्थित है। इसलिए, यह आपको तय करना है कि आप अपने रिएक्ट कोड को कैसे लिखना या उसकी संरचना करना चाहते हैं।
यह लेख कुछ अभ्यासों की पड़ताल करता है जिनका पालन आपको अपने रिएक्ट एप्लिकेशन के प्रदर्शन को बेहतर बनाने के लिए करना चाहिए।
1. कक्षाओं के बजाय कार्यात्मक घटकों और हुक का उपयोग करना
रिएक्ट में, आप हुक के साथ कक्षाओं या कार्यात्मक घटकों का उपयोग कर सकते हैं। हालाँकि, आपको कार्यात्मक घटकों और हुक का अधिक बार उपयोग करना चाहिए क्योंकि वे कक्षाओं की तुलना में अधिक संक्षिप्त और पठनीय कोड में परिणत होते हैं।
भले ही कोड का उपरोक्त ब्लॉक एक वर्ग घटक के समान काम करता है, यह कम जटिल, न्यूनतम और समझने में आसान है जो एक बेहतर डेवलपर अनुभव में योगदान देता है।
2. राज्य का उपयोग करने से बचें (यदि संभव हो तो)
रिएक्ट स्टेट डेटा का ट्रैक रखता है कि जब बदला जाता है तो रिएक्ट घटकों को फिर से प्रस्तुत करने के लिए ट्रिगर करता है। रिएक्ट एप्लिकेशन बनाते समय, जितना संभव हो सके राज्य का उपयोग करने से बचें, क्योंकि आप जितना अधिक राज्य का उपयोग करेंगे, उतना ही अधिक डेटा आपको अपने ऐप में रखना होगा।
राज्य के उपयोग को कम करने का एक तरीका यह है कि आवश्यकता पड़ने पर ही इसे घोषित किया जाए। उदाहरण के लिए, यदि आप किसी एपीआई से उपयोगकर्ता डेटा प्राप्त कर रहे हैं, तो अलग-अलग गुणों को संग्रहीत करने के बजाय संपूर्ण उपयोगकर्ता ऑब्जेक्ट को राज्य में संग्रहीत करें।
3. एक ही घटक से संबंधित फाइलों को एक ही फ़ोल्डर में व्यवस्थित करें
एक परियोजना संरचना पर निर्णय लेते समय, एक घटक-केंद्रित के लिए जाएं। इसका मतलब है कि एक फोल्डर में एक कंपोनेंट से संबंधित सभी फाइलें होना।
यदि आप एक नेवबार घटक बना रहे थे, तो नेवबार नामक एक फ़ोल्डर बनाएं जिसमें स्वयं नेवबार घटक, शैली पत्रक, और घटक में प्रयुक्त अन्य जावास्क्रिप्ट और गुण फ़ाइलें हों।
घटक की सभी फ़ाइलों वाला एक एकल फ़ोल्डर पुन: उपयोग, साझा करना और डीबग करना आसान बनाता है। यदि आपको यह देखने की आवश्यकता है कि कोई घटक कैसे काम करता है, तो आपको केवल एक फ़ोल्डर खोलने की आवश्यकता है।
4. इंडेक्स को मुख्य प्रॉप्स के रूप में इस्तेमाल करने से बचें
रिएक्ट एक सरणी में वस्तुओं की विशिष्ट पहचान करने के लिए कुंजियों का उपयोग करता है। चाबियों के साथ, रिएक्ट इंगित कर सकता है कि कौन सा आइटम बदल दिया गया है, जोड़ा गया है या सरणी से हटा दिया गया है।
वर्तमान में, पहली सूची आइटम, “आइटम 1” इंडेक्स शून्य पर है, लेकिन यदि आपने सूची की शुरुआत में कोई अन्य आइटम जोड़ा है, तो “आइटम 1” इंडेक्स 1 में बदल जाएगा जो आपके सरणी के व्यवहार को बदल देता है।
समाधान यह सुनिश्चित करने के लिए कि सूची आइटम की पहचान बनी हुई है, एक इंडेक्स के रूप में एक अद्वितीय मूल्य का उपयोग करना है।
5. जहां संभव हो, Divs . के बजाय टुकड़े चुनें
प्रतिक्रिया घटकों को एक टैग में लिपटे कोड को वापस करने की आवश्यकता होती है, आमतौर पर <div> या प्रतिक्रिया अनुभाग में। जहां संभव हो, आपको टुकड़ों का चयन करना चाहिए।
<div> का उपयोग करने से DOM का आकार बढ़ जाता है, विशेष रूप से बड़ी परियोजनाओं में क्योंकि आपके पास जितने अधिक टैग या DOM नोड होंगे, आपकी वेबसाइट को उतनी ही अधिक मेमोरी की आवश्यकता होगी और ब्राउज़र को आपकी वेबसाइट को लोड करने के लिए उतनी ही अधिक मेमोरी की आवश्यकता होगी। यह जितनी अधिक शक्ति का उपयोग करेगा। इसके परिणामस्वरूप कम पृष्ठ गति और संभावित रूप से खराब उपयोगकर्ता अनुभव होता है।
अनावश्यक <div> टैग को हटाने का एक उदाहरण किसी एक तत्व को वापस करते समय उनका उपयोग नहीं करना है।
6. नामकरण सम्मेलनों का पालन करें
घटकों को अन्य गैर-घटक JSX फ़ाइलों से अलग करने के लिए नामकरण करते समय आपको हमेशा पास्कलकेस का उपयोग करना चाहिए। उदाहरण के लिए: टेक्स्टफिल्ड, नवमेनू, और सक्सेसबटन।
रिएक्ट घटकों जैसे हैंडलइनपुट () या शोइलेमेंट () के अंदर घोषित कार्यों के लिए कैमलकेस का उपयोग करें।
7. डुप्लीकेट कोड से बचें
यदि आप देखते हैं कि आप डुप्लीकेट कोड लिख रहे हैं, तो इसे उन घटकों में परिवर्तित करें जिनका पुन: उपयोग किया जा सकता है।
उदाहरण के लिए, अपने नेविगेशन मेनू के लिए एक घटक बनाने के लिए यह अधिक समझ में आता है कि प्रत्येक घटक में बार-बार कोड लिखने के लिए एक मेनू की आवश्यकता होती है।
यह एक घटक-आधारित वास्तुकला का लाभ है। आप अपनी परियोजना को छोटे घटकों में तोड़ सकते हैं जिन्हें आप अपने आवेदन में पुन: उपयोग कर सकते हैं।
8. प्रॉप्स के लिए ऑब्जेक्ट डिस्ट्रक्टिंग का उपयोग करें
प्रॉप्स ऑब्जेक्ट को पास करने के बजाय, प्रोप नाम को पास करने के लिए ऑब्जेक्ट डिस्ट्रक्टिंग का उपयोग करें। यह हर बार जब आपको इसका उपयोग करने की आवश्यकता होती है, तो प्रॉप्स ऑब्जेक्ट को संदर्भित करने की आवश्यकता को त्याग देता है।
उदाहरण के लिए, निम्नलिखित एक घटक है जो प्रॉप्स का उपयोग करता है।
9. मानचित्र का उपयोग करके गतिशील रूप से ऐरे को प्रस्तुत करना
बार-बार HTML ब्लॉकों को गतिशील रूप से प्रस्तुत करने के लिए मानचित्र () का उपयोग करें। उदाहरण के लिए, आप <li> टैग में मदों की सूची प्रस्तुत करने के लिए मानचित्र () का उपयोग कर सकते हैं।
10. प्रत्येक प्रतिक्रिया घटक के लिए परीक्षण लिखें
आपके द्वारा बनाए गए घटकों के लिए परीक्षण लिखें क्योंकि यह त्रुटियों की संभावना को कम करता है। परीक्षण सुनिश्चित करता है कि घटक आपकी अपेक्षा के अनुरूप व्यवहार कर रहे हैं। रिएक्ट के लिए सबसे आम परीक्षण ढांचे में से एक जेस्ट है, और यह एक ऐसा वातावरण प्रदान करता है जहां आप अपने परीक्षण निष्पादित कर सकते हैं।