Conseils et astuces de performance natifs réagis essentiels

Guide pratique pour améliorer les performances des applications natives React

Points clés

• Équilibrez le traitement d'animation des threads JavaScript (JS) et des threads principaux pour améliorer les performances de l'application. Utilisez useNativeDriver Attributs et InteractionManager pour gérer cet équilibre.
• Évitez la rediffusion inutile des composants. Les conseils comprennent: la mémorisation des composants et des fonctions, en utilisant sagement useCallback, en évitant de mettre à jour les états locaux avec des états Redux et en évitant les fonctions en ligne.
• Optimiser les images pour améliorer la vitesse de l'application. Utilisez des icônes et des images SVG, du format d'image WebP (qualité d'image sans perte) et des images de cache pour accélérer le rendu.
• Rendez le tableau de projet à l'aide de packages NPM stables et de FlatList et évitez les fuites de mémoire en déconnectant le temporisateur / écouteur / souscrit, en évitant l'utilisation inutile des variables globales et en empêchant les références d'objets en boucle.
• Égoutter et surveiller les performances à l'aide d'outils analytiques tels que les outils d'analyse des performances, les devtools de Chrome, les devtools React Devtools, les flipper et les moniteurs de performance natifs. De plus, supprimez les journaux de la console en mode de production pour améliorer les performances de l'application.

Cet article fournira un ensemble complet de conseils et de stratégies pour aider les développeurs à optimiser les applications natives React pour obtenir des performances optimales et fournir une expérience utilisateur inégalée.

Animation qui équilibre les threads JS et le thread principal

L'anime est une tâche exigeante dans n'importe quelle application, et React Native ne fait pas exception. React Native utilise deux threads principaux: les threads JS sont utilisés pour exécuter le code JavaScript, et le thread principal est principalement responsable du rendu de l'interface utilisateur et de la réponse à l'entrée de l'utilisateur. L'animation s'exécute généralement sur le fil principal par défaut. Cependant, les charges de travail de l'animation lourde sur le fil principal peuvent provoquer des problèmes de performances tels que les chutes de trame.

Solution 1: Essayez d'utiliser utenativedriver

useNativeDriver est une propriété d'animation native React qui peut être utilisée lors de l'animation des éléments dans une application native React. Lorsque l'utilisateur définit la valeur de cette propriété sur true, l'application Native React rendra l'animation sur le thread principal. Cependant, si le fil principal devrait être occupé avec d'autres tâches, vous pouvez transférer l'animation vers le thread JS en définissant useNativeDriver: false.

Solution 2: Utilisez InteractionManager

Dans certains cas, le fil JS et le fil principal seront très occupés. Par exemple, une application peut récupérer les données de l'API, l'exécution d'une logique et les rendre sur l'interface utilisateur. Dans ce cas, le thread JS est occupé à obtenir des données et à exécuter la logique, tandis que le thread principal est occupé à afficher l'interface utilisateur. Essayer d'exécuter l'animation peut provoquer des chutes de trame et des problèmes de performances lorsque les deux threads sont occupés. Dans ce cas, InteractionManager peut être utilisé. Commencez d'abord l'animation. Une fois l'animation terminée, React Native appellera InteractionManager.runAfterInteractions pour exécuter le code JS. Le code JS appellera ensuite l'API et affichera les données de l'interface utilisateur. Cette méthode aide à éviter la surcharge de threads JS exécutant le code JS et les animations en même temps.

Évitez la rediffusion inutile

Éviter le rendu inutile dans React Native est essentiel pour maintenir des performances optimales. Chaque fois que l'application se redevienne, le thread JS crée un fichier de bundle JS et le passe à travers le pont natif React, puis le remet au thread principal. Plus il y a de refonte de l'application, plus les passes se produisent entre le thread JS et le thread principal, ce qui dégradera les performances de l'application.

Solution 1: composant de mémoire

React.memo est un composant d'ordre supérieur fourni par React pour optimiser les composants de la fonction en empêchant un rediffusion inutile. Lors de l'emballage d'un composant de fonction avec React.memo, React se souviendra de ce composant, ce qui signifie qu'il renforcera le composant que si les accessoires du composant changent. Si les accessoires entre les rendus restent les mêmes, React réutilisera les résultats du rendu précédent, évitant ainsi le coût de rediffusion de la composante.

Solution 2: Utilisez judicieusement la fonction UseCallback

Lorsqu'un composant parent définit une fonction de rappel pour son composant enfant, la fonction de rappel est également recréée chaque fois que le composant parent redevde, entraînant une nouvelle référence de fonction. Par conséquent, le composant enfant le traite comme un changement dans la valeur de la fonction de rappel, ce qui le fait renforcer, même si React.memo est utilisé. Pour atténuer cela, vous pouvez utiliser useCallback pour empêcher les références de fonction de recréation sur chaque re-rendre du composant parent.

Solution 3: Essayez d'éviter de mettre à jour l'état local avec l'état redux

Solution 4: Mémorisez le résultat de la fonction

Solution 5: Évitez les fonctions en ligne

Image optimisée

L'optimisation des images peut améliorer les performances de l'application.

Solution 1: Utilisez des icônes SVG et des images

Solution 2: Utilisez des images WebP pour obtenir une qualité d'image sans perte

Solution 3: Images de cache pour accélérer le rendu

Utilisez un package NPM stable

Utilisez des feuilles de styles pour composer

Utilisez Flatlist pour améliorer les performances

Évitez les fuites de mémoire

Solution 1: déconnectez le minuteur / écouteur / abonnez-vous

Solution 2: Évitez l'utilisation inutile des variables globales

Solution 3: Recyclage RÉFÉRENCE D'OBJET

Réagir à l'outil de débogage et de surveillance des performances natifs

1.

2.

3.

4.

5.

Supprimer le journal de la console

Solution 1: Utilisez la variable _dev_global

Utilisez Babel-Plugin-Transform-Remove-Console

Conclusion

Quoi qu'il en soit, l'optimisation des performances des applications natives React est essentielle pour une expérience utilisateur transparente. En équilibrant les animations, en minimisant la réintention, en optimisant des images et en utilisant des packages NPM stables, les développeurs peuvent améliorer la vitesse et la réactivité de l'application. De plus, tirer parti des outils de débogage efficaces et supprimer les journaux de console inutiles peut encore améliorer les performances. La priorité à ces techniques d'optimisation garantit des performances optimales et une excellente satisfaction des utilisateurs sur le marché des applications concurrentielles d'aujourd'hui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!