PropTypes vs. Flow reagieren

100

PropTypes und Flow decken ähnliche Dinge ab, verwenden jedoch unterschiedliche Ansätze. PropTypes kann Sie zur Laufzeit warnen. Dies kann hilfreich sein, um fehlerhafte Antworten von einem Server usw. schnell zu finden. Flow scheint jedoch die Zukunft zu sein und ist mit Konzepten wie Generika eine sehr flexible Lösung. Auch die von Nuclide angebotene Autovervollständigung ist ein großes Plus für Flow.

Meine Frage ist nun, welcher Weg der beste ist, wenn Sie ein neues Projekt starten. Oder könnte es eine gute Lösung sein, sowohl Flow als auch PropTypes zu verwenden? Das Problem bei der Verwendung von beiden ist, dass Sie viel doppelten Code schreiben. Dies ist ein Beispiel für eine Musik-Player-App, die ich geschrieben habe:

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

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

Beide Definitionen enthalten grundsätzlich die gleichen Informationen. Wenn der Datentyp geändert wird, müssen beide Definitionen aktualisiert werden.

Ich habe dieses Babel-Plugin gefunden , um Typdeklarationen in PropTypes zu konvertieren, was eine Lösung sein könnte.

danielbuechele
quelle
1
Wenn Sie mit Flow beginnen möchten, versuchen Sie diesen Beitrag: robinwieruch.de/the-soundcloud-client-in-react-redux-flow
Robin Wieruch
1
Aus Erfahrung ist die Verwendung des in der Frage genannten Plugins keine sehr gute Idee. Es unterstützt nicht alle Arten von Komponenten, ist mit React Native ab Version 0.39 vollständig defekt und im Allgemeinen sehr zerbrechlich. Der Besitzer des Repos reagierte früher ziemlich schnell auf diese Probleme, aber es scheint, dass er das Interesse verloren hat und sich nicht mehr darauf verlassen kann, dass er es aufrechterhält.
Tomty
Probieren Sie tcomb über das Babel-Plugin aus, um statische und Laufzeit-Typprüfungen mit Flow und tcomb durchzuführen.
Comerc

Antworten:

81

Ein Jahr nachdem ich diese Frage gestellt hatte, wollte ich ein Update über meine Erfahrungen mit diesem Problem geben.

Da sich Flow stark weiterentwickelt hat, habe ich angefangen, meine Codebasis damit zu tippen, und keine neuen PropType-Definitionen hinzugefügt. Bisher denke ich, dass dies ein guter Weg ist, da Sie, wie oben erwähnt, nicht nur Requisiten, sondern auch andere Teile Ihres Codes eingeben können. Dies ist sehr praktisch, wenn Sie beispielsweise eine Kopie Ihrer Requisiten im Status haben, die vom Benutzer geändert werden kann. Auch die automatische Vervollständigung in IDEs ist ein großartiger Gewinn.

Automatische Wandler in die eine oder andere Richtung hoben nicht wirklich ab. Für neue Projekte würde ich jetzt wirklich empfehlen, Flow over PropTypes zu verwenden (falls Sie die Eingabe nicht zweimal durchführen möchten).

danielbuechele
quelle
Welche IDE verwenden Sie? Webstorm?
sergey.tyan
3
Ich benutze Atom mit dem ide-flowtype Plugin.
Danielbuechele
Sie benötigen noch propTypes, wenn Sie childContextTypes verwenden - stackoverflow.com/questions/42395113/…
gkd
3
Aufgrund der neuen Kontext-API ist es nicht mehr erforderlich, propTypes beim Umgang mit untergeordneten Kontexten zu verwenden: reactjs.org/docs/context.html
SteveB
35

Abgesehen von beiden, die zum sehr weiten Bereich der Typprüfung gehören, gibt es zwischen beiden keine große Ähnlichkeit.

Flow ist ein statisches Analysetool, das eine Obermenge der Sprache verwendet, mit der Sie Ihrem gesamten Code Typanmerkungen hinzufügen und beim Kompilieren eine ganze Klasse von Fehlern abfangen können.

PropTypes ist eine grundlegende Typprüfung, die auf React gepatcht wurde. Es kann nichts anderes als die Typen der Requisiten überprüfen, die an eine bestimmte Komponente übergeben werden.

