PC & Mobile

Partage de code dans React en utilisant des accessoires de rendu – Nadeesha Cabral – Medium

Partage de code dans React en utilisant des accessoires de rendu - Nadeesha Cabral - Medium


Render Props est une méthode de partage de code de plus en plus populaire. Ils sont appelés Render Props (ou accessoires de rendu) car ils permettent le «partage de code» via un rendre soutenir. Mais pour cet exercice, nous ferons la même chose tout en partageant le code avec les propres les enfants support pour l'esthétique.

Partage de code via des enfants fonctionnels

De ce fait, le titre peut être plus justement renommé «Partage de code dans React à l'aide de fonctions les enfants accessoires ».

Le problème

Étant donné que React embrasse la composition de style PF par rapport à l'héritage, à ses débuts, la composition était principalement réalisée à l'aide de composer et statiquement. Et des bibliothèques comme Recompose ont rendu les choses vraiment simples et faciles. Si vous voulez écrire des composants qui sont des fonctions sans état et pures, vous pouvez écrire quelque chose comme:

C'était surtout mieux que saupoudrer this.setState partout, car il était facile pour les composants d’être «stupides et purs» et d’abréger la logique pour séparer des fonctions pouvant être testées indépendamment. Mais il a eu ses propres problèmes.

1. Qui a mis quoi dans les accessoires?

Etant donné que tant de choses sont injectées via des «accessoires», il est plus difficile de déterminer quelle composition injecte quoi au fur et à mesure que le composant grossit.

2. Repositionnement de la logique

Le code co-localisé est plus facile à lire. Mais comme certaines de mes logiques sont déplacées dans un endroit éloigné de son utilisation réelle (et souvent uniquement), il devient plus difficile de lire les choses.

3. Absence d'inférence de type

C'était mon reproche préféré personnel. En tant que grand utilisateur de Typescript, j'ai passé beaucoup de temps à essayer de trouver un moyen d'avoir des types robustes sans écrire beaucoup de mes propres types - mais je n'ai eu que peu, voire aucun retour.

Une solution

Au lieu de fournir une logique réutilisable via les accessoireset si nous pouvions le fournir via un les enfants une fonction?

Supposons que je souhaite que la date actuelle, mise à jour chaque seconde, soit partagée sur l’application React. J'écrirais un composant LiveDate comme ceci:

Normalement, les enfants serait une expression JSX. Mais ici nous assumons les enfants être fonctionnel. Et l'appelant de cette fonction obtiendrait le { rendez-vous amoureux: "…" } objet.

Bien que ce soit un exemple si simple. Mais voyons si nous partageons le code de cette façon, cela résoudra les 3 problèmes ci-dessus.

  1. La logique réutilisable est fournie au consommateur en tant que composant de React, ne polluant pas les accessoires.
  2. Nous savons qui fournit livedate comme il est très co-localisé.
  3. L'inférence de type ne nécessite presque aucun effort car les systèmes de types peuvent déduire le type de livedate basé sur la définition de LiveDate composant.

Dans la nature

Un grand nombre des bibliothèques que vous pourriez utiliser actuellement prendraient en charge les outils de rendu prêts à l'emploi. Route composant du réact-routeur populaire vous permet d'accéder à des propriétés telles que:

react-powerplug est quelque chose que j'utilise assez souvent pour gérer les états dans mes applications.

Animation déclarative? react-morph vous a couvert.

Mais les accessoires de rendu viennent avec leurs propres problèmes. Mais dans les 95% des cas d'utilisation, ils fonctionnent très bien par rapport aux méthodes de composition traditionnelles. React Hooks résout la plupart de ces problèmes. En attendant, pour consulter la liste des autres bibliothèques ayant adopté la convention, consultez cette liste.

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close