React PropTypes vs Flow

101

PropTypes et Flow couvrent des choses similaires mais utilisent des approches différentes. PropTypes peut vous donner des avertissements pendant l'exécution, ce qui peut être utile pour trouver rapidement des réponses malformées provenant d'un serveur, etc. Cependant, Flow semble être l'avenir et avec des concepts comme les génériques, c'est une solution très flexible. L'auto-complétion offerte par Nuclide est également un gros plus pour Flow.

Ma question est maintenant de savoir quelle est la meilleure façon de procéder pour démarrer un nouveau projet. Ou pourrait-il être une bonne solution d'utiliser les deux, Flow et PropTypes? Le problème avec l'utilisation des deux est que vous écrivez beaucoup de code en double. Voici un exemple d'application de lecteur de musique que j'ai écrit:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

Les deux définitions contiennent essentiellement les mêmes informations et lorsque le type de données est modifié, les deux définitions doivent être mises à jour.

J'ai trouvé ce plugin babel pour convertir les déclarations de type en PropTypes, ce qui pourrait être une solution.

danielbuechele
la source
1
Si vous voulez commencer avec Flow, essayez ce post: robinwieruch.de/the-soundcloud-client-in-react-redux-flow
Robin Wieruch
1
Par expérience, utiliser le plugin mentionné dans la question n'est pas une très bonne idée. Il ne prend pas en charge tous les types de composants, est entièrement interrompu avec React Native à partir de la v0.39 et est généralement très fragile. Le propriétaire du repo avait l'habitude de répondre à ces problèmes assez rapidement, mais il semble qu'il a perdu tout intérêt et ne peut plus être invoqué pour le maintenir.
Tomty
Essayez tcomb via le plugin Babel pour la vérification de type statique et d'exécution en utilisant Flow et tcomb.
comerc

Réponses:

81

Un an après avoir posé cette question, je voulais faire le point sur mes expériences avec ce problème.

Comme Flow a beaucoup évolué, j'ai commencé à taper ma base de code avec lui et je n'ai pas ajouté de nouvelles définitions PropType. Jusqu'à présent, je pense que c'est une bonne solution, car comme mentionné ci-dessus, cela vous permet non seulement de taper des accessoires, mais également d'autres parties de votre code. Cela est très pratique par exemple lorsque vous avez une copie de vos accessoires dans l'état, qui peut être modifiée par l'utilisateur. En outre, l'auto-complétion dans les IDE est un gain impressionnant.

Les convertisseurs automatiques dans l'un ou l'autre sens n'ont pas vraiment décollé. Donc, pour les nouveaux projets, je recommanderais maintenant vraiment d'utiliser Flow sur PropTypes (au cas où vous ne voudriez pas taper deux fois).

danielbuechele
la source
quel IDE utilisez-vous? Webstorm?
sergey.tyan
3
J'utilise Atom avec le plugin ide-flowtype.
danielbuechele
vous avez toujours besoin de propTypes lorsque vous utilisez childContextTypes - stackoverflow.com/questions/42395113/…
gkd
3
il n'est plus nécessaire d'utiliser propTypes lors de la gestion des contextes enfants en raison de la nouvelle API de contexte: reactjs.org/docs/context.html
SteveB
35

À part les deux appartenant au très large champ de vérification de type, il n'y a pas vraiment de similitude entre les deux.

Flow est un outil d'analyse statique qui utilise un sur-ensemble du langage, vous permettant d'ajouter des annotations de type à tout votre code et d'attraper une classe entière de bogues au moment de la compilation.

PropTypes est un vérificateur de type de base qui a été patché sur React. Il ne peut rien vérifier d'autre que les types d'accessoires passés à un composant donné.

Si vous souhaitez une vérification de type plus flexible pour l'ensemble de votre projet, Flow / TypeScript sont des choix appropriés. Tant que vous ne passez que des types annotés dans des composants, vous n'aurez pas besoin de PropTypes.

Si vous souhaitez simplement vérifier les types d'accessoires, ne compliquez pas trop le reste de votre base de code et optez pour l'option la plus simple.

Dan Prince
la source
11
Ouais, ils sont très différents en termes de fonctionnement. Cependant, le but de leur utilisation est très similaire, je pense. Mais une chose que vous avez soulignée est un bon point: Flow vous permet de couvrir une plus grande partie de votre base de code, alors que vous êtes limité aux accessoires lorsque vous utilisez PropTypes.
danielbuechele
2
Le but de l' utilisation est seulement très similaire si vous n'utilisez pour vérifier les types de flux prop. L'un est fondamentalement une langue, l'autre est à peine une bibliothèque.
Dan Prince
Tout à fait d'accord avec @DanPrince. Et je ne pense pas que ce soit une bonne idée de vérifier les réponses mal formées du serveur avec PropTypes. Il est préférable que vous ayez des vérifications manuelles pour cela et que votre interface utilisateur réagisse correctement (affiche un message d'avertissement par exemple) au lieu de simplement lancer un avertissement dans la console.
Yan Takushevich
6
@YanTakushevich Vous devez faire les deux. Les PropTypes doivent de toute façon être désactivés pendant la production, vous avez donc toujours besoin de vérifications manuelles pour vous assurer que vos utilisateurs ont une bonne expérience. Cependant, les PropTypes peuvent être très utiles pour les avertissements d'exécution pendant le développement. C'est juste un joli filet de sécurité pour ne rien oublier.
ndbroadbent
27

Je crois que le point manqué ici est que Flow est un vérificateur statique tandis que PropTypes est un vérificateur d'exécution , ce qui signifie

  • Flow peut intercepter les erreurs en amont lors du codage: il peut théoriquement manquer certaines erreurs que vous ne saurez pas (si vous n'avez pas suffisamment implémenté le flux dans votre projet par exemple, ou en cas d'objets imbriqués profonds)
  • PropTypes les attrapera en aval pendant les tests, donc il ne manquera jamais
Rewieer
la source
1
voici un plugin babel dédié déjà npmjs.com/package/babel-plugin-flow-react-proptypes
amankkg
15

Essayez de déclarer le type d'accessoires en utilisant uniquement Flow. Spécifiez un type incorrect, tel qu'un nombre au lieu d'une chaîne. Vous verrez que cela sera signalé dans le code qui utilise le composant dans votre éditeur compatible Flow. Cependant, cela n'entraînera aucun échec des tests et votre application fonctionnera toujours.

Ajoutez maintenant l'utilisation de React PropTypes avec un type incorrect. Cela entraînera l'échec des tests et sera signalé dans la console du navigateur lorsque l'application sera exécutée.

Sur cette base, il semble que même si Flow est utilisé, les PropTypes doivent également être spécifiés.

Mark Volkmann
la source
Cela dépend de la façon dont les tests sont effectués, si vous utilisez le test d'instantané de jest, les tests échoueront avec des valeurs de propriété non valides.
Alexandre Borela
3
L'avantage de l'erreur dans votre IDE est que vous la voyez immédiatement avant même d'exécuter des tests.
Tom Fenech
Plus 1 pour l'approche de la ceinture et des bretelles.
David A. Gray