[ad_1]
Petit guide des avantages du changement
Depuis que j’ai commencé à développer avec React Native, à peu près comme tout le monde, j’ai rencontré cet avertissement au moins une douzaine de fois :
VirtualizedList : vous avez une longue liste qui est lente à mettre à jour – assurez-vous que votre fonction renderItem rend les composants qui suivent les meilleures pratiques de performance de React comme PureComponent, shouldComponentUpdate, etc. 6624}
Cela semble familier, non ? Cela se produit généralement lorsque nous remplissons une FlatList avec de nombreux éléments qui ne sont pas simplement une image ou un texte statique, mais plutôt des composants contenant des animations ou d’autres interactions.
Le FlatList ici dit simplement qu’il ne peut pas gérer la liste pour un rendu fluide. Vous pouvez toujours l’ignorer comme un avertissement, mais cela ne signifie pas qu’il disparaîtra. Je souhaite que nous puissions vivre dans un monde comme celui-ci.
Avant de passer aux solutions, approfondissons ce message et découvrons quels sont ces chiffres :
FlatListqui est basé sur ScrollViewutilise une interface de liste appelée VirtualizedList. Sous la capuche, VirtualizedList utilise une API de rendu chargée d’afficher une liste énumérable d’éléments sous forme de défilement. Peut-être que nous ne le remarquons pas parce que nous avons le dernier iPhone, et nous le faisons via des publications Instagram toute la journée en douceur. L’action de défilement est une énorme tâche gourmande en processus pour une application mobile car non seulement elle nécessite un pré-rendu pour le prochain contenu à venir du haut ou du bas, mais elle doit également afficher ce contenu avec un effet de glissement lorsqu’il est dans le fenêtre d’affichage.
Ces calculs intensifs sont appelés « lots », et toute taille de lot supérieure à la précédente est appelée « delta ». Les chiffres sont donc dt(delta), prevDt(delta précédent) et exprimée en horodatages, c’est-à-dire le temps écoulé entre les lots. Le dernier numéro est contentLength, qui correspond à la taille totale du contenu dans l’unité sans unité (!) de React Native. Chaque fois qu’une valeur delta dépasse 500 ms et contentLength dépasse cinq fois la taille de la fenêtre, cette erreur est déclenchée. C’est la limite pour VirtualizedList pour fonctionner correctement.
Alors, que pouvez-vous faire à ce sujet? Vous pouvez rechercher sur Internet ou prendre la référence de FlatList sur le site officiel de React Native et proposez des techniques qui optimisent le processus de rendu. Ceux-ci incluent l’utilisation initialNumToRender ou removeClippedSubviews accessoires, peut-être en mémorisant le composant de l’objet ou en le rendant pur. La plupart du temps, quoi que vous utilisiez, ce message disparaîtra et tout ira bien.
Mais…
Même si cela semble correct, si votre projet s’exécute sur des appareils bas de gamme, en particulier les appareils Android, vous pouvez toujours obtenir cette erreur. Parce que ce sont simplement ces techniques qui nécessitent également de faire des calculs pour le résoudre. Cela étant dit, ce que nous devons faire, c’est rediriger ce fardeau de processus vers un autre fil. Peut-être, et pourquoi pas, l’interface utilisateur, n’est-ce pas ?
Découvrez FlashList ! Une alternative FlatList qui s’exécute sur le fil d’interface utilisateur et, comme ils le prétendent sur leur site Web, elle s’exécute 10 fois plus vite sur JS et 5 fois plus vite sur le fil JS. Même en ne considérant que la moitié de l’amélioration, ce sont de très bonnes améliorations de performances.
Pour l’utiliser, il vous suffit d’installer FlashList à l’aide de cette commande :
yarn add @shopify/flash-list
pod install si vous devez remplacer votre
Oui, FlashList est extrêmement facile à utiliser car il a les mêmes accessoires que FlatList. Cela signifie data, renderItem, ListEmptyScrollComponent, etc. La seule différence est qu’il utilise RecyclerView à la place de VirtualizedList en tant que composant sous-jacent, les accessoires de performance que nous avons mentionnés ci-dessus sont inutiles. Au lieu de cela, il existe d’autres accessoires de performance et de diagnostic que vous pouvez consulter sur docs/utilisation.
Notamment, estimatedItemSize que vous fournissez la hauteur de votre composant unique. Si chaque élément de votre liste a une taille égale, ce sera super rapide car FlashList n’a pas besoin de recalculer les tailles des éléments individuellement. S’il est flexible, vous pouvez prendre la somme de la hauteur de vos éléments et la fournir à cet accessoire.
D’autre part, si vous ciblez des appareils bas de gamme, vous devrez peut-être également modifier les autres accessoires, tels que getItemType ou overrideItemLayout. La logique du « composant léger » s’applique toujours dans FlashList, vous pouvez donc vérifier pour optimiser vos composants.
Personnellement, je n’ai pas utilisé cette bibliothèque en production jusqu’à présent, mais j’ai fait quelques tests sur mon ancien téléphone Samsung S5, et je peux dire que les performances de défilement deviennent bien meilleures lorsque j’utilise FlashList. Auparavant, il y avait des zones vides visibles pendant que je défilais rapidement, et elles avaient toutes disparu lorsque je suis passé à celle-ci.
Vous pouvez aller de l’avant et vérifier la bibliothèque à et remplacez facilement vos FlatLists existantes par celle-ci. Je suis sûr que vous remarquerez l’augmentation des performances, surtout si vous utilisez des animations ou des mises en page complexes dans vos éléments.
Merci d’avoir lu!
[ad_2]
Télécharger ici
