web-dev-qa-db-fra.com

Flatlist getItemLayout usecase

Pourquoi nous utilisons getItemLayout dans une liste plate, comment cela aide-t-il à améliorer les performances d'une liste plate.

  getItemLayout={(data, index) => (
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
  )}

qu'est-ce qui est compensé ici, que fait-il?

androidperformancereact-nativereact-native-flatlist
10
Rajat Gupta

React Native FlatList optimise les performances de l'affichage de liste en ne rendant que les lignes actuellement visibles à l'écran et en démontant les lignes qui ont été défilées.

Pour que FlatList puisse le faire, il doit connaître la hauteur totale des lignes au-dessus de la fenêtre actuellement visible, afin de pouvoir définir correctement la position de défilement ScrollView sous-jacente.

Il existe deux façons pour FlatList d'y parvenir. Soit,

  • il peut calculer les hauteurs des rangées après le montage des rangées, ou
  • vous pouvez lui dire la hauteur que vous attendez des rangées.

Dans le premier cas, il doit entièrement mettre en page, rendre, monter et mesurer les lignes précédentes jusqu'à ce qu'il soit capable de calculer la position des lignes suivantes.

Dans ce dernier, il peut précalculer les positions à l'avance et éviter le coût de mesure dynamique.

Les trois arguments du rappel getItemLayout sont:

  • length: hauteur de chaque ligne individuelle. Ils peuvent avoir des hauteurs différentes, mais la hauteur doit être statique. Les optimisations fonctionnent mieux lorsque la hauteur est constante.
  • offset: La distance (en pixels) de la ligne actuelle depuis le haut de la FlatList. Le moyen le plus simple de calculer cela pour les lignes à hauteur constante est height * index, qui donne la position immédiatement après la ligne précédente.
  • index: L'index de ligne actuel.

Si la FlatList est horizontale, chaque colonne est traitée lister une ligne de liste, et la largeur de colonne est la même que la hauteur de ligne.

22
jevakallio