React.js में अनंत स्क्रॉल कैसे जोड़ें

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

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

अनंत स्क्रॉल एक लोकप्रिय तकनीक है जो पेज लोड की संख्या को कम करती है। यह एक सहज उपयोगकर्ता अनुभव भी बना सकता है, विशेष रूप से मोबाइल उपकरणों पर।

कुछ अलग तरीके हैं जिनसे आप React.js में अनंत स्क्रॉल लागू कर सकते हैं। एक तरीका पुस्तकालय का उपयोग करना है जैसे प्रतिक्रिया-अनंत-स्क्रॉल-घटक। यह पुस्तकालय एक घटक प्रदान करता है जो उपयोगकर्ता द्वारा पृष्ठ के नीचे स्क्रॉल करने पर एक घटना को ट्रिगर करेगा। फिर आप अधिक सामग्री लोड करने के लिए इस घटना का उपयोग कर सकते हैं।

अनंत स्क्रॉल को लागू करने का दूसरा तरीका रिएक्ट द्वारा प्रदान किए गए अंतर्निहित कार्यों का उपयोग करना है। ऐसा ही एक फंक्शन है “कंपोनेंटडिडमाउंट” जिसे रिएक्ट तब कॉल करता है जब कोई कंपोनेंट पहली बार माउंट किया जाता है।

आप डेटा के पहले बैच को लोड करने के लिए इस फ़ंक्शन का उपयोग कर सकते हैं और फिर उपयोगकर्ता द्वारा नीचे स्क्रॉल करने पर अधिक डेटा लोड करने के लिए “componentDidUpdate” फ़ंक्शन का उपयोग कर सकते हैं। आप भी कर सकते हैं

रिएक्ट हुक का उपयोग करें एक अनंत स्क्रॉलिंग सुविधा जोड़ने के लिए।

प्रतिक्रिया-अनंत-स्क्रॉल-घटक का उपयोग करने के लिए, आपको इसे पहले npm का उपयोग करके स्थापित करना होगा:

NPM स्थापित करना प्रतिक्रिया-अनंत-स्क्रॉल-अवयव --बचाना

फिर, आप इसे अपने रिएक्ट घटक में आयात कर सकते हैं।

