ReactJS - Composants de haut niveau : Un guide pour les débutants

Bonjour là-bas, futurs magiciens de React ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des Composants de Haut Niveau (HOCs) dans ReactJS. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je serai votre guide amical, et nous avancerons pas à pas. À la fin de ce tutoriel, vous serez capable de créer des HOCs comme un pro !

Qu'est-ce que les Composants de Haut Niveau ?

Avant de plonger dedans, comprenons ce que sont les Composants de Haut Niveau. Imaginez que vous êtes dans un snack-bar. Vous commandez un burger simple, mais puis vous décidez d'ajouter du fromage, des laitues et du bacon. Le processus d'ajout de ces extras à votre burger est similaire à ce que font les HOCs dans React !

En termes de React, un Composant de Haut Niveau est une fonction qui prend un composant et retourne un nouveau composant avec une certaine fonctionnalité ajoutée. C'est comme une sauce spéciale qui améliore vos composants existants sans changer leurs ingrédients de base.

Voici une analogie simple :

// Cela correspond à notre burger simple
const PlainBurger = () => <div>?</div>;

// Cela est notre HOC, comme ajouter des garnitures
const addCheese = (Burger) => {
return () => (
<div>
<Burger />
<span>?</span>
</div>
);
};

// Voici notre burger amélioré avec du fromage !
const CheeseBurger = addCheese(PlainBurger);

Dans cet exemple, addCheese est notre Composant de Haut Niveau. Il prend notre PlainBurger et retourne un nouveau composant avec du fromage ajouté !

Comment utiliser les Composants de Haut Niveau

Maintenant que nous comprenons le concept, voyons comment nous pouvons utiliser les HOCs dans une situation plus pratique. Disons que nous avons plusieurs composants qui doivent récupérer des données d'une API. Au lieu d'écrire le même logic de récupération dans chaque composant, nous pouvons créer un HOC pour s'occuper de cela pour nous.

Voici comment nous pourrions faire cela :

import React, { useState, useEffect } from 'react';

// Cela est notre HOC
function withDataFetching(WrappedComponent, dataSource) {
return function(props) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch(dataSource)
.then(response => response.json())
.then(result => {
setData(result);
setLoading(false);
})
.catch(e => {
setError(e);
setLoading(false);
});
}, []);

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;

return <WrappedComponent data={data} {...props} />;
}
}

// Voici un composant simple qui recevra les données récupérées
function UserList({ data }) {
return (
<ul>
{data.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}

// Nous utilisons notre HOC pour créer un nouveau composant avec des capacités de récupération de données
const UserListWithData = withDataFetching(UserList, 'https://api.example.com/users');

// Maintenant nous pouvons utiliser UserListWithData dans notre application !
function App() {
return (
<div>
<h1>Liste des Utilisateurs</h1>
<UserListWithData />
</div>
);
}

Reprenons cela :

1. Nous définissons notre HOC withDataFetching. Il prend deux paramètres : le composant que nous voulons envelopper (WrappedComponent) et l'URL à partir de laquelle récupérer les données (dataSource).

2. À l'intérieur de withDataFetching, nous créons et retournons un nouveau composant fonctionnel. Ce composant utilise des hooks de React pour gérer l'état et les effets secondaires.

3. Nous utilisons useState pour gérer nos états data, loading, et error.

4. Nous utilisons useEffect pour récupérer les données lorsque le composant est monté. Une fois les données récupérées, nous mettons à jour notre état en conséquence.

5. En fonction de l'état, nous affichons un message de chargement, un message d'erreur, ou nous rendrons le WrappedComponent avec les données récupérées.

6. Nous créons un composant simple UserList qui s'attend à recevoir des données comme prop et les rend.

7. Nous utilisons notre HOC pour créer un nouveau composant UserListWithData qui a des capacités de récupération de données.

8. Enfin, nous utilisons UserListWithData dans notre composant App.

Applications des Composants de Haut Niveau

Maintenant que nous avons vu comment créer et utiliser un HOC, examinons quelques cas d'utilisation courants et meilleures pratiques.

HOC d'Authentification

Un usage commun des HOCs est de gérer l'authentification. Voici un exemple :

function withAuth(WrappedComponent) {
return function(props) {
const [isAuthenticated, setIsAuthenticated] = useState(false);

useEffect(() => {
// Vérifier si l'utilisateur est authentifié
const token = localStorage.getItem('token');
setIsAuthenticated(!!token);
}, []);

if (!isAuthenticated) {
return <Redirect to="/login" />;
}

return <WrappedComponent {...props} />;
}
}

// Utilisation
const ProtectedComponent = withAuth(SensitiveDataComponent);

Ce HOC vérifie si l'utilisateur est authentifié avant de rendre le composant enveloppé. Si ce n'est pas le cas, il redirige vers une page de connexion.

HOC de Journalisation

Un autre usage utile est d'ajouter une journalisation aux composants :

function withLogging(WrappedComponent) {
return function(props) {
useEffect(() => {
console.log(`Composant ${WrappedComponent.name} monté`);
return () => console.log(`Composant ${WrappedComponent.name} démonté`);
}, []);

return <WrappedComponent {...props} />;
}
}

// Utilisation
const LoggedComponent = withLogging(MyComponent);

Ce HOC journalise lorsque le composant est monté et démonté, ce qui peut être très utile pour le débogage.

Meilleures Pratiques et Considérations

Lorsque vous travaillez avec des HOCs, gardez ces conseils à l'esprit :

1. Ne modifiez pas le composant original :Composez toujours le composant original avec la nouvelle fonctionnalité.
2. Transmettez les props non liées : Assurez-vous de transmettre toutes les props qui ne sont pas spécifiques au HOC.
3. Maximisez la compositionnabilité : Les HOCs devraient pouvoir être composés avec d'autres HOCs.
4. Enveloppez le nom de l'affichage pour un débogage facile : Utilisez React.displayName pour donner à votre HOC un nom clair dans React DevTools.

Voici un tableau résumant quelques modèles courants de HOC :

Modèle	Description	Cas d'utilisation exemple
Proxy de Props	Manipuler les props	Ajouter/modifier les props
Inversion de l'Héritage	Étendre le cycle de vie du composant	Ajouter un journal à des méthodes de cycle de vie
拦截渲染	Contrôler la sortie de rendu	Rendu conditionnel
Abstraction d'État	Gérer et fournir l'état	Récupérer et fournir des données

Souvenez-vous, les Composants de Haut Niveau sont un outil puissant dans votre boîte à outils React, mais ils ne sont pas toujours la meilleure solution. Avec l'introduction des Hooks dans React, certains cas d'utilisation des HOCs peuvent être résolus plus élégamment avec des hooks personnalisés. Toujours considérez les besoins spécifiques de votre application lorsque vous décidez d'utiliser des HOCs, des hooks ou d'autres modèles.

Et voilà, camarades ! Vous avez appena fait vos premiers pas dans le monde des Composants de Haut Niveau dans React. Pratiquez ces concepts, expérimentez avec vos propres HOCs, et bientôt vous serez capable de composer des composants comme un maestro conduit un orchestre. Bon codage !

Credits: Image by storyset