डायनामिक डेटा लोडिंग के साथ कस्टम पेजिनेशन आपके ऐप के प्रदर्शन और समग्र उपयोगकर्ता अनुभव को बेहतर बना सकता है।
पेजिनेशन प्रदर्शन और उपयोगिता को बेहतर बनाने के लिए बड़ी मात्रा में डेटा को छोटे, अधिक प्रबंधनीय हिस्सों या पृष्ठों में विभाजित करने की प्रणाली को संदर्भित करता है। कस्टम पेजिनेशन, अगर ठीक से लागू किया जाए, तो बेहतर उपयोगकर्ता अनुभव प्रदान कर सकता है। रिएक्ट नेटिव में एक कस्टम पृष्ठांकन समाधान बनाना सीखें जो आपको डेटा को गतिशील रूप से लोड करने की अनुमति देता है।
कस्टम पेजिनेशन को समझना
कस्टम पेजिनेशन के साथ, डेवलपर्स एक पेजिनेशन मैकेनिज्म बना सकते हैं जो उनके एप्लिकेशन की विशिष्ट आवश्यकताओं के अनुरूप हो। कस्टम पेजिनेशन में पृष्ठों के बीच नेविगेट करने के लिए एक अद्वितीय यूजर इंटरफेस डिजाइन करना, एल्गोरिदम लागू करना शामिल हो सकता है डेटाबेस या एपीआई से डेटा प्राप्त करना, या अनंत स्क्रॉलिंग या आलसी लोडिंग जैसी सुविधाओं को शामिल करना।
कस्टम पृष्ठांकन के लाभ
अपने रिएक्टिव नेटिव मोबाइल ऐप्स के लिए एक कस्टम पेजिनेशन सिस्टम बनाने से कुछ फायदे मिल सकते हैं:
- यह आपके ऐप की मापनीयता में सुधार कर सकता है, जिससे यह बड़ी मात्रा में डेटा को अधिक कुशलता से संभाल सकता है। यह उन ऐप्स के लिए विशेष रूप से महत्वपूर्ण है जो बड़े डेटासेट से निपटते हैं।
- कस्टम पेजिनेशन डेटा को छोटे और अधिक प्रबंधनीय हिस्सों में विभाजित करके आपके ऐप के प्रदर्शन में सुधार कर सकता है। इससे लोडिंग टाइम कम होगा।
- कस्टम पेजिनेशन के साथ, आपके पास अपने ऐप के भीतर डेटा प्रस्तुत करने और एक्सेस करने में अधिक लचीलापन और नियंत्रण होगा।
कस्टम पेजिनेशन के साथ डायनेमिक लोडिंग को लागू करना
जब आपका रिएक्टिव नेटिव एप्लिकेशन केवल आवश्यक डेटा लोड करता है, जिसे उस समय लोड करने की आवश्यकता होती है, तो इसे डायनेमिक लोडिंग कहा जाता है। कस्टम पेजिनेशन के साथ डायनेमिक लोडिंग लागू करने के लिए, आप इन सामान्य चरणों का पालन कर सकते हैं:
- पेजिंग विधि निर्धारित करें: एक पेजिनेशन विधि तय करें जो आपकी सामग्री के लिए सबसे अच्छा काम करे। यह एक पारंपरिक हो सकता है पेज आधारित पेजिनेशन सिस्टम, जहां उपयोगकर्ता अगले पेज को लोड करने के लिए क्लिक करते हैं, या ए अनंत स्क्रॉल सिस्टम, जहां अधिक सामग्री लोड की जाती है क्योंकि उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करता है।
- सर्वर-साइड और क्लाइंट-साइड कोड लिखें: आप डेटा के विशिष्ट पेजों के पेजिनेशन अनुरोधों को संभालने के लिए सर्वर-साइड कोड लिखेंगे और केवल उस पेज के लिए डेटा लौटाएंगे। फिर आप उपयोगकर्ता क्रियाओं को सुनने के लिए क्लाइंट-साइड कोड लिखेंगे जो अधिक डेटा के अनुरोधों को ट्रिगर करते हैं, जैसे क्लिक करना और लोड करें बटन या पृष्ठ के नीचे स्क्रॉल करना।
- डेटा लोडिंग लागू करें: जब उपयोगकर्ता अधिक डेटा के लिए अनुरोध ट्रिगर करता है, तो ऐप को डेटा के अगले पृष्ठ के लिए सर्वर साइड को अनुरोध भेजना चाहिए। सर्वर साइड को केवल उस पेज के लिए डेटा वापस करना चाहिए, जिसका उपयोग ऐप पेज को अपडेट करने के लिए कर सकता है।
- पेज को अपडेट करें: अंत में, आप पेज को नए लोड किए गए डेटा के साथ अपडेट करेंगे। इसमें नए डेटा को आइटम की मौजूदा सूची में जोड़ना या पूरी सूची को नए डेटा से बदलना शामिल हो सकता है।
डेटा स्रोत की स्थापना
रिएक्टिव नेटिव में कस्टम पेजिनेशन को लागू करने का पहला कदम अपना डेटा स्रोत सेट करना है। इसमें आम तौर पर एक एपीआई या डेटाबेस से डेटा प्राप्त करना और इसे एक राज्य चर में संग्रहीत करना शामिल होता है। विचार करना एक साधारण REST API जो किताबों की सूची लौटाता है।
यहां एक उदाहरण दिया गया है कि एपीआई प्रतिक्रिया कैसी दिख सकती है:
{
"आंकड़े": [
{
"पहचान": 1,
"शीर्षक": "द कैचर इन द राय",
"लेखक": "जेडी सालिंगर"
},
{
"पहचान": 2,
"शीर्षक": "एक मॉकिंगबर्ड को मारने के लिए",
"लेखक": "हार्पर ली"
},
// ...
],
"पृष्ठ": 1,
"कुल पृष्ठ": 5
}
इस डेटा को हमारे रिएक्टिव नेटिव ऐप में लाने के लिए, हम इसका उपयोग कर सकते हैं लाना फ़ंक्शन, जो a लौटाता है वादा जो REST API की प्रतिक्रिया से हल होता है।
एक कस्टम पेजिनेशन फंक्शन बनाना
चलिए एक ऐसा फंक्शन बनाने के लिए आगे बढ़ते हैं जो एपीआई से डेटा प्राप्त करेगा और नए प्राप्त डेटा के साथ स्थिति को अपडेट करेगा। यह फ़ंक्शन तय करेगा कि रिएक्टिव नेटिव ऐप की स्क्रीन पर क्या प्रस्तुत करना है।
कुंआ इस फ़ंक्शन को एसिंक्स फ़ंक्शन के रूप में परिभाषित करें जो एक पृष्ठ पैरामीटर लेता है और एक वादा देता है जो प्राप्त किए गए डेटा के साथ हल होता है।
कॉन्स्ट PAGE_SIZE = 10;
कॉन्स्ट फ़ेचबुक्स = async (पेज) => {
कोशिश {
कॉन्स्ट प्रतिक्रिया = इंतजार लाना(` https://myapi.com/books? पेज =${पेज}और पृष्ठ आकार =${PAGE_SIZE}`);
कॉन्स्ट जसन = इंतजार प्रतिक्रिया.जेसन ();
वापस करना json.data;
} पकड़ना (गलती) {
सांत्वना देनात्रुटि (त्रुटि);
वापस करना [];
}
}
उपरोक्त कोड ब्लॉक में, फ़ेच बुक्स समारोह एक लेता है पृष्ठ पैरामीटर और एक वादा देता है जो उस पृष्ठ के डेटा के साथ हल हो जाता है। यहां ही पृष्ठ आकार स्थिरांक का उपयोग प्रति पृष्ठ प्राप्त पुस्तकों की संख्या को सीमित करने के लिए किया जाता है।
कस्टम पेजिनेशन फंक्शन की मदद से डायनेमिक लोडिंग को लागू करना
कस्टम पेजिनेशन फ़ंक्शन परिभाषित होने के साथ, अब आप इसका उपयोग ऐप में डायनेमिक लोडिंग को लागू करने के लिए कर सकते हैं। ऐसा करने के लिए, का उपयोग करें फ्लैटलिस्ट घटक, जो प्रतिक्रियाशील मूल में डेटा की बड़ी सूची प्रस्तुत करने के लिए एक उच्च-प्रदर्शन घटक है।
सबसे पहले, सेट अप करें फ्लैटलिस्ट कुछ प्रारंभिक अवस्था के साथ घटक:
आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया';
आयात {फ्लैटलिस्ट, व्यू, टेक्स्ट} से'प्रतिक्रिया-मूल';कॉन्स्ट ऐप = () => {
कॉन्स्ट [किताबें, सेटबुक्स] = यूज़स्टेट ([]);
कॉन्स्ट [वर्तमान पृष्ठ, सेट वर्तमान पृष्ठ] = उपयोगस्टेट (1);उपयोग प्रभाव (() => {
// डेटा का प्रारंभिक पृष्ठ प्राप्त करें
फ़ेचबुक (वर्तमान पृष्ठ)। तब (आंकड़े => सेटबुक (डेटा));
}, []);कॉन्स्ट रेंडरआइटम = ({ वस्तु }) => {
वापस करना (फ़ॉन्ट आकार: 18 }}>{item.title}</Text> फ़ॉन्ट आकार: 14 }}>{आइटम.लेखक</Text>
</View>
);
};वापस करना (
डेटा = {पुस्तकें}
रेंडरइटम = {रेंडरइटम}
keyExtractor = {आइटम => item.id.toString ()}
/>
);
}
निर्यातगलती करना अनुप्रयोग;
यह कोड फ्लैटलिस्ट घटक को राज्य के दो टुकड़ों के साथ सेट करता है, अर्थात् पुस्तकें और वर्तमान पृष्ठ. हम उपयोग करते हैं उपयोग प्रभाव () जब हमारा ऐप पहली बार चलता है तो डेटा के प्रारंभिक पृष्ठ को लाने के लिए हुक करें।
अगला, हम परिभाषित करते हैं रेंडरआइटम फ़ंक्शन जो किसी आइटम को लेता है पुस्तकें सरणी और रिटर्न ए देखना पुस्तक का शीर्षक और लेखक युक्त।
अंत में, हम पारित कर दिया है पुस्तकें सरणी के लिए आंकड़े का सहारा फ्लैटलिस्ट, हमारे साथ रेंडरआइटम समारोह और keyExtractor.
अब हमें यह सुनिश्चित करना होगा कि जब कोई उपयोगकर्ता सूची के अंत तक स्क्रॉल करता है तो हमारी फ़्लैटलिस्ट पता लगा सके। उस बिंदु पर, इसे नए डेटा को लाने और लोड करने और इसे प्रस्तुत करने के लिए आगे बढ़ना चाहिए।
ऐसा करने के लिए, हम इसका उपयोग करेंगे onEndReached सहारा प्रदान किया फ्लैटलिस्ट, जो कॉलबैक कहलाता है जब उपयोगकर्ता सूची के अंत तक स्क्रॉल करता है। हमें भी अपने को अपडेट करना चाहिए वर्तमान पृष्ठ राज्य इस बात का ट्रैक रखने के लिए कि हम वर्तमान में किस पृष्ठ पर हैं।
यह सब लागू करने वाला अद्यतन कोड यहां दिया गया है:
आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया';
आयात {फ्लैटलिस्ट, व्यू, टेक्स्ट} से'प्रतिक्रिया-मूल';कॉन्स्ट ऐप = () => {
कॉन्स्ट [किताबें, सेटबुक्स] = यूज़स्टेट ([]);
कॉन्स्ट [वर्तमान पृष्ठ, सेट वर्तमान पृष्ठ] = उपयोगस्टेट (1);
कॉन्स्ट [isLoading, setIsLoading] = useState(असत्य);उपयोग प्रभाव (() => {
फ़ेचबुक (वर्तमान पृष्ठ)। तब (आंकड़े => सेटबुक (डेटा));
}, []);कॉन्स्ट अधिक प्राप्त करें = async () => {
अगर (लोड हो रहा है) वापस करना;सेट लोड हो रहा है (सत्य);
कॉन्स्ट अगला पृष्ठ = वर्तमान पृष्ठ + 1;
कॉन्स्ट नया डेटा = इंतजार फ़ेचबुक (अगला पृष्ठ);सेट करेंटपेज (अगला पेज);
सेट लोड हो रहा है (असत्य);
किताबों को संवारें(पिछलाडेटा => [... पिछला डेटा,... नया डेटा]);
};कॉन्स्ट रेंडरआइटम = ({ वस्तु }) => {
वापस करना (गद्दी: 16 }}> फ़ॉन्ट आकार: 18 }}>{item.title}</Text> फ़ॉन्ट आकार: 14 }}>{आइटम.लेखक</Text>
</View>
);
};वापस करना (
डेटा = {पुस्तकें}
रेंडरइटम = {रेंडरइटम}
keyExtractor = {आइटम => item.id.toString ()}
onEndReached={fetchMore}
onEndReachedThreshold={0.1}
/>
);
}
निर्यातगलती करना अनुप्रयोग;
यहां हमने दो नए राज्यों को जोड़ा है जिन्हें कहा जाता है लोड हो रहा है और onEndReachedThreshold. लोड हो रहा है इस बात पर नज़र रखता है कि क्या हम वर्तमान में डेटा प्राप्त कर रहे हैं, और onEndReachedThreshold आग लगाता है onEndReached कॉलबैक जब उपयोगकर्ता सूची के अंत के 10% के भीतर स्क्रॉल करता है।
हमने एक नया फंक्शन बनाया है जिसका नाम है अधिक प्राप्त करें वह कब चलता है onEndReached निकाल दिया जाता है। यह जाँचता है कि क्या हम पहले से ही डेटा लोड कर रहे हैं, और यदि नहीं, तो यह डेटा का अगला पृष्ठ प्राप्त करता है और हमारी सूची को अपडेट करता है।
अंत में, हमने अपने लिए नए आवश्यक प्रॉप्स जोड़े फ्लैटलिस्ट अवयव। फ्लैटलिस्ट घटक अब डेटा को गतिशील रूप से लोड करेगा क्योंकि उपयोगकर्ता सूची के अंत तक स्क्रॉल करता है।
कस्टम पेजिनेशन का उपयोग करके अपने ऐप के प्रदर्शन में सुधार करें
आपने अपने स्वयं के कस्टम पेजिनेशन सिस्टम के साथ रिएक्टिव नेटिव में डेटा को गतिशील रूप से लोड करना सीखा। अपने ऐप में बड़ी मात्रा में डेटा के साथ काम करते समय यह विधि आपको अधिक लचीलापन और नियंत्रण देती है। अपने पेजिनेशन को अपने ऐप की शैली और ज़रूरतों से मेल खाने के लिए तैयार करना याद रखें। वांछित रूप और कार्यक्षमता प्राप्त करने के लिए आप इसे और भी अनुकूलित कर सकते हैं। कुल मिलाकर, यह निश्चित रूप से आपको अपने ऐप के प्रदर्शन को अनुकूलित करने में मदद करेगा।
