Comment développer vos superpuissances React avec le Container Pattern

Bonjour à tous! ?

Cette fois, je vais vous parler de ce modèle très utile dans React appelé modèle de conteneur ou modèle de composant de conteneur .

C'est l'un des premiers modèles que j'ai appris. Cela m'a beaucoup aidé à séparer les problèmes en plus petits et à les résoudre un à la fois.

En outre, cela a certainement aidé à rendre mon code beaucoup plus réutilisable et autonome à la fois.

Cela peut sembler un paradoxe! Comment obtenez-vous votre code réutilisable et autonome en même temps?

Eh bien, réutilisable car vous apprenez à faire de petits composants factices (présentation) que vous pouvez beaucoup réutiliser.

Autonome car le conteneur, la vue ou tout ce que vous utilisez pour conserver toute votre logique peut facilement être détaché d'un endroit et attaché à n'importe quel autre sans gros changements / refactorisation dans votre application principale.

C'est donc une superpuissance gagnant-gagnant et secrète que vous devez acquérir dès que vous le pouvez!

La vérité est que lorsque vous voulez faire une fonctionnalité, vous commencez toujours simple et propre.

Les jours passent et vous pouvez ajouter une autre petite fonctionnalité ici, une autre fonctionnalité ici. Vous créez un correctif ici, un correctif là-bas, et tout votre code devient désordonné et ingérable.

Croyez-moi, j'y suis allé. Et j'y suis toujours de nos jours! Nous le sommes tous, à un moment donné, car la programmation est un métier. Mais nous pouvons beaucoup minimiser cela avec de la pratique et avec ce modèle de conception incroyable.

Mais qu'est-ce qu'un modèle de conception?

01. Qu'est-ce qu'un modèle de conception de logiciel?

Un modèle de conception n'est rien de plus qu'une solution générale et réutilisable à un problème courant dans un contexte donné de la conception de logiciels. Ce n'est pas une conception finie qui peut être transformée directement en code source ou machine. C'est une description ou un modèle pour résoudre un problème qui peut être utilisé dans de nombreuses situations différentes.

Les modèles de conception sont les meilleures pratiques formalisées que le programmeur peut utiliser pour résoudre des problèmes courants lors de la conception d'une application ou d'un système.

Vous connaissez le modèle de conception du logiciel MVC?

02. Qu'est-ce que le modèle de conception MVC?

Eh bien, MVC signifie Model-View-Controller. Il s'agit d'un modèle architectural utilisé pour développer des interfaces utilisateur. Il divise l'application en trois parties interconnectées.

Traditionnellement, il était utilisé pour l'interface graphique de bureau (interfaces utilisateur graphiques). Cette architecture est devenue populaire pour la conception d'applications Web et même mobiles.

Imaginez que vous ayez un triangle avec trois sommets: Vue , Contrôleur et Modèle .

La vue est ce que l'utilisateur voit à l'écran (côté client).

L'utilisateur qui voit la vue peut produire des changements, peut appuyer sur un bouton, remplir un formulaire, appuyer sur lecture pour voir une vidéo, déclencher une panoplie de choses ensemble.

Le contrôleur gère les changements promus par l'utilisateur et toute la logique derrière. (Il fonctionne comme un relais, il fait des requêtes et gère tout entre la vue et le modèle.)

Le modèle est le gestionnaire. Il contient ce qu'on appelle la logique métier, les données. Le modèle reçoit des informations du contrôleur et procède aux modifications nécessaires. Il redonne les mises à jour au contrôleur et à la vue.

React est «une bibliothèque JavaScript pour construire des interfaces utilisateur» (par définition?). La plupart du temps, vous mélangez et manipulez le V et une partie du C.

Et c'est ce V et ce C que nous voulons séparer distinctement du modèle de conteneur.

03. Quel est le modèle de conteneur?

Le Container Pattern est une solution pour bien séparer le V du C. au lieu de n'en faire qu'un /> avec la logique et la vue, vous la séparez en deux:taine r /> et & lt; Component />. Le premier effectuera toutes les opérations logiques nécessaires et favorisera la communication avec l'entreprise, tandis que le second sera un composant de présentation factice qui rendra tout ce que son conteneur parent demande.

Les composants de présentation concernent l' apparence des choses . Alors que les composants Container sont concernés par le fonctionnement des choses .

04. Mettons nos mains sales

Imaginez que nous voulions créer un composant de liste de super-héros qui affiche des données à leur sujet. Nous allons récupérer les données d'une API et nous voulons les afficher à l'écran.

D'accord, pour simuler notre modèle (base de données), j'ai créé un faux objet de données. Cet objet contient les informations des super héros. Il a également une fonction fetchFarAwayAPI () qui retournera cet objet.

