FixedSizeList: हज़ारों Items को Render करना

आप अपने पैकेज मैनेजर की सहायता से किसी प्रोजेक्ट में रिएक्ट-विंडो जोड़ते हैं, उदाहरण के लिए रिएक्ट-विंडो पैकेज इंस्टॉल करके। यह छोटा है और इसमें कोई भारी निर्भरता नहीं है।

इंस्टॉल करने के बाद आप आवश्यक सूची कंपोनेंट आयात करते हैं। समान ऊँचाई वाली पंक्तियों के लिए सबसे सामान्य विकल्प FixedSizeList है।

FixedSizeList को काम करने के लिए कई प्रॉपर्टियाँ चाहिए: ऊँचाई और चौड़ाई स्क्रॉल कंटेनर को परिभाषित करती हैं, itemCount बताता है कि कितने आइटम मौजूद हैं, और itemSize पिक्सेल में हर पंक्ति की ऊँचाई बताता है।

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

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

आप उस एक पंक्ति के लिए JSX लौटाते हैं और रिएक्ट-विंडो इस फ़ंक्शन को केवल वर्तमान विंडो में मौजूद पंक्तियों के लिए कॉल करता है।

शैली प्रॉपर्टी आवश्यक है और इसे आपकी पंक्ति के तत्व पर लागू किया जाना चाहिए। रिएक्ट-विंडो हर पंक्ति को निरपेक्ष रूप से स्थित करता है और एक ऊँचे स्क्रॉल कंटेनर के अंदर सही ऑफ़सेट पर रखने के लिए ऊपरी स्थिति का उपयोग करता है।

शैली लागू न करने पर सभी पंक्तियाँ एक ही स्थान पर एक-दूसरे के ऊपर आ जाएँगी और वर्चुअलाइज़ेशन का दृश्य प्रभाव समाप्त हो जाएगा।

रिएक्ट-विंडो की सबसे सामान्य गलती पंक्ति पर शैली प्रॉपर्टी न लगाना है। सूची खराब दिखाई देगी, पंक्तियाँ ऊपर एक-दूसरे पर चढ़ जाएँगी और स्क्रॉल करना भी गलत ढंग से काम करेगा।

स्थिति सही बनाए रखने के लिए दी गई शैली को हमेशा अपनी पंक्ति के सबसे बाहरी तत्व पर फैला दें या वहाँ निर्दिष्ट करें।

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

इससे पंक्ति कंपोनेंट अलग रहता है और मेमोआइज़ेशन में सहायता मिल सकती है, क्योंकि पंक्ति को अपना डेटा स्पष्ट रूप से प्राप्त होता है।

FixedSizeList, लेआउट प्रॉपर्टी को क्षैतिज पर सेट करके क्षैतिज सूचियों का समर्थन करता है। संस्करण के अनुसार आप दिशा विकल्पों का भी उपयोग कर सकते हैं। इसके बाद itemSize ऊँचाई के बजाय चौड़ाई दर्शाता है।

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

overscanCount प्रॉपर्टी दृश्य विंडो के ठीक बाहर कुछ अतिरिक्त पंक्तियाँ रेंडर करती है। यह बफ़र तेज़ स्क्रॉल के दौरान नई पंक्तियों के माउंट होने से पहले खाली स्थान दिखाई देने की संभावना कम करता है।

छोटा ओवरस्कैन अनुभव को सहज बनाता है, जबकि बड़ा ओवरस्कैन बहुत अधिक अदृश्य पंक्तियों को माउंट करके इसके लाभ को कम कर देता है।

FixedSizeList को स्पष्ट पिक्सेल आयाम चाहिए, जो उत्तरदायी लेआउट में असुविधाजनक होता है। सहायक AutoSizer कंपोनेंट अपने पैरेंट का मापन करता है और रेंडर प्रॉपर्टी के माध्यम से सूची को चौड़ाई और ऊँचाई देता है।

सूची को AutoSizer में लपेटने से आप आकारों को कोड में पहले से लिखे बिना उसे लचीले कंटेनर में भर सकते हैं और लेआउट बदलने पर वह अपने-आप अनुकूलित हो जाती है।

काम करने वाली FixedSizeList में ऊँचाई, चौड़ाई, itemCount और एक चिल्ड्रेन फ़ंक्शन होता है, जो शैली प्रॉपर्टी लागू करके पंक्तियाँ रेंडर करता है। वैकल्पिक रूप से AutoSizer उसे आयाम दे सकता है और overscanCount एक बफ़र जोड़ सकता है।

यह व्यवस्था होने पर किसी भी लंबाई की सूची स्क्रॉल करते समय केवल दिखाई देने वाली पंक्तियों को माउंट रखती है और स्क्रॉल सहज रहता है।

FixedSizeList समान ऊँचाई वाली पंक्तियों को ऊँचाई, चौड़ाई, itemCount, itemSize और इंडेक्स तथा शैली प्राप्त करने वाले चिल्ड्रेन रेंडर फ़ंक्शन की सहायता से रेंडर करता है। शैली प्रॉपर्टी लागू करना अनिवार्य है, वरना पंक्तियाँ एक-दूसरे पर चढ़ जाएँगी।

डेटा itemData के माध्यम से भेजें, क्षैतिज लेआउट का समर्थन करें, एक छोटा overscanCount बफ़र जोड़ें और आयामों को पहले से लिखे बिना उत्तरदायी कंटेनरों को भरने के लिए AutoSizer का उपयोग करें।