Pourquoi les composants fonctionnels surpassent les composants de classe / Blogs / Perficient

Introduction
À mesure que le développement de React continue d’évoluer, l’essor des composants fonctionnels et des hooks a considérablement transformé la façon dont nous construisons des applications. Dans ce blog, nous découvrirons la magie qui se cache derrière les composants fonctionnels et explorerons pourquoi ils émergent comme les super-héros du développement React moderne. Alors préparez-vous à un voyage vers la simplicité et la puissance, appuyé par des exemples qui vous feront sans aucun doute apprécier l’efficacité qu’ils apportent.

Qu’est-ce que le composant fonctionnel ?
Un composant fonctionnel dans React est une fonction JavaScript qui renvoie un élément React, représentant une partie de l’interface utilisateur. Les composants fonctionnels sont principalement utilisés pour présenter les éléments de l’interface utilisateur et, avec l’introduction de React Hooks, peuvent également gérer l’état local et les effets secondaires.

Dans cet exemple:

• ‘MyFunctionalComponent’ est un composant fonctionnel.
• Il prend comme paramètre des accessoires, qui sont un objet contenant des propriétés transmises au composant.
• Le composant renvoie JSX, décrivant la structure et le contenu de l’interface utilisateur qu’il représente.

Qu’est-ce qu’un composant de classe ?
Un composant de classe dans React est une classe JavaScript qui étend la classe « React.Component ». Les composants de classe sont traditionnellement utilisés pour créer des éléments d’interface utilisateur plus complexes qui nécessitent une gestion d’état, des méthodes de cycle de vie et des fonctionnalités supplémentaires. Avec l’introduction de React Hooks dans React.

Dans cet exemple :

• Message de bienvenue est un composant de classe qui étend Réagir.Component.
• Le constructeur La méthode initialise l’état du composant avec un message d’accueil par défaut.
• Le mise à jourSalut La méthode modifie le message d’accueil lorsque vous cliquez sur le bouton « Mettre à jour le message d’accueil ».
• Le rendre La méthode renvoie JSX, affichant le message d’accueil et un bouton.

Dans quelle mesure les composants fonctionnels sont-ils efficaces par rapport aux composants de classe ?

1. Simplicité et lecture facile: Les composants fonctionnels sont plus simples et plus faciles à comprendre que les composants de classe. Avec des hooks comme useState et useEffect, nous pouvons éviter d’écrire beaucoup de code supplémentaire dont les composants de classe ont généralement besoin. Cela rend nos composants plus propres et plus faciles à lire.

Composant fonctionnel

2. Avantages en termes de performances : Les composants fonctionnels peuvent tirer parti de la mémorisation de React et de la note composant d’ordre supérieur pour optimiser le rendu. Cela garantit qu’un composant n’est restitué que lorsque ses accessoires ont changé, ce qui entraîne de meilleures performances.

Composant fonctionnel mémorisé

3. Réutilisabilité avec des crochets : Les composants fonctionnels, lorsqu’ils sont combinés avec des hooks, favorisent l’encapsulation logique et facilitent la création d’unités de code réutilisables. Des hooks comme useState et useEffect permettent la gestion de l’état et la gestion des effets secondaires au sein des composants fonctionnels.

Outil de récupération de données réutilisable

4. Pas de « ceci » Les composants fonctionnels n’utilisent pas ce mot-clé, éliminant ainsi les problèmes potentiels liés aux fonctions de liaison dans les composants de classe. Cela se traduit par un comportement plus simple et prévisible, en particulier lors du passage de fonctions en tant qu’accessoires.

Exemple : Pas de mot-clé « this ».

5. Réutilisabilité améliorée des composants : Les composants fonctionnels, à l’aide de hooks, facilitent la création de hooks personnalisés. Les hooks personnalisés peuvent encapsuler et partager une logique avec état entre les composants, favorisant ainsi la réutilisation du code et la conception modulaire.

Exemple : Hook personnalisé pour gérer la saisie de formulaire

Conclusion: En conclusion, le blog met l’accent sur l’efficacité des composants fonctionnels, en soulignant leur simplicité, leurs avantages en termes de performances, leur réutilisabilité avec des hooks, l’absence du mot-clé « this » et une réutilisabilité améliorée des composants. Les lecteurs sont fortement encouragés à intégrer ces concepts dans leurs projets React, garantissant ainsi une expérience de développement plus efficace et plus maintenable. De plus, le blog fait allusion à une compatibilité accrue dans les versions futures, privilégiant les composants fonctionnels par rapport aux composants de classe.