आयात प्रतिक्रिया से 'प्रतिक्रिया'
आयात अनंत स्क्रॉल से 'प्रतिक्रिया-अनंत-स्क्रॉल-घटक'
कक्षाअनुप्रयोगका विस्तारप्रतिक्रिया.अवयव{
निर्माता() {
बहुत अच्छा()
यहराज्य = {
सामान: [],
 उसके पास अधिक हैं: सत्य
 }
 }
घटकडिडमाउंट () {
यह.fetchData (1)
 }
फ़ेचडाटा = (पृष्ठ) => {
कॉन्स्ट नया आइटम = []
के लिए (होने देना मैं = 0; मैं < 100; मैं++) {
नई वस्तुएं।धकेलना(मैं )
 }
अगर (पेज 100) {
यह.सेटस्टेट({ उसके पास अधिक हैं: असत्य })
 }
यह.सेटस्टेट({ सामान: [...this.state.items, ...newItems] })
 }
प्रदान करना() {
वापस करना (
<डिव>
<एच 1>अनंत स्क्रॉल</h1>
<अनंत स्क्रॉल
 डेटा लंबाई = {यह.state.items.length}
 अगला = {यह.fetchData}
 अधिक है = {यह.state.hasMore}
 लोडर = {<एच 4>लोड हो रहा है...</h4>}
 अंत संदेश = {
<पी शैली = {{ पाठ संरेखित करें: 'केंद्र' }}>
<बी>वाह! आपने यह सब देखा है</बी>
</पी>
 }
>
 {यह.state.items.map ((आइटम, इंडेक्स) => (
<div कुंजी = {सूचकांक}>
 {वस्तु}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
निर्यातगलती करना अनुप्रयोग

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

कंपोनेंटडिडमाउंट जीवनचक्र विधि में, आप कॉल करते हैं डेटा प्राप्त करें ए के साथ विधि पृष्ठ का पैरामीटर 1. FetchData पद्धति कुछ डेटा प्राप्त करने के लिए एक API कॉल करती है। यह उदाहरण केवल कुछ डमी डेटा उत्पन्न करता है। यह तब 100 वस्तुओं की एक सरणी बनाता है।

यदि पृष्ठ पैरामीटर 100 है, तो और आइटम नहीं हैं, इसलिए हैमोर फ़्लैग को गलत पर सेट करें। यह InfiniteScroll घटक को और API कॉल करने से रोकेगा। अंत में, नए डेटा का उपयोग करके स्थिति सेट करें।

रेंडर विधि InfiniteScroll घटक का उपयोग करती है और कुछ प्रॉप्स में पास होती है। डेटा लम्बाई प्रोप आइटम सरणी की लंबाई पर सेट है। अगला प्रॉप FetchData मेथड पर सेट है। हैसमोर प्रॉप हैसमोर फ्लैग पर सेट है। लोडर प्रोप घटक को लोडिंग इंडिकेटर के रूप में अपनी सामग्री प्रस्तुत करने का कारण बनता है। इसी तरह, यह एंडमैसेज प्रोप को एक संदेश के रूप में प्रस्तुत करेगा जब सभी डेटा लोड हो जाएंगे।

ऐसे अन्य प्रॉप्स भी हैं जिन्हें आप InfiniteScroll कंपोनेंट में पास कर सकते हैं, लेकिन ये वे हैं जिनका आप सबसे अधिक उपयोग करेंगे।

बिल्ट-इन फ़ंक्शंस का उपयोग करना

रिएक्ट में कुछ अंतर्निहित तरीके भी हैं जिनका उपयोग आप अनंत स्क्रॉल को लागू करने के लिए कर सकते हैं।

पहला तरीका है घटकDidUpdate. घटक को अपडेट करने के बाद रिएक्ट इस विधि को कॉल करता है। आप इस विधि का उपयोग यह जांचने के लिए कर सकते हैं कि क्या उपयोगकर्ता ने पृष्ठ के नीचे स्क्रॉल किया है और यदि ऐसा है, तो अधिक डेटा लोड करें।

दूसरा तरीका है स्क्रॉल, जिसे रिएक्ट कॉल करता है जब उपयोगकर्ता स्क्रॉल करता है। स्क्रॉल स्थिति का ट्रैक रखने के लिए आप इस विधि का उपयोग कर सकते हैं। यदि उपयोगकर्ता पृष्ठ के नीचे स्क्रॉल करता है, तो आप अधिक डेटा लोड कर सकते हैं।

यहाँ एक उदाहरण दिया गया है कि आप अनंत स्क्रॉल को लागू करने के लिए इन विधियों का उपयोग कैसे कर सकते हैं:

आयात प्रतिक्रिया, {useState, useEffect} से 'प्रतिक्रिया'
समारोहअनुप्रयोग() {
कॉन्स्ट [आइटम, सेट इटम्स] = यूज़स्टेट ([])
कॉन्स्ट [हैमोर, सेटहैसमोर] = यूज़स्टेट (सत्य)
कॉन्स्ट [पेज, सेटपेज] = यूज़स्टेट (1)
उपयोग प्रभाव (() => {
 फ़ेचडाटा (पेज)
 }, [पृष्ठ])
कॉन्स्ट फ़ेचडाटा = (पेज) => {
कॉन्स्ट नया आइटम = []
के लिए (होने देना मैं = 0; मैं < 100; मैं++) {
नई वस्तुएं।धकेलना(मैं)
 }
अगर (पेज 100) {
 सेटहैसमोर(असत्य)
 }
सेटआइटम([...आइटम, ...नईआइटम])
 }
कॉन्स्ट ऑनस्क्रॉल = () => {
कॉन्स्ट स्क्रॉलटॉप = दस्तावेज़.documentElement.scrollTop
कॉन्स्ट स्क्रॉलहाइट = दस्तावेज़.documentElement.scrollHeight
कॉन्स्ट क्लाइंटहाइट = दस्तावेज़.documentElement.clientHeight
अगर (स्क्रॉलटॉप + क्लाइंटहाइट >= स्क्रॉलहाइट) {
 सेटपेज (पेज + 1)
 }
 }
उपयोग प्रभाव (() => {
 विंडो.ऐडइवेंट लिस्टनर ('स्क्रॉल', ऑनस्क्रॉल)
 वापसी () => window.removeEventListener ('स्क्रॉल', ऑनस्क्रॉल)
 }, [सामान])
वापस करना (
<डिव>
 {आइटम.मैप ((आइटम, इंडेक्स) => (
<div कुंजी = {सूचकांक}>
 {वस्तु}
</div>
 ))}
</div>
 )
}
निर्यातगलती करना अनुप्रयोग

यह कोड राज्य और साइड इफेक्ट्स को प्रबंधित करने के लिए यूज़स्टेट और यूज़फेक्ट हुक का उपयोग करता है।

उपयोग प्रभाव हुक में, यह वर्तमान पृष्ठ के साथ fetchData विधि को कॉल करता है। FetchData पद्धति कुछ डेटा प्राप्त करने के लिए एक API कॉल करती है। इस उदाहरण में, आप तकनीक को प्रदर्शित करने के लिए बस कुछ डमी डेटा उत्पन्न कर रहे हैं।

लूप के लिए 100 पूर्णांकों के साथ newItems सरणी पॉप्युलेट करता है। यदि पृष्ठ पैरामीटर 100 है, तो अधिक ध्वज को गलत पर सेट करें। यह InfiniteScroll घटक को और API कॉल करने से रोकेगा। अंत में, राज्य को नए डेटा के साथ सेट करें।

ऑनस्क्रॉल विधि स्क्रॉल स्थिति का ट्रैक रखती है। यदि उपयोगकर्ता पृष्ठ के नीचे स्क्रॉल करता है, तो आप अधिक डेटा लोड कर सकते हैं।

useEffect हुक स्क्रॉल ईवेंट के लिए ईवेंट श्रोता जोड़ता है। जब स्क्रॉल ईवेंट सक्रिय होता है, तो यह ऑनस्क्रॉल विधि को कॉल करता है।

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

नफा-नुकसान को तौलना जरूरी है अनंत स्क्रॉल तकनीक का इसे अपनी वेबसाइट या ऐप पर लागू करने से पहले।

अपनी React.js वेबसाइट या ऐप में अनंत स्क्रॉल जोड़ने से उपयोगकर्ता अनुभव को बेहतर बनाने में मदद मिल सकती है। अनंत स्क्रॉल के साथ, उपयोगकर्ताओं को अधिक सामग्री देखने के लिए क्लिक करने की आवश्यकता नहीं होती है। अपने React.js ऐप में अनंत स्क्रॉल का उपयोग करने से पेज लोड की संख्या कम करने में भी मदद मिल सकती है, जिससे प्रदर्शन में सुधार हो सकता है।

आप आसानी से अपने रिएक्ट ऐप को जीथब पेजों पर मुफ्त में तैनात कर सकते हैं।