React Components Basés sur des Classes : Maîtrisez Leurs Fonctionnalités

1. Qu'est-ce qu'un Composant Basé sur une Classe ?

Un composant basé sur une classe est une classe JavaScript qui hérite de React.Component. Il possède plusieurs caractéristiques distinctives :

• État local : Les composants basés sur des classes peuvent avoir leur propre état via this.state.
• Méthodes de cycle de vie : Ils permettent d'utiliser des méthodes spéciales appelées "méthodes de cycle de vie" pour exécuter du code à des moments précis du cycle de vie du composant.
• Contexte explicite (this) : Contrairement aux composants fonctionnels, vous devez souvent lier explicitement les fonctions au contexte this.

2. Gestion de l'État avec this.state

Voici un exemple simple où un composant basé sur une classe gère un compteur :

📋 Copier le code

class Compteur extends React.Component {
constructor(props) {
super(props);
this.state = { compte: 0 }; // Initialisation de l'état
this.incrementer = this.incrementer.bind(this); // Lie la fonction au contexte "this"
}

incrementer() {
this.setState({ compte: this.state.compte + 1 }); // Mise à jour de l'état
}

render() {
return (
<div>
	<p>Vous avez cliqué {this.state.compte} fois.</p>
	<button onClick={this.incrementer}>
		Cliquez ici
	</button>
</div>
);
}
}

ReactDOM.render(<Compteur />, document.getElementById('root'));

Explication détaillée :

1. class Compteur extends React.Component { ... } :
   • Cette ligne définit une classe appelée Compteur qui hérite de React.Component.
2. constructor(props) { ... } :
   • Le constructeur est une méthode spéciale appelée lorsqu'une instance de la classe est créée.
   • super(props) : Appel obligatoire pour initialiser correctement la classe parente React.Component.
   • this.state = { compte: 0 }; : Initialise l'état local avec une propriété compte définie à 0.
   • this.incrementer = this.incrementer.bind(this); : Lie explicitement la fonction incrementer au contexte this pour éviter des erreurs lors de l'exécution.
3. incrementer() { ... } :
   • Cette fonction met à jour l'état compte en incrémentant sa valeur de 1.
   • this.setState({ compte: this.state.compte + 1 }); : Met à jour l'état de manière asynchrone.
4. render() { ... } :
   • Cette méthode est obligatoire dans tous les composants basés sur des classes.
   • Elle retourne une structure JSX qui décrit ce que le composant doit afficher.
5. ReactDOM.render(<Compteur />, document.getElementById('root')); :
   • Cette ligne rend le composant Compteur dans l'élément HTML ayant l'id root.

3. Méthodes de Cycle de Vie

Les composants basés sur des classes incluent des méthodes de cycle de vie qui permettent d'exécuter du code à des moments spécifiques de leur existence. Voici quelques méthodes courantes :

• componentDidMount() : Exécutée après que le composant a été monté (ajouté au DOM).
• componentDidUpdate() : Exécutée après chaque mise à jour de l'état ou des props.
• componentWillUnmount() : Exécutée juste avant que le composant soit démonté (retiré du DOM).

Exemple : Utilisation de componentDidMount

Voici un exemple où nous utilisons componentDidMount pour charger des données depuis une API lorsque le composant est monté :

📋 Copier le code

class Horloge extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() }; // Initialisation de l'état avec la date actuelle
}

componentDidMount() {
this.timerID = setInterval(() => {
this.setState({ date: new Date() }); // Met à jour l'état toutes les secondes
}, 1000);
}

componentWillUnmount() {
clearInterval(this.timerID); // Nettoie l'intervalle lorsque le composant est démonté
}

