Classe vs Composants fonctionnels dans React, et la troisième option super secrète

Je préfère mâcher.

Au début de mon incursion dans React, la question que j’entends le plus souvent est la suivante: pourquoi n’utiliserais-je pas un composant de classe pour tout? Pourquoi se préoccuper des composants fonctionnels? ”

En dépit de ce que certains durs de la programmation fonctionnelle pourraient dire, ce n’est pas nécessairement une mauvaise question. Après tout, les composants de classe nous donnent beaucoup plus de flexibilité et de potentiel qu’un simple composant «muet». Il existe sûrement quelques bonnes raisons pour lesquelles nous nous intéressons tout d’abord aux composants fonctionnels (ou «sans état»).

Après quelques recherches, la réponse est…

Subjectif.

Voyons donc rapidement les deux types et pourquoi vous voudrez peut-être utiliser l’un sur l’autre.

Composants fonctionnels

Peut-être mieux connus dans la communauté React en tant que composants ‘Stateless’, c’est exactement ce qu’il dit sur l’étain: les fonctions apatrides. En raison de l’incapacité de disposer de ses propres méthodes ou de cette référence, tout composant qu’un état sans état peut réellement réaliser est un rendu en retournant un fichier JSX (ou React.createElement () si vous êtes à l’école).

Ils n'y ont pas accès, ils ne peuvent donc pas avoir leur propre état, pas plus que les méthodes de cycle de vie pour la même raison. Pour ceux-là, il vous faut…

Composants de classe

Le composant essentiel de la structure de React, les composants de classe peuvent tout faire: état, méthodes de cycle de vie, méthodes régulières et rendu, le tout enveloppé dans un corps de classe ordonné.

Soigné! Maintenant, lequel utiliser?

L'illusion du choix

Quel sous-titre inquiétant! Après avoir lu en quoi consiste chacun de ces éléments, vous vous dites probablement «utilisez un composant sans état si vous n’avez besoin que de restituer quelque chose d’aide d’accessoires!». Et vous auriez raison! En règle générale, c’est précisément la raison pour laquelle vous pensez utiliser un composant sans état, mais qu’en est-il des performances? Mémoire?

Celles-ci dépendent principalement de la taille du composant de classe. Gardez à l'esprit que ces deux types devront être transpilés, ce qui va affecter la mémoire. De toute évidence, un fichier plus détaillé utilisera davantage de mémoire et affectera les performances davantage qu’un simple composant sans état, qui, en vertu de sa vertu, ne peut être si volumineux avant d’être réévalué s’il ne devrait pas y avoir un seul composant ou plus.

Alors, qu'en est-il de ce sous-titre effrayant? Demandons à l’expert de React Dan Abramov lui-même.

Prenez cela avec un grain de sel, car il est un peu daté à ce stade et les mises à jour sur la question sont difficiles à trouver et d’autres développeurs de l’équipe de React ont déclaré que certaines améliorations avaient été apportées à la vitesse des composants fonctionnels. Depuis quelque temps, il est également question d'optimiser les composants sans état afin qu'ils se révèlent plus utiles en bout de ligne.

Après mes propres tests de référence, il semble que les composants fonctionnels ont le potentiel d’être en moyenne environ 20% plus rapides, ce qui est tout à fait irréprochable.

Et pourtant… il y a une autre façon…

Alerte Spoiler: le réel est JavaScript

Je dois cette observation, franchement déconcertante, à Composants fonctionnels de Philippe Lehoux dans Medium, 45% plus rapides à réagir maintenant. La raison pour laquelle les composants fonctionnels ne sont pas immédiatement beaucoup plus rapides que les composants de classe est qu’ils prolongent toujours React.Component et, par conséquent, continuent de se charger dans toute la logique d’un composant de classe!

Donc, afin d’accélérer ces composants stupides, nous devons éviter les bagages inutiles que React nous donne, et si nous devons renoncer à React, la réponse est bonne, JS.

Boom.

Je sais. C’est si simple, et pourtant si beau. De plus, lors de mes tests de référence, il a été 51% plus performant que tout autre composant de la classe normale. 51!

Examinons maintenant la transpilation et voyons pourquoi.

Appel de fonction direct et instanciation de composant

Dans notre instanciation de composant normale, nous avons imbriqué des appels .createElement () pour construire notre arborescence DOM, mais avec des appels de fonction directs, nous pouvons simplement ajouter la valeur de retour de notre fonction.

Alors, quelle est la vérité?

(désolé, pas désolé)

En fin de compte, quels sont les plats à emporter?

  1. Les classes sont plus puissantes et flexibles,
  2. Les apatrides sont un peu plus rapides (et nécessitent moins de dactylographie!), Avec quelques promesses sur le vent de l'optimisation,
  3. Il existe un speed-hack (quelque peu non testé) à votre disposition si vous devez extraire toutes les performances que vous pouvez obtenir,
  4. À la fin de la journée, faites tout ce qui est le strict minimum pour le composant. C’est probablement le bon choix.