FixedSizeList : afficher des milliers d’éléments

Vous ajoutez react-window à un projet avec votre gestionnaire de paquets, par exemple en installant le paquet react-window. Il est léger et n’a pas de dépendances lourdes.

Une fois la bibliothèque installée, vous importez les composants de liste dont vous avez besoin, le plus souvent FixedSizeList pour les lignes qui ont toutes la même hauteur.

FixedSizeList a besoin de plusieurs propriétés pour fonctionner : height et width définissent le conteneur avec défilement, itemCount indique le nombre d’éléments et itemSize indique la hauteur de chaque ligne en pixels.

La propriété de rendu reçoit une fonction qui dessine une seule ligne. Grâce à ces informations, le composant connaît la géométrie nécessaire pour effectuer correctement le fenêtrage.

La fonction de rendu reçoit un objet contenant un indice et une propriété de style. L’indice indique quel élément rendre, ce qui vous permet de retrouver les bonnes données, et la propriété de style positionne la ligne dans la liste virtuelle.

Vous renvoyez le JSX correspondant à cette seule ligne, et react-window n’appelle cette fonction que pour les lignes actuellement présentes dans la fenêtre.

La propriété de style est indispensable et doit être appliquée à l’élément de votre ligne. react-window positionne chaque ligne de manière absolue, en utilisant sa position verticale pour la placer au bon décalage dans un grand conteneur avec défilement.

Sans appliquer cette propriété, toutes les lignes s’empileraient au même endroit et la virtualisation s’effondrerait visuellement.

L’erreur la plus courante avec react-window consiste à omettre la propriété de style sur la ligne. La liste semblera défectueuse : les lignes se chevaucheront en haut et le défilement se comportera incorrectement.

Étendez toujours la propriété de style fournie sur l’élément extérieur de votre ligne, ou affectez-la-lui, afin de conserver un positionnement correct.

Plutôt que de capturer votre tableau dans la fonction de rendu, vous pouvez le transmettre par l’intermédiaire de la propriété itemData. react-window le transmet ensuite à la ligne sous la forme d’un champ de données, avec l’indice et la propriété de style.

La ligne reste ainsi découplée et cela peut faciliter la mémorisation, puisque le composant de ligne reçoit explicitement ses données.

FixedSizeList prend en charge les listes horizontales grâce à la propriété de disposition définie sur horizontal, ou en utilisant les options de direction selon la version. itemSize représente alors la largeur plutôt que la hauteur.

C’est pratique pour les carrousels ou les frises chronologiques à défilement horizontal qui contiennent également de nombreux éléments.

La propriété overscanCount rend quelques lignes supplémentaires juste à l’extérieur de la fenêtre visible. Ce tampon réduit le risque de voir un espace vide pendant un défilement rapide, avant que les nouvelles lignes soient montées.

Un petit tampon de rendu anticipé fluidifie l’expérience, tandis qu’un tampon trop grand réduit le bénéfice en montant trop de lignes hors écran.

FixedSizeList a besoin de dimensions explicites en pixels, ce qui est peu pratique dans les mises en page adaptatives. Le composant associé AutoSizer mesure son parent et fournit la largeur et la hauteur à la liste par l’intermédiaire d’une propriété de rendu.

En entourant la liste avec AutoSizer, vous lui permettez de remplir un conteneur flexible sans coder les dimensions en dur, tout en l’adaptant aux changements de mise en page.

Une FixedSizeList fonctionnelle définit height, width, itemCount et itemSize, puis rend les lignes au moyen d’une fonction de rendu qui applique la propriété de style. En option, AutoSizer lui fournit les dimensions et overscanCount ajoute un tampon.

Une fois cette configuration en place, une liste de n’importe quelle longueur ne conserve montées que les lignes visibles, tandis que le défilement reste fluide.

Rappelez-vous les informations que FixedSizeList doit recevoir pour rendre correctement les lignes.

FixedSizeList rend des lignes de hauteur identique grâce à height, width, itemCount, itemSize et une fonction de rendu qui reçoit l’indice et la propriété de style. L’application de la propriété de style est obligatoire, sinon les lignes se chevauchent.

Transmettez les données avec itemData, prenez en charge la disposition horizontale, ajoutez un petit tampon avec overscanCount et utilisez AutoSizer pour remplir les conteneurs adaptatifs sans coder leurs dimensions en dur.