आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

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

अपने रिएक्टिव नेटिव ऐप के प्रदर्शन को अनुकूलित करने के लिए इन युक्तियों और तकनीकों पर एक नज़र डालें।

1. मेमो हुक के साथ अनावश्यक री-रेंडर को कम करें

रिएक्टिव नेटिव एक वर्चुअल डोम (VDOM) तकनीक का उपयोग करके घटकों को प्रस्तुत करता है। VDOM ऐप घटक में सभी परिवर्तनों का ट्रैक रखता है और आवश्यक होने पर संपूर्ण दृश्य पदानुक्रम को फिर से प्रस्तुत करता है। यह प्रक्रिया महंगी है, इसलिए आपको कॉम्पोनेंट की स्थिति और प्रॉप्स के अनावश्यक अपडेट से बचना चाहिए।

रिएक्ट लाइब्रेरी प्रदान करती है मेमो और कॉलबैक का उपयोग करें कार्यात्मक घटकों में इस समस्या को हल करने के लिए हुक। आप useMemo हुक का उपयोग कर सकते हैं

instagram viewer
जावास्क्रिप्ट फ़ंक्शन के परिणामी मान को याद करें कि आप प्रत्येक रेंडर पर पुनर्गणना नहीं करना चाहते हैं।

आप कैसे उपयोग कर सकते हैं इसका एक उदाहरण यहां दिया गया है मेमो अंकुश:

आयात {उपयोगमेमो} से'प्रतिक्रिया';
समारोहMyComponent({ आंकड़े }) {
// ComputeExpensiveValue फ़ंक्शन एक महंगी संगणना है जो
// प्रत्येक रेंडर पर पुनः गणना करने की आवश्यकता नहीं है।
कॉन्स्ट महंगावैल्यू = मेमो का उपयोग करें (() => कंप्यूटएक्सपेंसिववैल्यू (डेटा), [डेटा]);
// घटक पुन: कंप्यूटिंग के बिना मेमोइज्ड मान का उपयोग कर सकता है 
// यह हर रेंडर पर।
वापस करना
{महंगामूल्य}</div>;
}

लपेटना ComputExpensiveValue के अंदर कार्य करें मेमो हुक फ़ंक्शन के परिणाम को याद करता है। मेमो हुक एक दूसरे तर्क को एक निर्भरता के रूप में स्वीकार कर सकता है। इसका मतलब यह है कि मेमोइज्ड फ़ंक्शन तभी लाभ प्राप्त करेगा जब यह निर्भरता बदल जाएगी।

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

2. प्रभावी राज्य डेटा हैंडलिंग

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

राज्य को प्रभावी ढंग से अपडेट करने का एक और तरीका अपरिवर्तनीय तकनीकों का उपयोग करना है, जैसे स्प्रेड ऑपरेटर या ऑब्जेक्ट.असाइन () तरीका।

उदाहरण के लिए:

आयात प्रतिक्रिया, {useState} से'प्रतिक्रिया';
समारोहMyComponent() {
कॉन्स्ट [राज्य, सेटस्टेट] = उपयोगस्टेट ({
 गिनती करना: 0,
 मूलपाठ: 'नमस्ते'
 });


समारोहहैंडलक्लिक करें() {
 सेटस्टेट (पिछलाराज्य => {
वापस करनावस्तुअसाइन करें ({}, पिछलास्टेट, {गिनती: prevState.count + 1 });
 });
 }
वापस करना (

इस उदाहरण में, हैंडलक्लिक करें समारोह का उपयोग करता है setState राज्य को अद्यतन करने के लिए हुक। फिर भी, राज्य वस्तु को सीधे संशोधित करने के बजाय, यह उपयोग करता है ऑब्जेक्ट.असाइन () एक नई वस्तु बनाने की विधि जो पिछली स्थिति को संशोधित गिनती संपत्ति के साथ कॉपी करती है। यह दृष्टिकोण रिएक्ट के वर्चुअल डोम को घटक को फिर से प्रस्तुत करने की अनुमति देता है जब यह पहचानता है कि आपने स्थिति को अपडेट कर दिया है।

आप रेडक्स और जैसे राज्य प्रबंधन पुस्तकालय का भी उपयोग कर सकते हैं अंतर्निहित संदर्भ API इस तकनीक को लागू करने के लिए।

3. एक प्रदर्शन निगरानी प्रणाली लागू करें

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

यहां उपलब्ध कई पीएमसी उपकरणों की सूची दी गई है।

  • रिएक्टिव नेटिव डीबगर: एक स्टैंडअलोन ऐप जो आपको अपने रिएक्टिव नेटिव ऐप की स्थिति को डिबग और निरीक्षण करने देता है। इसमें प्रदर्शन की समस्याओं की पहचान करने और उन्हें ठीक करने में आपकी मदद करने के लिए एक प्रदर्शन मॉनिटर भी शामिल है।
  • रिएक्टिव नेटिव प्रोफाइलर: यह अंतर्निहित प्रदर्शन निगरानी उपकरण आपको प्रत्येक घटक को प्रस्तुत करने में लगने वाले समय को मापकर अपने ऐप के प्रदर्शन को देखने की अनुमति देता है।
  • फ़्लिपर: प्रदर्शन मॉनिटर के साथ एक मोबाइल ऐप डेवलपमेंट प्लेटफ़ॉर्म जो आपको प्रदर्शन समस्याओं की पहचान करने और उन्हें ठीक करने में मदद कर सकता है।
  • फायरबेस परफॉर्मेंस मॉनिटरिंग: फायरबेस द्वारा प्रदान किया गया एक परफॉर्मेंस मॉनिटरिंग टूल जो आपको विभिन्न उपकरणों और प्लेटफॉर्म पर अपने ऐप के प्रदर्शन को ट्रैक करने की अनुमति देता है।

4. कंसोल.लॉग स्टेटमेंट निकालें

जब कोई कंसोल.लॉग स्टेटमेंट चलता है, तो यह जावास्क्रिप्ट इंजन को संदेश को कंसोल पर लॉग करने के लिए एक संदेश भेजता है। जेएस इंजन तब संदेश को संसाधित करने और प्रदर्शित करने में समय लेता है।

आपके कोड में बहुत अधिक कंसोल स्टेटमेंट इसके निष्पादन को धीमा कर देंगे और प्रदर्शन में देरी का कारण बनेंगे। यह विशेष रूप से समस्याग्रस्त हो सकता है जब आपका ऐप सीमित संसाधनों वाले डिवाइस पर चलता है, जैसे कम-अंत वाला मोबाइल डिवाइस।

5. एक कुशल नेविगेशन प्रणाली बनाएँ

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

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

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

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

6. कोड विभाजन और आलसी लोडिंग के साथ ऐप का आकार कम करें

अनुकूलित प्रदर्शन के लिए ऐप का आकार महत्वपूर्ण है क्योंकि यह उपयोगकर्ता के अनुभव के पहलुओं को प्रभावित कर सकता है, जैसे प्रारंभिक लोड समय, मेमोरी उपयोग और संग्रहण स्थान।

कोड विभाजन और आलसी लोडिंग ऐसी तकनीकें हैं जो आपके रिएक्टिव नेटिव ऐप के आकार को कम कर सकती हैं और प्रदर्शन में सुधार कर सकती हैं।

कोड विभाजन एक बड़े जावास्क्रिप्ट कोड बेस को छोटे, अधिक प्रबंधनीय "बंडलों" में तोड़ने की प्रक्रिया है। यह ऐप के शुरुआती लोड समय को काफी कम कर सकता है।

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

प्रदर्शन अनुकूलन क्यों महत्वपूर्ण है

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

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