रिएक्ट जावास्क्रिप्ट के लिए सबसे लोकप्रिय फ्रंट-एंड फ्रेमवर्क में से एक है। एंगुलर जैसे अन्य ढांचे के विपरीत, यह बहुत ही निर्विवाद है। इसलिए, यह आपको तय करना है कि आप अपने रिएक्ट कोड को कैसे लिखना या उसकी संरचना करना चाहते हैं।

यह लेख आपके रिएक्ट एप्लिकेशन के प्रदर्शन को बेहतर बनाने के लिए आपको जिन कुछ प्रथाओं का पालन करना चाहिए, उनकी पड़ताल करता है।

1. कक्षाओं के बजाय कार्यात्मक घटकों और हुक का उपयोग करना

प्रतिक्रिया में, आप कर सकते हैं हुक के साथ वर्ग या कार्यात्मक घटकों का उपयोग करें. हालाँकि, आपको कार्यात्मक घटकों और हुक का अधिक बार उपयोग करना चाहिए क्योंकि वे कक्षाओं की तुलना में अधिक संक्षिप्त और पठनीय कोड में परिणत होते हैं।

निम्नलिखित वर्ग घटक पर विचार करें जो नासा एपीआई से डेटा प्रदर्शित करता है।

कक्षा नासाडाटा प्रतिक्रिया बढ़ाता है। अवयव {
 कंस्ट्रक्टर (प्रॉप्स) {
 सुपर (प्रॉप्स);
 यह राज्य = {
 आंकड़े: [],
 };
 }
 कंपोनेंटडिडमाउंट () {
 लाना(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json ())
 तब ((जेसन) => {
 यह.सेटस्टेट({
 डेटा: जेसन,
 });
 });
 }
 प्रस्तुत करना() {





instagram viewer


 कॉन्स्ट {डेटा} = यह। राज्य;
 अगर (! डेटा। लंबाई)
 वापसी (


 डेटा लाया जा रहा है... 
{" "}



 );
 वापसी (
 <>
 कक्षा घटक का उपयोग करके डेटा प्राप्त करें 
{" "}
 {डेटा.मैप ((आइटम) => (
{मद शीर्षक}

 ))}
 );
 }
}

उसी घटक को हुक का उपयोग करके लिखा जा सकता है।

कास्ट नासाडेटा = () => {
 कॉन्स्ट [डेटा, सेटडेटा] = यूज़स्टेट (अशक्त);
 उपयोग प्रभाव (() => {
 लाना(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json ())
 तब ((जेसन) => {
 सेटडाटा (जेसन);
 });
 }, [आंकड़े]);
 वापसी (
 <>
 कक्षा घटक का उपयोग करके डेटा प्राप्त करें 
{" "}
 {डेटा.मैप ((आइटम) => (
{मद शीर्षक}

 ))}
 );
};

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

2. राज्य का उपयोग करने से बचें (यदि संभव हो तो)

रिएक्ट स्टेट उस डेटा का ट्रैक रखता है जिसे बदलने पर रिएक्ट कंपोनेंट को फिर से रेंडर करने के लिए ट्रिगर करता है। रिएक्ट एप्लिकेशन बनाते समय, जितना संभव हो सके राज्य का उपयोग करने से बचें, क्योंकि जितना अधिक राज्य आप उपयोग करते हैं, उतना ही अधिक डेटा आपको अपने पूरे ऐप पर नज़र रखना होगा।

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

ऐसा करने के बजाय:

कॉन्स्ट [उपयोगकर्ता नाम, सेटयूज़रनेम] = यूज़स्टेट ('')
कॉन्स्ट [पासवर्ड, सेटपासवर्ड] = यूज़स्टेट ('')

यह करो:

कास्ट [उपयोगकर्ता, सेटयूसर] = यूज़स्टेट ({})

एक परियोजना संरचना पर निर्णय लेते समय, एक घटक-केंद्रित एक के लिए जाओ. इसका मतलब है कि एक फ़ोल्डर में एक घटक से संबंधित सभी फाइलें होना।

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

किसी घटक की सभी फ़ाइलों वाला एक एकल फ़ोल्डर पुन: उपयोग, साझा करना और डीबग करना आसान बनाता है। यदि आपको यह देखने की आवश्यकता है कि कोई घटक कैसे काम करता है, तो आपको केवल एक एकल फ़ोल्डर खोलने की आवश्यकता है।

4. इंडेक्स को मुख्य प्रॉप्स के रूप में इस्तेमाल करने से बचें

रिएक्ट एक सरणी में वस्तुओं की विशिष्ट पहचान करने के लिए कुंजियों का उपयोग करता है। चाबियों के साथ, रिएक्ट यह इंगित कर सकता है कि कौन सा आइटम बदल दिया गया है, जोड़ा गया है या सरणी से हटा दिया गया है।

अधिकांश समय जब सरणियों को प्रस्तुत करते हैं, तो आप सूचकांक को कुंजी के रूप में उपयोग कर सकते हैं।

कॉन्स्ट आइटम = () => {
 const arr = ["आइटम1", "आइटम2", "आइटम3", "आइटम4", "आइटम5"];
 वापसी (
 <>
 {गिरफ्तारी नक्शा ((तत्व, अनुक्रमणिका) => {
{तत्व}
;
 })}
 );
};

हालांकि यह कभी-कभी काम करता है, एक कुंजी के रूप में सूचकांक का उपयोग करने से समस्याएँ आ सकती हैं, खासकर अगर सूची में बदलाव की उम्मीद है। इस सूची पर विचार करें।

const arr = ["आइटम1", "आइटम2", "आइटम3", "आइटम4", "आइटम5"];

