Fermer

septembre 28, 2021

Composant de classe React vs composant fonctionnel : comment choisir


Il existe deux manières de créer un composant dans React : un composant de classe ou un composant fonctionnel. Cet article démystifie la différence entre les deux et comment choisir celui qui convient le mieux à votre projet.

Les composants sont les éléments constitutifs de base de votre application React. Ils vous permettent de diviser l'interface utilisateur en morceaux réutilisables qui peuvent être réutilisés et utilisés indépendamment.

Il existe deux façons de créer des composants dans React : le composant de classe ou le composant fonctionnel. Cet article expliquera les différences entre les composants de classe et fonctionnels et comment choisir entre eux. Si vous êtes un développeur React ou si vous débutez dans React, cet article clarifie une partie de la confusion entre ces deux types de composants dans React.

Différences entre le composant de classe et le composant fonctionnel

Composant de classe

Le composant de classe , un composant avec état/conteneur, est une classe ES6 standard qui étend la classe de composant de la bibliothèque React. C'est ce qu'on appelle un composant avec état car il contrôle la façon dont l'état change et la mise en œuvre de la logique du composant. En dehors de cela, ils ont accès à toutes les différentes phases d'une méthode de cycle de vie React.

Avant l'avènement des crochets React, le composant de classe était la seule option pour créer un composant dynamique et réutilisable car il nous donnait accès aux méthodes de cycle de vie. et toutes les fonctionnalités de React.

Pour démontrer l'utilisation du composant de classe, créons un simple composant Counter qui permet aux utilisateurs d'augmenter ou de diminuer un nombre. Nous allons également présenter quelques méthodes de cycle de vie dans notre exemple ci-dessous.


class Counter extends React.Component {
     constructor (accessoires) {
       super(accessoires);
       ceci.état =[19659013]{ count: 0 };
     }
    
     componentDidMount() {
       this .setState({ count: this.state.count + 1[19659013]});
     }
    
    handleIncrement = () => {
       this.[19659033]setState({ count: this.state.count + 1[19659013]});
     };
    
    handleDecrement = () => {
       this .setState({ count: this.state.count - 1[19659013]});
    };

     rendu() {
       retour (
         < div className="counter">
           <h1 className="count">{this .state.count}</h1>
    
           <type de bouton=" bouton" onClick={this.handleIncrement}>
             Incrément
           </bouton>
           <type de bouton="bouton" onClick={ this.handleDecrement}>
             Décrémenter
           </bouton>
         </div>
       );
     }
}[19659118]export default Counter;

Dans notre exemple de composant ci-dessus, nous définissons l'état initial avec le constructeur et utilisons la méthode de cycle de vie componentDidMount() pour définir l'état de 0 à 1 lorsque le composant est monté, car nous ne voulons pas que le décompte commence à 0.

Si vous essayez l'exemple live ici, vous remarquerez que les décomptes 0 et 1 sont affichés peu de temps après l'autre. Lorsque le composant est rendu pour la première fois, il affichera rapidement le nombre de 0 à partir de l'état initial, alors qu'après le montage du composant, le componentDidMount s'exécutera pour définir un nouvel état de comptage de 1.

Nous implémentons également deux fonctionnalités pour le composant (les fonctions handleIncrement() et handleDecrement()) pour augmenter et diminuer le compteur lorsque l'utilisateur clique sur le bouton d'incrémentation ou de décrémentation.

Vous pouvez voir pour le composant basé sur les classes, nous avons suivi plusieurs étapes pour créer ce composant dynamique . Nous avons créé la classe avec un constructeur et une méthode de rendu. Nous définissons l'état initial avec l'instruction this.state dans le constructeur. Nous utilisons this.setState() pour mettre à jour les états et la méthode de cycle de vie comme componentDidMount pour mettre à jour instantanément l'état lorsque le composant est monté.

Maintenant, convertissons le composant de classe en un composant fonctionnel pour les différencier.

Composant fonctionnel

Les composants fonctionnels sont simplement des fonctions JavaScript. Avant l'avènement des hooks dans React 16.8, ils étaient principalement appelés composants sans état ou de présentation, car ils n'acceptaient et ne renvoyaient que des données à restituer au DOM.

Avant, le composant de classe était la seule option pour accéder à plus de React. des fonctionnalités telles que les méthodes d'état et de cycle de vie React. Cependant, avec les hooks, vous pouvez implémenter l'état et d'autres fonctionnalités de React, et, plus important encore, vous pouvez écrire l'intégralité de votre interface utilisateur avec des composants fonctionnels.

