Optimisations en React Native

07 décembre, 2023

Technical

Optimisations en React Native

blog image

1 - Mécanisme de React Native

React Native est un framework de développement d'applications mobiles open source créé par Facebook. Il permet aux développeurs de construire des applications pour les plateformes iOS et Android en utilisant JavaScript et React, une bibliothèque de JavaScript pour construire des interfaces utilisateur. ## Principe de Fonctionnement - JavaScript et React : React Native combine le meilleur de React - déclaratif, composant-centré, et le développement JavaScript - avec les capacités des applications mobiles natives. Le code JavaScript est exécuté dans un environnement d'exécution JavaScript séparé, tandis que l'interface utilisateur de l'application est rendue en utilisant les composants natifs de la plateforme. - Pont React Native : Un élément crucial de React Native est le "Pont" (Bridge), qui permet la communication entre le code JavaScript et les composants natifs de la plateforme. Lorsqu'une interaction dans l'application se produit, un message JSON est envoyé à travers le Pont vers le code natif pour effectuer les changements nécessaires sur l'interface utilisateur. - Composants Natifs : Contrairement à d'autres frameworks basés sur le Web, React Native utilise des composants natifs au lieu de WebViews. Cela permet à l'application de bénéficier d'une meilleure performance et d'une apparence cohérente avec les applications natives sur la plateforme. - Hot Reloading : React Native inclut une fonctionnalité de "Hot Reloading", permettant aux développeurs de voir les modifications apportées au code en temps réel sans redémarrer l'application entière. Cela accélère considérablement le processus de développement. - NPM pour les Dépendances : Les développeurs peuvent utiliser Node Package Manager (NPM) pour gérer les dépendances de l'application. Cela facilite l'intégration de bibliothèques et outils tiers. - Interopérabilité avec le Code Natif : Une force majeure de React Native est sa capacité à s'intégrer avec le code natif existant. Cela signifie que les applications peuvent être partiellement construites en React Native et partiellement en code natif, offrant une grande flexibilité.

2 - Utilisation de FlatList ou SectionList pour afficher de grandes listes dans React Native

### FlatList `FlatList` est un composant React Native qui permet d'afficher de longues listes de données de manière efficace et performante. Il ne rend que les éléments actuellement visibles à l'utilisateur, réduisant ainsi l'utilisation de la mémoire et améliorant les performances. Ce composant utilise le rendu paresseux (ou Lazy Loading, oui parce que ça fait bizzare dis en français 😌) pour gérer de grandes listes. Cela signifie que les éléments de la liste sont rendus uniquement lorsqu'ils entrent dans la zone visible à l'écran, réduisant ainsi le travail du processeur et de la mémoire.