render() {
return (
<div>
	<h1>Heure actuelle :</h1>
	<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}

ReactDOM.render(<Horloge />, document.getElementById('root'));

Explication détaillée :

1. constructor(props) { ... } :
   • Initialise l'état avec la date actuelle.
2. componentDidMount() { ... } :
   • Cette méthode est appelée après que le composant a été monté dans le DOM.
   • setInterval(...) crée un intervalle qui met à jour l'état toutes les secondes.
3. componentWillUnmount() { ... } :
   • Cette méthode est appelée juste avant que le composant soit démonté.
   • clearInterval(this.timerID) arrête l'intervalle pour éviter des fuites mémoire.
4. render() { ... } :
   • Cette méthode retourne une structure JSX contenant l'heure actuelle extraite de l'état.

4. Passage de Props dans les Composants Basés sur des Classes

Les props peuvent également être utilisées dans les composants basés sur des classes. Voici un exemple où une prop est passée pour personnaliser un message :

📋 Copier le code

class Saluer extends React.Component {
render() {
return <h1>Bonjour, {this.props.nom} !</h1>;
}
}

ReactDOM.render(<Saluer nom="Alice" />, document.getElementById('root'));

Explication détaillée :

1. class Saluer extends React.Component { ... } :
   • Définit une classe appelée Saluer qui hérite de React.Component.
2. return <h1>Bonjour, {this.props.nom} !</h1>; :
   • Retourne du JSX contenant une balise <h1> avec une prop appelée nom.
   • {this.props.nom} insère dynamiquement la valeur de la prop nom dans le texte affiché.
3. ReactDOM.render(<Saluer nom="Alice" />, document.getElementById('root')); :
   • Rend le composant Saluer avec la prop nom définie à Alice.

5. Exemple Complet : Formulaire avec État et Validation

Imaginons que vous souhaitez créer un formulaire qui utilise un composant basé sur une classe pour gérer l'état et valider les entrées utilisateur. Voici comment cela peut être fait :

📋 Copier le code

class Formulaire extends React.Component {
constructor(props) {
super(props);
this.state = {
nom: '',
erreurs: {}
};
this.handleChange = this.handleChange.bind(this); // Lie la fonction au contexte "this"
this.handleSubmit = this.handleSubmit.bind(this); // Lie la fonction au contexte "this"
}

handleChange(event) {
this.setState({ nom: event.target.value });
}

handleSubmit(event) {
event.preventDefault(); // Empêche le rechargement de la page
const erreurs = {};
if (this.state.nom.trim() === '') erreurs.nom = 'Le champ "Nom" est obligatoire.';
this.setState({ erreurs });
if (Object.keys(erreurs).length === 0) {
alert(`Merci, ${this.state.nom} !`);
}
}

render() {
return (
<form onSubmit={this.handleSubmit}>
	<label>
		Nom :
		<input type="text" value={this.state.nom} onChange={this.handleChange} />
	</label>
	{this.state.erreurs.nom && <p style={{ color: 'red' }}>{this.state.erreurs.nom}</p>}
	<button type="submit">Envoyer</button>
</form>
);
}
}

ReactDOM.render(<Formulaire />, document.getElementById('root'));

Explication détaillée :

1. constructor(props) { ... } :
   • Initialise l'état avec deux propriétés : nom (chaîne vide) et erreurs (objet vide).
   • this.handleChange = this.handleChange.bind(this); et this.handleSubmit = this.handleSubmit.bind(this); : Lient explicitement les fonctions handleChange et handleSubmit au contexte this.
2. handleChange(event) { ... } :
   • Met à jour l'état nom avec la valeur saisie dans le champ de texte.
3. handleSubmit(event) { ... } :
   • Empêche le comportement par défaut du navigateur lors de la soumission du formulaire.
   • Vérifie si le champ nom est rempli. Si non, ajoute un message d'erreur dans l'état.
   • Si aucune erreur, affiche une alerte personnalisée contenant le nom saisi.
4. {this.state.erreurs.nom && <p style={{ color: 'red' }}>{this.state.erreurs.nom}</p>} :
   • Affiche un message d'erreur en rouge sous le champ de texte si une erreur existe.

6. Meilleures Pratiques pour les Composants Basés sur des Classes

Pour écrire des composants basés sur des classes efficaces et maintenables, voici quelques conseils :

• Liez toujours les fonctions au contexte this : Utilisez .bind(this) dans le constructeur ou des fonctions fléchées pour éviter des problèmes de contexte.
• Utilisez les méthodes de cycle de vie judicieusement : Elles sont utiles pour exécuter du code à des moments précis, mais peuvent compliquer le code si surutilisées.
• Passez progressivement aux composants fonctionnels : Avec les hooks, les composants fonctionnels offrent une syntaxe plus concise et performante.

Conclusion

Vous avez maintenant appris à créer et utiliser des composants basés sur des classes dans React. Bien qu'ils soient moins courants aujourd'hui avec l'introduction des hooks, ils restent une méthode puissante pour gérer l'état et le cycle de vie dans vos applications React.

Prochain chapitre : Props dans React