इवेंट श्रोता के बिना एक अनंत स्क्रॉल तालिका बनाना

ऐसा क्यों होता है?

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

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

कोड कुछ इस तरह होगा:

 componentDidMount() { window.addEventListener('scroll', this.handleScroll) } handleScroll(e) { // use window offset and boundingRect const { ...someAttributes } = window; const { ...someBoundingRect } = this.component // some logic prevent re-render if ( ... ) return; // do some math const newIndex = ... // and how many rows should be rendered this.setState({index: newIndex }) } 

लेकिन एक टेबल के अनंत स्क्रॉल को लागू करने के लिए एक और दृष्टिकोण है, बिना खिड़की या बाउंडिंग मान के बारे में कुछ भी जानने के बिना।

यह एक IntersectionObserver है । W3c से परिभाषा:

यह विनिर्देश एक एपीआई का वर्णन करता है जिसका उपयोग डोम तत्व ("लक्ष्य") की दृश्यता और स्थिति का पता लगाने के लिए किया जा सकता है।

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

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

सूचकांक 1 के लिए एंकर ट्रिगर

अधिक पंक्तियाँ रेंडर करें

IntersectionObserver के साथ कोड कुछ इस तरह होगा।

 handleSentinel = (c) => { if(!this.observer) { //  observer this.observer = new IntersectionObserver( entries => { entries.forEach(e => { //   ,    if (e.isIntersecting) { this.setState( { cursor: +e.target.getAttribute('index') } ); } }); }, { root: document.querySelector('App'), rootMargin: '-30px', } } if (!c) return; //    this.observer.observe(c) } render() { const blockNum = 5; return( ... <tbody> {MOCK_DATA.slice(0, (cursor+1) * blockNum).map(d => <Block> { //       // ,   5  d.id % blockNum === 0 ? <span ref={this.handleSentinel} index={d.id / blockNum} /> : null } </Block>)} </tbody> ... ) }