Wenn Sie eine flexiblere Typüberprüfung für Ihr gesamtes Projekt wünschen, sind Flow / TypeScript die richtige Wahl. Solange Sie nur kommentierte Typen an Komponenten übergeben, benötigen Sie keine PropTypes.

Wenn Sie nur die Requisitentypen überprüfen möchten, komplizieren Sie den Rest Ihrer Codebasis nicht zu stark und wählen Sie die einfachere Option.

Dan Prince
quelle
11
Ja, sie unterscheiden sich sehr in ihrer Arbeitsweise. Ich denke jedoch, dass der Zweck ihrer Verwendung sehr ähnlich ist. Aber eine Sache, auf die Sie hingewiesen haben, ist ein guter Punkt: Mit Flow können Sie mehr von Ihrer Codebasis abdecken, während Sie sich bei der Verwendung von PropTypes auf Requisiten beschränken.
Danielbuechele
2
Der Zweck der Verwendung ist nur sehr ähnlich , wenn Sie nur Durchfluss verwenden prop Typen zu überprüfen. Das eine ist im Grunde eine Sprache, das andere ist kaum eine Bibliothek.
Dan Prince
Stimme @DanPrince voll und ganz zu. Und ich denke nicht, dass dies eine gute Idee ist, mit PropTypes nach fehlerhaften Antworten vom Server zu suchen. Es ist besser, wenn Sie dies manuell überprüfen und Ihre Benutzeroberfläche ordnungsgemäß reagiert (z. B. eine Warnmeldung anzeigt), anstatt nur eine Warnung in die Konsole zu werfen.
Yan Takushevich
6
@YanTakushevich Du musst beides tun. PropTypes sollten ohnehin während der Produktion deaktiviert werden, daher müssen Sie immer manuell prüfen, um sicherzustellen, dass Ihre Benutzer eine gute Erfahrung haben. PropTypes können jedoch für Laufzeitwarnungen während der Entwicklung sehr nützlich sein. Es ist nur ein schönes Sicherheitsnetz, um sicherzustellen, dass Sie nichts vergessen.
ndbroadbent
27

Ich glaube, der verpasste Punkt hier ist, dass Flow ein statischer Prüfer ist, während PropTypes ein Laufzeitprüfer ist , was bedeutet

  • Flow kann beim Codieren Fehler vorab abfangen: Es können theoretisch einige Fehler übersehen werden, von denen Sie nichts wissen (wenn Sie beispielsweise Flow nicht ausreichend in Ihrem Projekt implementiert haben oder bei tief verschachtelten Objekten).
  • PropTypes werden sie beim Testen stromabwärts abfangen, sodass sie niemals fehlen
Rewieer
quelle
1
hier ist ein dediziertes babel plugin bereits npmjs.com/package/babel-plugin-flow-react-proptypes
amankkg
15

Versuchen Sie, die Art der Requisiten nur mit Flow zu deklarieren. Geben Sie einen falschen Typ an, z. B. Nummer anstelle von Zeichenfolge. Sie werden sehen, dass dies in Code markiert wird, der die Komponente in Ihrem Flow-fähigen Editor verwendet. Dies führt jedoch nicht dazu, dass Tests fehlschlagen und Ihre App weiterhin funktioniert.

Fügen Sie nun die Verwendung von React PropTypes mit einem falschen Typ hinzu. Dies führt dazu, dass Tests fehlschlagen und in der Browserkonsole markiert werden, wenn die App ausgeführt wird.

Auf dieser Grundlage sollten anscheinend auch PropTypes angegeben werden, wenn Flow verwendet wird.

Mark Volkmann
quelle
Es hängt davon ab, wie die Tests durchgeführt werden. Wenn Sie den Snapshot-Test von jest verwenden, schlagen die Tests mit ungültigen Eigenschaftswerten fehl.
Alexandre Borela
3
Der Vorteil des Fehlers in Ihrer IDE besteht darin, dass Sie ihn unmittelbar vor dem Ausführen von Tests sehen.
Tom Fenech
Plus 1 für Gürtel und Hosenträger.
David A. Gray