Avec les hooks, la composition de composants dans React est plus simple. React a deux hooks les plus couramment utilisés : les hooks state (useState) et effect (useEffect). Nous allons montrer comment utiliser les deux dans l'exemple ci-dessous. Cependant, si vous débutez avec React, vous pouvez en savoir plus sur les crochets React ici.

Pour démontrer la différence entre les composants fonctionnels et de classe, réimplémentons le composant Counter de classe précédent en un composant fonctionnel.


const App = () => {
 const [count, setCount] = useState(0);

 useEffect(() =>[19659140]setCount((currentCount) => currentCount + 1), [ ]);

 const handleIncrement = () => setCount((currentCount ) => currentCount + 1);[1 9659161]const handleDecrement = () => setCount((currentCount) => currentCount - 1);

 return (
   <div className="counter"> 
     <h1 className="count">{count}</h1 >

     <type de bouton="bouton" onClick={handleIncrement}>
       Incrément
     </bouton>
     <type de bouton="bouton" onClick={ poignéeDécrément}>
       Décrémenter
     </bouton>
   </div>
 );
};[19659118]export default App;

Comme vous comprenez déjà ce que fait ce composant Counter à partir de notre explication précédente, regardons comment les composants fonctionnels implémentent cela par rapport au composant de classe.

Premier de tout, vous n'avez pas besoin d'un constructeur ou des méthodes de rendu car c'est juste une fonction et non une classe. Les crochets vous permettent d'intégrer toutes les fonctionnalités nécessaires de React Library auparavant disponibles uniquement pour le composant de classe, donc avec useState, vous pouvez ajouter des états aux composants fonctionnels. Comme nous l'avons fait ci-dessus nous avons importé useState de React pour définir l'état initial de count à 0. Le hook useState renverra une paire de valeurs : l'état actuel et une fonction qui le met à jour. Jetez un œil à la section de code ci-dessous par rapport à la façon dont nous implémentons les états dans le composant de classe avec this.state et this.setState.

Const [count, setCount ] = useState(0);

Le hook d'état renverra une paire de valeurs : le nombre actuel et une fonction setCount qui met à jour l'état compter. Pouvez-vous voir à quel point il est simple d'implémenter des états dans un composant fonctionnel ?

Si vous avez déjà travaillé avec le composant de classe, vous devez être familiarisé avec les méthodes de cycle de vie React telles que componentDidMount et componentWillUnmount. Avant, nous n'avions pas cette capacité dans les composants fonctionnels, mais maintenant avec le hook useEffect, vous pouvez implémenter les méthodes de cycle de vie React. Le crochet d'effet vous permet d'effectuer des effets secondaires dans les composants fonctionnels. Vous pouvez considérer useEffect comme componentDidMount, componentDidUpdate et componentWillUnmount combinés. ](() => setCount((currentCount) => currentCount +[19659023]1), []);

Avec ce hook d'effet, vous informez React que votre composant doit faire quelque chose après le rendu. Ensuite, React se souviendra de la fonction que vous avez transmise et l'appellera plus tard après avoir effectué les mises à jour du DOM.

Ainsi, dans l'exemple ci-dessus, nous définissons la variable d'état count, puis nous disons à React que nous devons utiliser un effet. Une fonction est passée au hook useEffect. Cette fonction que nous avons passée est notre effet, et à l'intérieur de notre effet, nous avons mis à jour le nombre d'états. Vous remarquerez que les comptes 0 et 1 s'affichent peu de temps après l'autre. Le premier rendu du composant affiche le nombre de 0 à partir de l'état initial. Ensuite, une fois le composant monté, le hook useEffect s'exécutera pour mettre à jour le nouvel état de comptage à 1.

De plus, si vous regardez la fonction useEffect, vous remarquerez le tableau vide comme deuxième argument. Cela permet de s'assurer que le hook d'effet ne se déclenche que lorsque le composant se monte et se démonte. Si vous expérimentez en supprimant le deuxième argument, vous vous retrouverez dans une boucle infinie d'augmentation du nombre de 1. C'est parce que le hook d'effet s'exécute toujours après que l'état a changé. Étant donné que le hook d'effet déclenche un autre changement d'état, il s'exécutera encore et encore pour augmenter le nombre.

