Hacer una tabla de desplazamiento infinita sin oyente de eventos

¿Por qué se retrasa tanto?

Si, al representar una tabla enorme con algún tipo de animación de transición, no se hace nada más, la aplicación se retrasará y el usuario sufrirá.

En la mayoría de los casos, cuando usamos el detector de eventos para crear una tabla con desplazamiento infinito, no solo necesitamos realizar cálculos relacionados con la ventana gráfica y la altura de la fila, sino que también escribimos mucha lógica en el controlador de desplazamiento para evitar volver a dibujar con demasiada frecuencia, ya que cada desplazamiento de devolución de llamada llame a setState .

El código sería algo como esto:

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

Pero hay otro enfoque para implementar el desplazamiento infinito de una tabla, sin saber nada acerca de los valores de ventana o límite.

Este es un IntersectionObserver . Definición de w3c :

Esta especificación describe una API que se puede utilizar para averiguar la visibilidad y la posición de los elementos DOM ("objetivos") en relación con los elementos contenidos en ellos.

Cuando utilice este método, no necesita saber la altura de la línea, la parte superior de la ventana gráfica ni ningún otro valor para hacer los cálculos.

El concepto es organizar los anclajes con índices en cada punto de control y cada vez que se activa el ancla, obtenga el valor del índice y vuelva a dibujar la tabla. Gracias a esto, no necesita hacer magia matemática con una altura DOM y una ventana gráfica.

Activador de anclaje para el índice 1

Renderizar más líneas

El código con IntersectionObserver será algo como esto.

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