Erstellen einer unendlichen Bildlauftabelle ohne Ereignis-Listener

Warum bleibt es so zurück?

Wenn beim Rendern einer großen Tabelle mit einer Art Übergangsanimation nichts anderes getan wird, verzögert sich die Anwendung und der Benutzer leidet darunter.

Wenn wir den Ereignis-Listener zum Erstellen einer Tabelle mit unendlichem Bildlauf verwenden, müssen wir in den meisten Fällen nicht nur Berechnungen in Bezug auf das Ansichtsfenster und die Zeilenhöhe durchführen, sondern auch viel Logik in den Bildlauf-Handler schreiben, um ein zu häufiges Neuzeichnen zu verhindern, da jeder Rückruf-Bildlauf ausgeführt wird Rufen Sie setState .

Der Code wäre ungefähr so:

 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 }) } 

Es gibt jedoch einen anderen Ansatz zum Implementieren des unendlichen Bildlaufs einer Tabelle, ohne etwas über Fenster- oder BoundingRect-Werte zu wissen.

Dies ist ein IntersectionObserver . Definition aus w3c :

Diese Spezifikation beschreibt eine API, mit der die Sichtbarkeit und Position von DOM-Elementen („Zielen“) relativ zu den darin enthaltenen Elementen ermittelt werden kann.

Wenn Sie diese Methode verwenden, müssen Sie weder die Zeilenhöhe noch den oberen Rand des Ansichtsfensters oder einen anderen Wert kennen, um rechnen zu können.

Das Konzept besteht darin, Anker an jedem Kontrollpunkt mit Indizes anzuordnen und bei jedem Auslösen des Ankers den Indexwert abzurufen und die Tabelle neu zu zeichnen. Dank dieser Funktion müssen Sie mit einer DOM-Höhe und einem Ansichtsfenster keine mathematische Magie ausführen.

Ankerauslöser für Index 1

Rendern Sie mehr Zeilen

Der Code mit IntersectionObserver sieht ungefähr so ​​aus.

 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> ... ) }