Original text


Ensuite, j'ai créé un composant avec état pour récupérer l'API, enregistrer la réponse dans l'état de notre composant et rendre les données dans une table d'amorçage à l'écran.

D'accord, nous avons totalement séparé le contrôleur de la vue. C'est l'idée principale que vous devez garder à l'esprit concernant le modèle de conteneur.

Si vous regardez attentivement, nous avons créé un composant dans lequel nous récupérons des données, les enregistrons dans leur état et les rendons à l'écran. Nous avons mélangé le C et le V. D'accord?

Ok, comment pouvons-nous résoudre ça? Ouaip! Modèle de conteneur!

Suivez-moi!

La première étape consiste à créer un composant de présentation, pour rendre la vue. Ce composant recevra les accessoires et les rendra. C'est complètement factice. Regarde:

Pour gérer le contenu du contrôleur (logique), j'ai refactoré notre ancienne SuperHeroList en la renommant SuperHeroListContainer.

D'accord, nous avons totalement séparé le contrôleur de la vue et c'est l'idée principale que vous devez garder à l'esprit concernant le modèle de conteneur.

Mais…

Nous pouvons aller plus loin et éliminer la complexité des lignes du nouveau composant SuperHeroList. Comment faisons-nous ça? Créons un nouveau composant SuperHeroRow:

Qu'avons-nous fait ici? Nous avons découplé la complexité du rendu des lignes en dehors du composant SuperHeroList. Nous laissons le premier rendu uniquement la table et invoquons le SuperHeroRow pour rendre chacune des lignes seule.

Nous avons extrait la complexité des lignes dans un autre composant. Rappelez-vous toujours que le modèle de conteneur est là (à l'intérieur de SuperHeroListContainer). Nous venons de répartir le rendu en deux composants parent / enfant complètement factices et de présentation en utilisant le mode de travail préféré de React: la composition!

Vous avez la liberté d'extraire les responsabilités / complexités en composants plus petits. C'est ainsi que vous devriez travailler avec React! Vous devez l'ajuster à ce qui est le mieux pour l'application, pour l'équipe, pour le contexte dans lequel vous vous trouvez.

Parfois, nous pouvons abstraction un peu de la chose! Je pense que maintenant nous allons bien mais… allons un peu plus loin…

Créons cette fois une deuxième SuperHeroList en utilisant un HOC (Higher Order Component).

Un composant d'ordre supérieur (HOC) est une technique avancée dans React pour réutiliser la logique des composants. Les HOC ne font pas partie de l'API React en soi. Ils sont un modèle qui émerge de la nature compositionnelle de React.

Concrètement, un composant d'ordre supérieur est une fonction qui prend un composant et renvoie un nouveau composant.

Le truc ici est de refactoriser notre SuperHeroListContainer en une fonction JavaScript vanille. Cette fonction prend un composant (communément appelé WrappedComponent) et renvoie un nouveau composant.

Vérifiez simplement comment je l'ai fait ci-dessous:

Nous avons refactoré le dans cette fonction appelée withContainer. Il reçoit n'importe quel composant que vous souhaitez lui passer et retourne un composant de classe avec toute la logique à l'intérieur!

Dans ce cas, l'abstraction nous permet d'exporter plusieurs types de tables ou de réutiliser toute la logique que nous avions dans le conteneur pour invoquer plusieurs / différents composants de présentation / factices.

C'est ainsi que nous associons autonomie et réutilisabilité?

Enfin et surtout

Ne vous inquiétez pas si, au début, vous avez eu des difficultés à déterminer comment appliquer le modèle de conteneur. C'est un processus itératif. Avec de la pratique, vous y arriverez sans trop réfléchir. Ce sera intuitif et cela semblera à première vue la meilleure approche pour presque (90%) tout ce que vous faites dans React.

React dispose d'un modèle de composition puissant. Ils recommandent d'utiliser la composition au lieu de l'héritage pour réutiliser le code entre les composants.

REMARQUE: pour cet article, j'ai utilisé Create React App 2.0 avec Bootstrap. Vous pouvez toujours retirer mon dépôt ici et faire quelques expérimentations plus tard. Vous trouverez les deux SuperHeroLists et les deux exemples que nous avons réalisés tout au long de l'article.

Continuez à lire mes articles et n'oubliez pas: soyez toujours fort et codez !

Bibliographie

  1. Documentation React
  2. Container Components de Learn React avec chantastic ;
  3. Modèle de conception de logiciel, de wikipedia, l'encyclopédie gratuite;
  4. Model-view-controller, de wikipedia, l'encyclopédie gratuite;
  5. Modèles de présentation et de conteneurs, par Dan Abramov;

Merci beaucoup!

evedes, octobre 2018