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 à la bonne séparation des préoccupations. Vous pouvez utiliser ce concept pour vous assurer que vous structurez votre code d’une 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 de votre application. Ils gèrent des tâches telles que l’extraction de données d’une API, la mise à jour de l’état et le traitement des interactions avec les utilisateurs.
Pour mettre en œuvre cette structure, vous pouvez utiliser une bibliothèque telle que React-Redux pour connecter vos composants au magasin et transmettre les données et les actions aux composants enfants ou aux 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 vaut le nom de composants muets. L’état sans état des composants de présentation vous permet de les réutiliser dans l’ensemble de votre application. Cela permet d’éviter le code inutile et répétitif.
Pourquoi utiliser les conteneurs et les composants de présentation ?
La réponse courte et simple à cette question est : la séparation des préoccupations. Il s’agit d’un principe clé dans plusieurs paradigmes, notamment 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 tout simplement.
Le code qui fonctionne simplement est génial, jusqu’à ce qu’il cesse de fonctionner. Un code mal organisé est plus difficile à maintenir et à mettre à jour. Il peut être difficile d’ajouter de nouvelles fonctionnalités ou de faire appel à d’autres programmeurs pour travailler sur le projet. La résolution de ces problèmes une fois qu’ils ont été créés représente une charge de travail, et il vaut mieux les prévenir dès le départ.
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 précise à accomplir. Cela permet d’obtenir une structure modulaire où chaque composant optimisé s’assemble pour compléter votre application.
Vos composants peuvent encore se chevaucher ; la répartition des tâches entre un conteneur et un composant de présentation n’est pas toujours distincte. Cependant, en règle générale, vous devriez 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 composants de présentation et de conteneur dans React Native ?
Dans une application React Native typique, il est courant de créer des composants qui contiennent à la fois du code lié à la présentation et à la logique. Vous pourriez récupérer des données à partir d’une API, gérer l’état d’un formulaire et afficher la sortie, le tout dans une seule classe. Prenons l’exemple d’une application simple qui récupère une liste d’utilisateurs à partir d’une API et affiche leur nom et leur âge.
Vous pouvez faire cela avec un seul composant, mais le résultat sera un code difficile à lire, non réutilisable, et plus difficile à tester et à maintenir.
Par exemple :
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<View>
<Text>Name: {item.name}</Text>
<Text>Age: {item.age}</Text>
</View>
)}
/>
);
};
export default UserList;
Dans cet exemple, Liste des utilisateurs est responsable de la gestion de l’état d’un champ de saisie, de l’extraction de données d’une API et de l’affichage des données.
La meilleure façon d’implémenter ceci est de séparer la logique de UserList en composants de présentation et de conteneur.
Vous pouvez créer un UserListContainer qui est responsable de l’extraction et de la gestion des données sur les utilisateurs. Il peut ensuite transmettre ces données à un composant de présentation, Liste des utilisateurscomme un accessoire.
import React, { useState, useEffect } from 'react';
// Container Component
const UserListContainer = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return <UserList users={users} />;
};
export default UserListContainer;
Vous pouvez séparer la présentation entre deux composants de présentation : Utilisateur et Liste des utilisateurs. Chacun d’entre eux est chargé de générer simplement du balisage sur la base des props d’entrée qu’ils reçoivent.
import { View, Text, FlatList } from 'react-native';
// Presentational Component
const User = ({ name, age }) => (
<View>
<Text>Name: {name}</Text>
<Text>Age: {age}</Text>
</View>
);
// Presentational Component
const UserList = ({ users }) => (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => <User name={item.name} age={item.age} />}
/>
);
Le nouveau code sépare le composant original en deux composants de présentation, Utilisateur et Liste des utilisateurset un composant conteneur, UserListContainer.
Meilleures pratiques pour la mise en œuvre des composants de conteneur et de présentation
Lorsque vous utilisez des composants de conteneur et de présentation, il est important de suivre certaines bonnes pratiques pour garantir que les composants fonctionnent comme prévu.
- Chaque composant doit avoir un rôle clair et spécifique. Le composant 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 plutôt que des composants de classe. Ils sont plus simples, plus faciles à tester et offrent de meilleures performances.
- Évitez d’inclure dans un composant une logique ou une fonctionnalité qui n’est pas pertinente pour son objectif. Cela permet de garder les composants concentrés et faciles à maintenir et à tester.
- Utilisez des accessoires pour la communication entre les composants, en séparant clairement les préoccupations et en évitant les composants étroitement couplés.
- Les mises à jour inutiles de l’état peuvent entraîner des problèmes de performance. Il est donc important de ne mettre à jour l’état que lorsque cela est nécessaire.
Le respect de ces bonnes pratiques permet de s’assurer que votre conteneur et vos composants de présentation fonctionnent ensemble efficacement pour fournir une solution propre, organisée et évolutive pour la gestion de l’état et de la présentation visuelle dans votre application React Native.
Les avantages de l’utilisation des composants de conteneur et de présentation
Les composants de conteneur et de présentation peuvent offrir plusieurs avantages. Ils peuvent contribuer à améliorer la structure de votre code, sa maintenabilité et son évolutivité. Ils entraînent également une meilleure collaboration et délégation des tâches entre les équipes. Ils peuvent même conduire à une augmentation des performances et à une optimisation de votre application React Native.
Suivez les meilleures pratiques pour la mise en œuvre de ces composants, et vous pourrez créer des apps React Native plus performantes et plus évolutives.
