En tant que développeur React ou React Native, il est important de comprendre le concept de conteneur et de composants de présentation.
Ces modèles de conception aident à séparer correctement les préoccupations. Vous pouvez utiliser ce concept pour vous assurer que vous structurez votre code de manière plus maintenable et évolutive.
Que sont les composants de conteneur?
Les composants de conteneur, également appelés composants intelligents, sont responsables de la gestion des données et de la logique dans votre application. Ils gèrent des tâches telles que la récupération de données à partir d'une API, la mise à jour de l'état et le traitement des interactions des utilisateurs.
Pour implémenter cette structure, vous pouvez utiliser une bibliothèque telle que React-Redux pour connecter vos composants au magasin et transmettre des données et des actions à vos composants enfants ou composants de présentation.
Que sont les composants de présentation?
Les composants de présentation sont responsables de l'affichage des données de leurs composants parents. Ils sont souvent sans état et se concentrent sur l'interface utilisateur et la représentation visuelle des données.
Cet état les rend faciles à manipuler et à tester, ce qui leur a valu le nom de composants muets. L'état stupide des composants de présentation vous permet de les réutiliser dans l'ensemble de votre application. Cela évite le code moche et répétitif.
Pourquoi utiliser des conteneurs et des composants de présentation?
La réponse courte et simple à la question est: séparation des préoccupations. Il s'agit d'un principe clé dans plusieurs paradigmes, y compris la programmation orientée objet, fonctionnelle et orientée aspect. Cependant, de nombreux développeurs React ont tendance à ignorer ces concepts et à choisir d'écrire du code qui fonctionne.
Un code qui fonctionne, c'est génial, jusqu'à ce qu'il cesse de fonctionner. Un code mal organisé est plus difficile à maintenir et à mettre à jour. Cela peut compliquer l'ajout de nouvelles fonctionnalités ou faire appel à d'autres programmeurs pour travailler sur le projet. La résolution de ces problèmes une fois déjà créés est une charge de travail, et il vaut mieux les prévenir dès le début.
L'application du modèle de conception des conteneurs et des composants de présentation garantit que chaque composant de votre projet a une tâche claire à gérer. Cela permet d'obtenir une structure modulaire où chaque composant optimisé se réunit pour compléter votre application.
Vos composants peuvent encore se chevaucher; la répartition des tâches entre un contenant et un élément de présentation n'est pas toujours distincte. Cependant, en règle générale, vous devez concentrer vos composants de présentation sur les données visuelles et vos composants de conteneur sur les données et la logique.
Comment utiliser les conteneurs et les composants de présentation dans React Native
Dans une application React Native typique, il est courant de créer des composants contenant à la fois du code de présentation et du code lié à la logique. Vous pouvez récupérer des données à partir d'une API, gérer l'état d'un formulaire et afficher la sortie dans une seule classe. Envisagez une application simple qui récupérer une liste d'utilisateurs à partir d'une API et afficher leurs noms et leur âge.
Vous pouvez le faire avec un seul composant, mais cela se traduira par un code difficile à lire, non réutilisable et plus difficile à tester et à maintenir.
Par exemple:
importer Réagir, { useState, useEffect } depuis'réagir';
importer { Affichage, Texte, FlatList } depuis'réagir natif';constante Liste d'utilisateurs = () => {
constante [utilisateurs, setUsers] = useState([]);useEffet(() => {
constante fetchUsers = asynchrone () => {
constante réponse = attendre aller chercher(' https://example.com/users');
constante données = attendre réponse.json();
setUsers (données);
};récupérerUtilisateurs();
}, []);retour (
données={utilisateurs}
keyExtractor={élément => élément.id}
renderItem={({ élément }) => (Nom: {item.name}</Text> Âge: {item.age}</Text>
</View>
)}
/>
);
};
exporterdéfaut Liste d'utilisateur;
Dans cet exemple, Liste d'utilisateur est responsable de la gestion de l'état d'un champ de saisie, de la récupération des données d'une API et du rendu des données.
Le moyen le plus efficace et le plus efficace d'implémenter cela consiste à séparer la logique dans UserList en composants de présentation et de conteneur.
Vous pouvez créer un UserListContainer composant responsable de la récupération et de la gestion des données utilisateur. Il peut ensuite transmettre ces données à un composant de présentation, Liste d'utilisateur, comme accessoire.
importer Réagir, { useState, useEffect } depuis'réagir';// Composant conteneur
constante UserListContainer = () => {
constante [utilisateurs, setUsers] = useState([]);useEffet(() => {
constante fetchUsers = asynchrone () => {
constante réponse = attendre aller chercher(' https://example.com/users');
constante données = attendre réponse.json();
setUsers (données);
};récupérerUtilisateurs();
}, []);retour<Liste d'utilisateurutilisateurs={utilisateurs} />;
};
exporterdéfaut UserListContainer ;
Vous pouvez séparer la présentation en deux composants de présentation: Utilisateur et Liste d'utilisateur. Chacun est responsable de générer simplement un balisage basé sur les accessoires d'entrée qu'il reçoit.
importer { Affichage, Texte, FlatList } depuis'réagir natif';// Composant de présentation
constante Utilisateur = ({ nom Age }) => (Nom: {nom}</Text> Âge: {âge}</Text>
</View>
);
// Composant de présentation
constante Liste d'utilisateurs = ({ utilisateurs }) => (
données={utilisateurs}
keyExtractor={élément => élément.id}
renderItem={({ élément }) => <Utilisateurnom={nom de l'article}âge={item.âge} />}
/>
);
Le nouveau code sépare le composant d'origine en deux composants de présentation, Utilisateur et Liste d'utilisateur, et un composant de conteneur, UserListContainer.
Meilleures pratiques pour la mise en œuvre de conteneurs et de composants de présentation
Lorsque vous utilisez des composants de conteneur et de présentation, il est important de suivre certaines bonnes pratiques pour vous assurer que les composants fonctionnent comme prévu.
- Chaque composant doit avoir un rôle clair et spécifique. Le composant de conteneur doit gérer l'état et le composant de présentation doit gérer la présentation visuelle.
- Dans la mesure du possible, utilisez des composants fonctionnels au lieu de composants de classe. Ils sont plus simples, plus faciles à tester et offrent de meilleures performances.
- Évitez d'inclure une logique ou une fonctionnalité dans un composant sans rapport avec son objectif. Cela aide à garder les composants concentrés et faciles à entretenir et à tester.
- Utilisez des accessoires pour la communication entre les composants, en séparant clairement les problèmes et en évitant les composants étroitement couplés.
- Les mises à jour inutiles de l'état peuvent entraîner des problèmes de performances. Il est donc important de ne mettre à jour l'état que lorsque cela est nécessaire.
Le respect de ces meilleures pratiques garantit que votre conteneur et vos composants de présentation fonctionnent ensemble efficacement pour fournir une solution propre, organisée et évolutive pour gérer l'état et la présentation visuelle dans votre application React Native.
Les avantages de l'utilisation de conteneurs et de composants de présentation
Les composants de conteneur et de présentation peuvent offrir plusieurs avantages. Ils peuvent vous aider à améliorer la structure, la maintenabilité et l'évolutivité de votre code. Ils se traduisent également par une meilleure collaboration et délégation des tâches entre les équipes. Ils peuvent même conduire à une augmentation des performances et à l'optimisation de votre application React Native.
Suivez les meilleures pratiques pour implémenter ces composants et vous pourrez créer des applications React Native meilleures et plus évolutives.
