Bonjour, Habr! Je vous présente la traduction de l'article
"React Best Practices & Tips Every React Developer should Know Pt. 1" par Alex Devero.
React est l'une des bibliothèques les plus populaires pour créer des interfaces utilisateur interactives. Dans cet article, je vais vous montrer quelques exemples de bonnes pratiques React qui vous aideront à devenir un meilleur développeur. Consultez ces instructions pour mieux écrire le code React.
Contenu:
- Gardez vos composants petits
- Évitez d'empiler les composants
- Réduisez l'utilisation de composants avec état
- Utilisez des composants fonctionnels avec des crochets et des mémos au lieu de composants sur les classes
- N'utilisez pas d'accessoires dans leur état d'origine.
Épilogue: Réagissez aux meilleures pratiques et conseils que chaque développeur devrait connaître Partie 11. Gardez vos composants petits
Garder les composants petits est l'une des meilleures pratiques de React qui peut faire des merveilles. L'implémentation de cette pratique apparemment simple peut vous aider à écrire du code plus propre et plus facile à gérer. Sans oublier que cela peut aider à maintenir la raison, ou du moins ce qui reste.
Il existe une règle empirique éprouvée que vous pouvez utiliser. Jetez un œil à la méthode de rendu. S'il comporte plus de 10 lignes, votre composant est probablement trop volumineux et est un bon candidat pour le refactoring et la division en plusieurs composants plus petits. N'oubliez pas que l'une des idées pour utiliser React, ou une partie de sa philosophie, est de réutiliser le code.
Le but est de créer des morceaux de code que vous écrivez une fois, puis de les réutiliser encore et encore quand vous en avez besoin. De ce point de vue, cela n'a aucun sens de combiner toutes vos données en un seul composant massif, un seul fichier. Et, même si vous ne vous souciez vraiment pas du code réutilisable, pensez-y. Dans quelle mesure les composants contenant des centaines de lignes de code seront-ils faciles à prendre en charge?
Un tel composant sera difficile à maintenir, à déboguer et à mettre à jour. Cela signifie également que tout travail avec ce composant prendra beaucoup plus de temps. En d'autres termes, votre performance globale en souffrira. Et tôt ou tard, cela vous rendra fou. Ou cela rendra vos coéquipiers et collègues fous, et ils commenceront à vous rendre fous.
Quoi que vous choisissiez, vous allez bientôt perdre la tête et peut-être vous faire des ennemis. Ça n'en vaut pas la peine. Gardez vos composants petits. Gardez les amitiés, la santé mentale, le temps et la productivité. Simplifiez le débogage, la mise à jour et la maintenance du code. Prenons un exemple.
Était
Est devenu
2. Évitez d'empiler les composants
Chaque règle doit être appliquée avec prudence. Cela s'applique également à ces meilleures pratiques React, en particulier la précédente. En ce qui concerne les composants, il est très facile d'en faire trop et d'écrire même les plus petits morceaux de code sous forme de composants. Ne fais pas ça. Cela n'a aucun sens de faire de chaque paragraphe, de chaque segment ou diviser un composant.
Réfléchissez avant de commencer à diviser chaque composant en petites parties. Vous pouvez considérer le composant comme un mélange de «HTML», qui ne fait qu'une chose, étant indépendant, et l'utilisateur le percevra comme un tout. Est-il judicieux de faire de ce morceau de code un composant? Sinon, combinez ce code. Sinon, divisez-le.
Regardons quelques exemples pour illustrer cette définition d'un composant. Un exemple est le dialogue modal. Ce composant peut être constitué de nombreux petits éléments, tels que des divs, des en-têtes, des paragraphes de texte, des boutons, etc. Théoriquement, tous ces éléments peuvent être distingués en petits composants.
En pratique, cela est inutile. Oui, certains de ces éléments peuvent exister indépendamment les uns des autres. Cependant, est-il vraiment utile de créer un composant composé d'un seul paragraphe ou d'un seul titre? Que se passera-t-il ensuite? Composant pour étiquette, entrée ou même étendue? Cette approche n'est pas durable.
Heureusement, il existe une autre façon de voir les choses. Vous pouvez utiliser la méthodologie de conception atomique comme guide. Dans la conception atomique, tout est divisé en six catégories: atomes, molécules, organismes, modèles, pages et utilitaires. Vous commencez avec les plus petits éléments, tels que les boutons, les liens, les raccourcis, les entrées, etc. Ce sont des atomes.
Ensuite, vous combinez les atomes et créez les molécules. Des exemples de molécules peuvent être une boîte de dialogue modale, un formulaire, une fenêtre contextuelle, un menu déroulant, une navigation, etc. De plus, vous pouvez combiner une molécule avec une autre ou avec un atome et créer un organisme. Un exemple d'organisme est une rubrique, une liste de produits ou un panier d'achat. Les modèles, les pages et les utilitaires ne sont plus importants.
Comment combiner la conception atomique avec ces deux exemples de bonnes pratiques pour les composants React? Ne compliquons pas. Un composant peut être autre chose qu'un atome, c'est-à-dire molécule, organisme, ou même un modèle ou une page, si pris à la limite. En ce sens, l'étiquette, le titre, le paragraphe ne sont pas des composants, car ce sont des atomes.
Cependant, les boîtes de dialogue modales, les formulaires, les fenêtres contextuelles, les listes déroulantes, etc. sont des composants, car ils se rapportent tous soit à des molécules, soit à la catégorie d'un organisme. Il y a encore des éléments douteux, comme un bouton. Oui, du point de vue de la structure atomique, c'est un atome. Cependant, il peut exister indépendamment, dans de nombreuses variantes, et toujours fonctionner.
Dans de tels cas, je suggère de ne pas penser aux meilleures pratiques de React et de simplement être guidé par mon instinct intérieur. Au final, c'est vous qui travaillerez avec le code. L'important est que vous soyez à l'aise. Alors ne suivez pas aveuglément une liste de bonnes pratiques. Et si vous travaillez en équipe? Partagez vos réflexions à ce sujet avec vos collègues.
3. Réduisez l'utilisation de composants avec état
Il s'agit de l'une des meilleures pratiques React appliquées depuis un certain temps. Cependant, cette pratique est devenue plus populaire avec l'avènement de React 16.8.0 et des crochets React. Avant cela, lorsque vous vouliez utiliser l'état ou toute méthode de cycle de vie, vous deviez également utiliser un composant avec état. Il n'y avait pas d'autre moyen.
Les crochets ont changé cela. Après leur dévoilement officiel, les développeurs de React n'étaient plus limités aux composants avec état, car ils devaient utiliser l'état. Grâce aux crochets, les développeurs de React peuvent désormais écrire des composants sans état en utilisant des méthodes d'état et même de cycle de vie comme ils le souhaitent.
Pourquoi est-ce important? Les composants sans état ou fonctionnels sont généralement meilleurs que les composants avec état en termes de performances. La raison en est qu'il n'y a pas de méthodes d'état ou de cycle de vie. En d'autres termes, moins de code à exécuter et à transpiler. Bien sûr, cette différence peut être à peine perceptible, presque invisible, si vous travaillez sur un très petit projet.
Cependant, ces petites différences peuvent s'accumuler à mesure que votre projet se développe. Pensez également au nombre de lignes de code dont un composant avec état a besoin par rapport aux lignes fonctionnelles. La fonctionnalité est également plus courte et souvent plus facile à lire. Regardons le composant bouton, défini comme un composant avec contrôle d'état et fonctions. Lequel aimez-vous le plus?
4. Utilisez des composants fonctionnels avec crochets et mémo au lieu de composants sur les classes
Comme nous l'avons déjà expliqué, vous n'avez plus besoin d'utiliser des composants avec état uniquement pour utiliser l'état. De plus, certains développeurs de React pensent également qu'à l'avenir, React commencera à s'éloigner des classes. Est-ce vrai, maintenant cela n'a plus d'importance. L'important est qu'un composant fonctionnel puisse désormais utiliser l'état grâce aux crochets.
Et deuxièmement, l'utilisation de composants fonctionnels a ses avantages. TLDR? Il n'y a pas de classe, d'héritage et de constructeur. Il n'y a pas ce mot-clé. Meilleures pratiques Strict React. Rapport signal / bruit élevé. Les composants gonflés et les mauvaises structures de données sont plus faciles à repérer. Le code est plus facile à comprendre et à vérifier. Et, encore une fois, les performances sont meilleures.
Et encore une chose. De nombreux développeurs de React se sont opposés aux composants fonctionnels. L'un des problèmes est que vous, en tant que développeur React, ne pouvez pas contrôler le processus de rendu lorsque vous utilisez un composant fonctionnel. Lorsque quelque chose change, React renvoie un composant fonctionnel, que le composant lui-même ait été modifié ou non.
Dans le passé, la solution consistait à utiliser un composant pur. Le composant propre offre la possibilité de comparer l'état et les accessoires. Cela signifie que React peut «vérifier» si le contenu du composant, des accessoires ou du composant lui-même a changé. Si c'est le cas, il le rendra. Sinon, il sautera le nouveau rendu et réutilisera le dernier résultat rendu. Moins de rendu équivaut à de meilleures performances.
Avec React 16.6.0, ce n'est plus un problème et l'argument contre les composants fonctionnels n'est plus valide. Ce qui a changé le jeu, c'est le mémo. Memo a apporté une comparaison superficielle avec un composant fonctionnel, la capacité de «vérifier» si le contenu du composant, des accessoires ou du composant lui-même a changé.
Encore une fois, sur la base de cette comparaison, React retournera le composant ou réutilisera le résultat du dernier rendu. En bref, memo vous permet de créer des composants fonctionnels «propres». Il n'y a plus aucune raison d'utiliser des composants d'état ou des composants purs. Au moins si vous n'avez pas besoin de faire face à une condition difficile.
Dans ce cas, vous devriez envisager d'utiliser quelque chose de plus évolutif et gérable, comme MobX, Redux ou Flux, au lieu de l'état des composants. Une autre option possible serait d'utiliser le contexte. Dans tous les cas, grâce aux crochets et au mémo, les composants fonctionnels font certainement partie des meilleures pratiques React qui méritent réflexion.
5. N'utilisez pas d'accessoires dans leur état d'origine
C'est l'une des meilleures pratiques React que j'aimerais connaître lorsque j'ai commencé à apprendre. Ensuite, je ne savais pas que c'était une très mauvaise idée d'utiliser des accessoires dans l'état initial. Pourquoi est-ce une mauvaise idée? Le problème est que le constructeur n'est appelé qu'une seule fois lors de la création du composant.
Cela signifie que lorsque vous apporterez des modifications aux accessoires la prochaine fois, l'état des composants ne sera pas mis à jour. Il conservera son ancienne signification. Ensuite, j'ai supposé à tort que les accessoires sont synchronisés avec l'état. Ainsi, lorsque certains détails changent, l'état change pour refléter ce changement. Ce n'est malheureusement pas le cas.
Cela pourrait ne pas être un problème si vous souhaitez que l'état ne reçoive les valeurs des accessoires qu'une seule fois pendant le rendu initial, et que vous contrôliez l'état à l'intérieur du composant. Sinon, vous pouvez résoudre ce problème avec componentDidUpdate. Comme son nom l'indique, cette méthode de cycle de vie vous permet de mettre à jour un composant lorsque quelque chose change, comme les accessoires.
Si vous décidez d'utiliser cette méthode, n'oubliez pas une chose. Il ne sera pas impliqué dans le rendu initial, mais seulement dans le suivant. Par conséquent, assurez-vous d'initialiser l'état du composant avec les valeurs nécessaires, éventuellement obtenues à partir des accessoires. Utilisez ensuite componentDidUpdate pour mettre à jour ces valeurs et le composant selon vos besoins.
Épilogue: Réagissez aux meilleures pratiques et conseils que chaque développeur devrait connaître Partie 1
Félicitations! Vous venez de terminer la première partie de cette mini-série d'articles sur les meilleures pratiques de React. Aujourd'hui, vous avez découvert cinq pratiques que vous pouvez utiliser pour rendre le code React plus court, plus simple, meilleur, plus rapide et plus facile à lire et à gérer. Maintenant, c'est à vous de mettre en œuvre la pratique avec laquelle vous êtes d'accord et de commencer à l'utiliser.
Dans la partie suivante, vous découvrirez un ensemble différent de meilleures pratiques et de conseils pour vous aider à améliorer votre code React, ainsi que vos compétences en programmation. Jusque-là, prenez ce que vous avez appris aujourd'hui et passez une partie de votre temps à pratiquer.
Si vous avez aimé cet article, veuillez vous abonner.
Publié à l'origine sur le blog Alex Devero.