VariableSizeList: altezze dinamiche delle righe

A volte le righe non hanno tutte la stessa altezza: un elenco di chat può contenere messaggi brevi e lunghi, oppure un feed può avere card con contenuti di lunghezza variabile. FixedSizeList non è in grado di gestire questo caso perché presuppone un unico itemSize costante.

Per questi casi react-window offre un tipo di elenco che consente a ogni elemento di definire la propria dimensione.

VariableSizeList funziona come FixedSizeList, ma accetta una dimensione specifica per ogni elemento. È sufficiente importarlo al suo posto e fornire una funzione che restituisca la dimensione per un determinato index.

Tutto il resto, ovvero la funzione di rendering children e la fondamentale prop style, rimane invariato, quindi la migrazione è minima.

Con VariableSizeList, itemSize è una funzione che riceve un index e restituisce l'altezza di quella riga in pixel. react-window la chiama per calcolare gli offset e determinare la finestra visibile.

Questo consente di codificare altezze note, ad esempio righe più alte per gli elementi con immagini e più basse per il semplice testo.

Se si conosce in anticipo l'altezza di ogni riga, è possibile restituirla direttamente dalla funzione itemSize. Se le altezze dipendono dal contenuto sottoposto a rendering, è necessario misurare le righe dopo il loro disegno.

Le altezze precalcolate sono più semplici e rapide; quelle misurate sono più flessibili, ma richiedono un lavoro aggiuntivo per restituire le dimensioni all'elenco.

VariableSizeList memorizza nella cache gli offset degli elementi per migliorare le prestazioni. Quando un'altezza misurata cambia, è necessario chiamare il metodo resetAfterIndex dell'elenco tramite il suo ref, in modo che ricalcoli le posizioni a partire da quell'index.

Se lo si dimentica, rimangono offset obsoleti e righe disallineate; resetAfterIndex è quindi fondamentale per far funzionare la misurazione dinamica.

Si presenta un problema simile a quello dell'uovo e della gallina: serve un'altezza per eseguire il rendering della riga, ma l'altezza reale si conosce solo dopo il rendering. L'elenco deve posizionare una riga prima di poterla misurare.

Per risolvere il problema, si esegue inizialmente il rendering con una stima, quindi si corregge la posizione quando si conosce l'altezza effettiva.

Il pattern standard consiste nell'eseguire il rendering delle righe con un'altezza stimata, misurarne l'altezza effettiva dopo il disegno utilizzando un ref o ResizeObserver, memorizzare il valore misurato e chiamare resetAfterIndex per aggiornare le posizioni.

Questo ciclo converge rapidamente, quindi dopo il primo passaggio di misurazione l'elenco si stabilizza con gli offset corretti.

La funzione itemSize dovrebbe rimanere stabile tra i rendering, in genere avvolgendola in useCallback, così l'elenco non invalida continuamente gli offset memorizzati nella cache.

Una funzione instabile definita inline può forzare ricalcoli non necessari, penalizzando proprio le prestazioni che la virtualizzazione dovrebbe garantire.

VariableSizeList esegue più operazioni di FixedSizeList perché non può presumere un offset costante e deve tenere traccia delle dimensioni dei singoli elementi. Quando le altezze vengono misurate, anche questa misurazione aggiuntiva ha un costo.

Per le liste in cui le righe hanno davvero altezze diverse, questo costo è giustificato; per le righe uniformi, FixedSizeList resta la scelta più semplice e veloce.

Se la misurazione dinamica esatta è troppo costosa, a volte è possibile ricorrere a un'approssimazione. Raggruppare le righe in alcune classi di altezza fissa, oppure usare una media ragionevole, può consentire di continuare a usare FixedSizeList.

Questo sacrifica un layout perfetto al pixel in favore di semplicità e velocità: un compromesso accettabile quando è possibile tollerare piccole imperfezioni negli offset.

Ricordi in che modo VariableSizeList determina l'altezza di ogni riga.

VariableSizeList gestisce righe di altezze diverse ricevendo itemSize come funzione dell'indice. Le altezze possono essere calcolate in anticipo o misurate; per le altezze misurate è necessario il ciclo stima-rendering-misurazione-aggiornamento con resetAfterIndex.

Mantenga stabile la funzione itemSize con useCallback. Ha un costo maggiore rispetto a FixedSizeList, quindi per le righe uniformi o quando è sufficiente un'approssimazione, preferisca la variante fissa.