C'est beaucoup d'explications – juste essayer de clarifier pour ceux qui découvrent React. ]Syntaxe
D'après la démonstration, la différence apparente est la syntaxe. Personnellement, j'ai trouvé le composant fonctionnel plus facile à comprendre par rapport au composant de classe, bien que cela puisse être différent pour un développeur de la programmation orientée objet comme Java.

Le composant de classe utilise la syntaxe de classe ES6, et il étend les composants React avec un méthode de rendu qui renvoie les éléments React. D'autre part, les composants fonctionnels avec des crochets sont des fonctions purement JavaScript qui renvoient également des éléments React.

Méthodes d'état et de cycle de vie
Avant l'introduction des crochets, les composants fonctionnels étaient sans état. Cependant, avec React 16.8, vous pouvez implémenter des états avec le hook useState pour créer un composant avec état (tout comme le composant de classe).

De plus, avec les méthodes de cycle de vie, vous pouvez utiliser le hook useEffect avec des composants fonctionnels pour obtenir le même effet. comme vous le feriez avec les méthodes de cycle de vie telles que componentDidMount, componentDidUpdate et componentWillUnmount combinés avec le composant de classe.

Vous pouvez en savoir plus sur les états et les méthodes de cycle de vie dans le composant React ici.

Comment choisir entre les fonctions ou Composant de classe

Après avoir expliqué les différences entre les deux composants et comment ils sont utilisés pour construire des composants dans React, nous verrons comment choisir entre les composants de classe et fonctionnels dans cette section. Et découvrez également les raisons pour lesquelles il faut toujours considérer les composants fonctionnels dans vos nouvelles applications React.

Néanmoins, ce n'est pas un jugement entre les deux. D'expérience, les développeurs de React ont des opinions et des préférences différentes entre les deux composants. Donc, si vous avez des opinions différentes sur cette section, veuillez partager et m'engager dans la section des commentaires.

Avant de continuer, nous devons comprendre pourquoi des composants fonctionnels ont été introduits pour remplacer le composant de classe. Selon l'équipe React, ce sont les motivations pour introduire des hooks dans les composants fonctionnels :

  • Il est difficile de réutiliser la logique avec état entre les composants du composant de classe.
  • Les composants complexes sont difficiles à comprendre dans le composant de classe.[19659261]La classe confond à la fois les personnes et les machines.

En savoir plus sur les motivations dans les React Docs.

L'équipe React a recommandé que les nouvelles applications soient créées avec des composants et des crochets fonctionnels. Ainsi, vous devriez vraiment considérer l'approche des composants fonctionnels lorsque vous travaillez avec un nouveau projet React, à moins que votre équipe ne préfère l'approche basée sur les classes. Mais, si vous débutez avec React, la connaissance du composant de classe est également utile. Vous devrez peut-être migrer une base de code héritée écrite avec un composant de classe vers un composant fonctionnel.

À mon avis, je partagerai avec vous mon expérience de travail avec les composants de classe et fonctionnels. Pourquoi vous devriez toujours choisir des composants fonctionnels :

  • Les composants fonctionnels avec des crochets sont concis et plus simples à coder. Ils fonctionnent exactement comme le composant de classe ; cela n'implique aucune différence entre les deux autres que la syntaxe.
  • En utilisant uniquement des composants fonctionnels dans votre projet, vous éliminez considérablement le besoin de refactoriser le composant de classe en un composant fonctionnel lorsqu'il grandit.
  • Comme les classes confondent à la fois les personnes et machines, en particulier le mot-clé this, vous n'avez plus à vous en soucier dans les composants fonctionnels. dans une approche basée sur les classes.

De plus, l'équipe de React a récemment annoncé que la documentation de React se concentrerait sur l'explication de React à l'aide de composants fonctionnels et de crochets. Cette mise à jour ne signifie pas que le composant de classe sera obsolète, il sera toujours là pour les années à venir. De même, les documents des composants de classe seront toujours disponibles pour les développeurs qui ont besoin de les utiliser.

Conclusion

J'espère que vous avez apprécié la lecture de cet article. Nous avons expliqué les différences entre les deux approches de composition de composants dans React. Le composant de classe est une classe ES6 standard qui étend la bibliothèque de composants React pour créer un composant avec état. En revanche, les composants fonctionnels avec des crochets peuvent être utilisés pour créer des composants avec état ou de présentation. Nous avons également expliqué comment choisir entre les deux composants et pourquoi vous devriez toujours considérer les composants fonctionnels dans vos projets React.




Source link