वर्तमान में, पहली सूची आइटम, "वस्तु 1“सूचकांक शून्य पर है, लेकिन यदि आपने सूची के आरंभ में कोई अन्य आइटम जोड़ा है, तो “वस्तु 1"सूचकांक 1 में बदल जाएगा जो आपके सरणी के व्यवहार को बदल देता है।

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

5. जहां संभव हो, डिव के बजाय फ्रैगमेंट का विकल्प चुनें

प्रतिक्रिया घटकों को आमतौर पर एक टैग में लिपटे कोड को वापस करने की आवश्यकता होती है a या एक प्रतिक्रिया टुकड़ा। जहां संभव हो, आपको टुकड़ों का चयन करना चाहिए।

का उपयोग करते हुए DOM आकार को बढ़ाता है, विशेष रूप से बड़े प्रोजेक्ट्स में क्योंकि आपके पास जितने अधिक टैग या DOM नोड होंगे, आपकी वेबसाइट को उतनी ही अधिक मेमोरी की आवश्यकता होगी और ब्राउज़र आपकी वेबसाइट को लोड करने के लिए उतनी ही अधिक शक्ति का उपयोग करेगा। इससे पृष्ठ की गति कम होती है और संभावित रूप से खराब उपयोगकर्ता अनुभव होता है।

अनावश्यक को दूर करने का एक उदाहरण टैग किसी एक तत्व को वापस करते समय उनका उपयोग नहीं कर रहे हैं।

कास्ट बटन = () => {
 वापसी प्रदर्शन;
};

6. नामकरण सम्मेलनों का पालन करें

घटकों को अन्य गैर-घटक JSX फ़ाइलों से अलग करने के लिए नामकरण करते समय आपको हमेशा पास्कलकेस का उपयोग करना चाहिए। उदाहरण के लिए: पाठ का क्षेत्र, नवमेनू, तथा सक्सेसबटन.

जैसे रिएक्ट घटकों के अंदर घोषित कार्यों के लिए कैमलकेस का उपयोग करें हैंडल इनपुट () या शो एलिमेंट ().

7. दोहराव कोड से बचें

यदि आप देखते हैं कि आप डुप्लीकेट कोड लिख रहे हैं, तो इसे उन घटकों में परिवर्तित करें जिनका पुन: उपयोग किया जा सकता है।

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

यह एक घटक-आधारित वास्तुकला का लाभ है। आप अपनी परियोजना को छोटे घटकों में तोड़ सकते हैं जिन्हें आप अपने आवेदन में पुन: उपयोग कर सकते हैं।

8. प्रॉप्स के लिए ऑब्जेक्ट डिस्ट्रक्टिंग का उपयोग करें

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

उदाहरण के लिए, निम्नलिखित एक घटक है जो प्रोप का उपयोग करता है जैसा है।

कास्ट बटन = (प्रॉप्स) => {
 वापसी {प्रॉप्स.टेक्स्ट};
};

ऑब्जेक्ट डिस्ट्रक्टिंग के साथ, आप सीधे टेक्स्ट को संदर्भित करते हैं।

कॉन्स्ट बटन = ({पाठ}) => {
 वापसी {मूलपाठ};
};

9. मानचित्र का उपयोग करके गतिशील रूप से सरणी प्रस्तुत करें

उपयोग नक्शा() बार-बार HTML ब्लॉकों को गतिशील रूप से प्रस्तुत करने के लिए। उदाहरण के लिए, आप उपयोग कर सकते हैं नक्शा() में वस्तुओं की एक सूची प्रस्तुत करने के लिए टैग।

कॉन्स्ट आइटम = () => {
 const arr = ["आइटम1", "आइटम2", "आइटम3", "आइटम4", "आइटम5"];
 वापसी (
 <>
 {गिरफ्तारी नक्शा ((तत्व, अनुक्रमणिका) => {
{तत्व}
;
 })}
 );
 };

तुलना के उद्देश्यों के लिए, यहां बताया गया है कि आप बिना सूची को कैसे प्रस्तुत कर सकते हैं नक्शा(). यह दृष्टिकोण बहुत दोहराव वाला है।

कॉन्स्ट लिस्ट = () => {
 वापसी (


वस्तु 1

आइटम 2

आइटम3

मद 4

मद5




 );
};

10. प्रत्येक प्रतिक्रिया घटक के लिए परीक्षण लिखें

आपके द्वारा बनाए गए घटकों के लिए परीक्षण लिखें क्योंकि यह त्रुटियों की संभावनाओं को कम करता है। परीक्षण यह सुनिश्चित करता है कि घटक आपकी अपेक्षा के अनुरूप व्यवहार कर रहे हैं। रिएक्ट के लिए सबसे आम परीक्षण ढांचे में से एक जेस्ट है, और यह एक ऐसा वातावरण प्रदान करता है जहां आप अपने परीक्षण निष्पादित कर सकते हैं।

हालाँकि आप इसका उपयोग कैसे कर सकते हैं, इस मामले में रिएक्ट कुछ हद तक लचीला है, विशिष्ट प्रथाओं का पालन करने से आपको अपने अनुभव का अधिकतम लाभ उठाने में मदद मिलेगी।

इन युक्तियों का पालन करते समय, अपनी विशेष परियोजना और लक्ष्यों को ध्यान में रखें; कुछ मामलों में कुछ दूसरों की तुलना में अधिक प्रासंगिक होंगे।

फ़ेच और एक्सियोस का उपयोग करके प्रतिक्रिया में एपीआई का उपभोग कैसे करें

जानना चाहते हैं कि एपीआई का उपयोग कैसे करें? रिएक्ट में एपीआई का उपभोग करने का तरीका समझना एपीआई उपयोग का एक प्रमुख तत्व है।

आगे पढ़िए

लेखक के बारे में