web-dev-qa-db-ja.com

React PropTypesとフロー

PropTypesとFlowは同様のものをカバーしますが、異なるアプローチを使用しています。 PropTypesは、実行中に警告を出すことができます。これは、サーバーなどから送られてくる不正な応答をすばやく見つけるのに役立ちます。また、Nuclideが提供するオートコンプリートは、Flowにとって大きなプラスです。

私の質問は、新しいプロジェクトを開始するとき、どの方法が最善かということです。それとも、FlowとPropTypesの両方を使用するのに良い解決策でしょうか？両方を使用する場合の問題は、多くの重複コードを書くことです。これは、私が書いた音楽プレーヤーアプリの例です。

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

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

両方の定義には基本的に同じ情報が含まれており、データ型が変更された場合、両方の定義を更新する必要があります。

私はこれを見つけました babel plugin 型宣言をPropTypesに変換します。これは解決策かもしれません。

reactjsflowtypereact-proptypes
93
danielbuechele

この質問をしてから1年後、この問題に関する私の経験を更新したいと思いました。

Flowが大きく進化したため、コードベースの入力を開始しましたが、新しいPropType定義は追加しませんでした。これまでのところ、上記のように、小道具だけでなくコードの他の部分も入力できるため、これは良い方法だと思います。これは、たとえば、ユーザーが変更できる状態の小道具のコピーを持っている場合に非常に便利です。また、IDEのオートコンプリートは素晴らしい成果です。

いずれかの方向の自動コンバーターは、実際には離陸しませんでした。したがって、新しいプロジェクトの場合は、PropTypesを介してFlowを使用することをお勧めします（2回入力する必要がない場合）。

75
danielbuechele

両方が非常に広いタイプチェックのフィールドに属していることを除いて、2つの間にはそれほど多くの類似性はありません。

Flowは、言語のスーパーセットを使用する静的分析ツールです。これにより、すべてのコードに型注釈を追加し、コンパイル時にバグのクラス全体をキャッチできます。

PropTypesは、Reactにパッチが適用された基本的なタイプチェッカーです。特定のコンポーネントに渡される小道具のタイプ以外はチェックできません。

プロジェクト全体でより柔軟な型チェックが必要な場合は、Flow/TypeScriptが適切な選択肢です。注釈付きの型のみをコンポーネントに渡すのであれば、PropTypesは必要ありません。

小道具の種類を確認したいだけであれば、コードベースの残りの部分を過度に複雑にせず、よりシンプルなオプションを選択してください。

32
Dan Prince

ここで見逃した点は、フローは静的チェッカーである一方、PropTypesは実行時チェッカーであると信じています

  • フローは、コーディング中に上流でエラーをインターセプトできます：理論的には、あなたが知らないいくつかのエラーを見逃す可能性があります（たとえば、プロジェクトで十分なフローを実装しなかった場合、または深くネストされたオブジェクトの場合）
  • PropTypesはテスト中にダウンストリームをキャッチするため、見逃すことはありません
24
Rewieer

Flowのみを使用して小道具のタイプを宣言してください。文字列の代わりに数値など、誤ったタイプを指定してください。 Flow-awareエディター内でコンポーネントを使用するコードでフラグが付けられることがわかります。ただし、これによりテストが失敗することはなく、アプリは引き続き動作します。

ここで、不正なタイプのReact PropTypesの使用を追加します。これにより、アプリの実行時にテストが失敗し、ブラウザコンソールでフラグが立てられます。

これに基づいて、Flowを使用している場合でも、PropTypesも指定する必要があるようです。

14
Mark Volkmann