Props et State
La gestion des données
Props et State dans React
Les props et le state sont deux concepts fondamentaux de React pour la gestion des données. Ils permettent de rendre les composants dynamiques et interactifs.
Les Props
Les props (propriétés) sont un moyen de passer des données d’un composant parent à un composant enfant. Elles sont en lecture seule et ne peuvent pas être modifiées par le composant enfant.
Utilisation des props
// Composant enfant
function UserCard({ name, age, email }) {
return (
<div className="user-card">
<h2>{name}</h2>
<p>Âge : {age}</p>
<p>Email : {email}</p>
</div>
);
}
// Composant parent
function App() {
return (
<div className="app">
<UserCard
name="Marie Dupont"
age={25}
email="marie@example.com"
/>
</div>
);
}
Props par défaut
Vous pouvez définir des valeurs par défaut pour les props :
function Button({ text = "Cliquez-moi", onClick }) {
return <button onClick={onClick}>{text}</button>;
}
Props.children
La prop spéciale children
permet de passer du contenu entre les balises d’un composant :
function Card({ children }) {
return <div className="card">{children}</div>;
}
// Utilisation
<Card>
<h2>Titre</h2>
<p>Contenu</p>
</Card>
Le State
Le state est une façon de gérer les données qui peuvent changer au fil du temps dans un composant. Dans les composants fonctionnels, nous utilisons le Hook useState
.
Utilisation de useState
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Compteur : {count}</p>
<button onClick={() => setCount(count + 1)}>
Incrémenter
</button>
</div>
);
}
State complexe
Pour gérer des objets ou des tableaux dans le state :
function UserProfile() {
const [user, setUser] = useState({
name: 'Marie',
age: 25,
email: 'marie@example.com'
});
const updateName = () => {
setUser({
...user,
name: 'Marie Dupont'
});
};
return (
<div>
<h2>{user.name}</h2>
<button onClick={updateName}>Mettre à jour le nom</button>
</div>
);
}
Différences entre Props et State
-
Props :
- Passées de parent à enfant
- En lecture seule
- Ne peuvent pas être modifiées par le composant enfant
- Déclenchent un re-rendu quand elles changent
-
State :
- Géré localement dans le composant
- Peut être modifié avec setState
- Persiste entre les re-rendus
- Déclenche un re-rendu quand il change
Bonnes pratiques
-
Lifting State Up :
- Élevez le state au plus proche ancêtre commun
- Passez-le en props aux composants enfants
- Permet une meilleure gestion des données partagées
-
Immutabilité :
- Ne modifiez jamais le state directement
- Utilisez toujours setState ou les fonctions de mise à jour
- Créez de nouveaux objets/tableaux au lieu de modifier les existants
-
Initialisation du State :
- Utilisez des valeurs initiales appropriées
- Évitez les calculs complexes dans l’initialisation
- Utilisez des fonctions d’initialisation pour les calculs coûteux
Exercices pratiques
-
Créez un composant
TodoList
qui :- Affiche une liste de tâches
- Permet d’ajouter une nouvelle tâche
- Permet de marquer une tâche comme terminée
-
Créez un composant
ThemeSwitcher
qui :- Alterne entre un thème clair et sombre
- Persiste le choix de l’utilisateur
- Applique le thème à toute l’application
-
Créez un composant
Form
qui :- Gère plusieurs champs de formulaire
- Valide les entrées
- Affiche des messages d’erreur
Conclusion
Les props et le state sont essentiels pour créer des applications React interactives. Dans le prochain chapitre, nous allons explorer les Hooks React, qui offrent des fonctionnalités plus avancées pour la gestion du state et des effets secondaires.
Commentaires
Les commentaires sont alimentés par GitHub Discussions
Connectez-vous avec GitHub pour participer à la discussion