FixedSizeList: rendering di migliaia di elementi

È possibile aggiungere react-window a un progetto tramite il gestore di pacchetti, ad esempio installando il pacchetto react-window. È un pacchetto leggero e non ha dipendenze pesanti.

Una volta installato, si importano i componenti per gli elenchi necessari, più comunemente FixedSizeList per le righe che hanno tutte la stessa altezza.

FixedSizeList richiede diverse props per funzionare: height e width definiscono il contenitore con scorrimento, itemCount indica quanti elementi esistono e itemSize indica l'altezza in pixel di ogni riga.

La prop children è una funzione di rendering che disegna una singola riga. Con questi dati, il componente conosce la geometria necessaria per applicare correttamente il windowing.

La funzione di rendering children riceve un oggetto con index e style. index indica quale elemento eseguire, consentendo di recuperare i dati corretti, mentre style posiziona la riga all'interno dell'elenco virtuale.

Si restituisce il JSX per quella singola riga e react-window chiama questa funzione solo per le righe attualmente incluse nella finestra.

La prop style è essenziale e deve essere applicata all'elemento della riga. react-window posiziona ogni riga in modo assoluto, utilizzando top per collocarla all'offset corretto all'interno di un contenitore alto con scorrimento.

Se non si applica style, tutte le righe si sovrappongono nella stessa posizione e la virtualizzazione collassa visivamente.

L'errore più comune in react-window consiste nell'omettere la prop style dalla riga. L'elenco sembrerà non funzionare: le righe si sovrapporranno in alto e lo scorrimento si comporterà in modo errato.

Applichi sempre lo style fornito all'elemento più esterno della riga, espandendolo o assegnandolo, per mantenere corretto il posizionamento.

Anziché catturare il proprio array nella funzione di rendering, è possibile passarlo tramite la prop itemData. react-window lo inoltra quindi alla riga come campo data, insieme a index e style.

In questo modo il componente della riga rimane disaccoppiato e può essere più facile da memoizzare, poiché riceve esplicitamente i propri dati.

FixedSizeList supporta gli elenchi orizzontali tramite la prop layout impostata su horizontal, oppure utilizzando le opzioni direction, a seconda della versione. In questo caso itemSize rappresenta la larghezza anziché l'altezza.

È utile per carousel o timeline con scorrimento orizzontale che contengono anch'essi molti elementi.

La prop overscanCount esegue il rendering di alcune righe aggiuntive appena fuori dalla finestra visibile. Questo buffer riduce la possibilità che durante uno scorrimento rapido compaiano spazi vuoti prima del montaggio delle nuove righe.

Un overscan ridotto rende l'esperienza più fluida, mentre uno ampio vanifica il vantaggio montando troppe righe fuori dallo schermo.

FixedSizeList richiede dimensioni esplicite in pixel, il che è scomodo nei layout responsivi. Il componente complementare AutoSizer misura il contenitore padre e fornisce width e height all'elenco tramite una render prop.

Avvolgendo l'elenco in AutoSizer, è possibile fargli occupare un contenitore flessibile senza codificare manualmente le dimensioni, adattandolo ai cambiamenti del layout.

Un FixedSizeList funzionante imposta height, width, itemCount e itemSize ed esegue il rendering delle righe tramite una funzione children che applica la prop style. Facoltativamente, AutoSizer gli fornisce le dimensioni e overscanCount aggiunge un buffer.

Con questa configurazione, un elenco di qualsiasi lunghezza mantiene montate solo le righe visibili, mentre lo scorrimento rimane fluido.

Richiami quali informazioni devono essere fornite a FixedSizeList per eseguire correttamente il rendering delle righe.

FixedSizeList esegue il rendering di righe della stessa altezza utilizzando height, width, itemCount, itemSize e una funzione di rendering children che riceve index e style. Applicare la prop style è obbligatorio, altrimenti le righe si sovrappongono.

Passi i dati tramite itemData, supporti il layout orizzontale, aggiunga un piccolo buffer con overscanCount e utilizzi AutoSizer per riempire i contenitori responsivi senza codificare manualmente le dimensioni.