Reactでステートフルコンポーネントとステートレスコンポーネントを区別する行はどこにあるべきですか？

Question

React encourages可能な限りステートレスコンポーネントを使用し、それを管理するステートフルな親コンポーネントがあります。 これは、ステートレスコンポーネントをより再利用可能にし、管理しやすくすることができることを理解します。 しかし、極端な場合、App.jsのような最上位コンポーネントに常に状態を置くことができ、情報とコールバックを長い小道具チェーンで渡すことができます。また、Fluxを使用する場合は、アクションを常にディスパッチすることもできます（コールバックを介して実行されます）。

ステートフルなコンポーネントとステートレスなコンポーネントを区別するための行は何ですか？ Fluxを使用する場合は、アクションをディスパッチする場所はどこですか？

は--- ---例を追加し

は、私は、ツールバーを持っているし、コンテンツを表示するWebアプリケーションなどのGoogleドキュメントを持っていると言います。私は、私たちがコンポーネントの構造を持つことを想像しています。

<App> 
    <Toolbar /> 
    <Content /> 
</App> 

ツールバーには、表示内容に影響するボタン、たとえば太字のテキストボタンがあります。

アプリは、ツールバーにonButtonPressedコールバックの小道具を渡して、それ自身でアクションをディスパッチするか、ツールバーにそれをさせるべきですか？

アプリはContentStringの小道具をContentに渡すべきですか、Content自体がStoreの変更を聞きますか？

ありがとうございます！

Answer 1

私の視点からは、簡単なアプリケーションは、そのようにフラックスのパターンを使用できます。

1. 子供たちがアクションを発します。
2. アプリケーションは、処理したデータを格納し、その子に伝播します。

この方法では、ステートレスなコンポーネントを使用できますが、コールバックの小道具を持たない優れたコード構成があります。しかし、あなたの命題はどちらも正しいです。それはあなたのアプリケーションのサイズと必要性に関する決定です。

あなたが作成するコンポーネントがアプリケーションの外で使用される場合、できるだけフラックスを使用せず、開発者に必要なアプローチを選択させてください。

Answer 2

これは良い質問です。異なるFlux実装間でも異なる方法で解決されています。

私は自分の状態を1つの高水準コンポーネントで、「大きなピクレル」と見なして、すべての低レベルコンポーネントに小道具を使ってデータを伝播する方が好きです。良いReactアプリでは、ほとんどのコンポーネントがデータがどこから来るのかを気にしてはいけません。 いくつかの断片化されたモデルの代わりに1つの良い構造化モデルを持つことは、これまでのところ有益であることが証明されています。 （ところで、それはいくつかの店を使用しても達成することができます、高水準のコンポーネントはそれらのすべてを聞くことができ、事実上この大きなモデルを "保持"します）。

アクションについて - すべての私の "ダム"ビジュアライゼーション/ UI /ディスプレイコンポーネントがコールバックの小道具で動作することをお勧めします。そうすれば、それらを再利用することがより容易になり、それは懸念の良い分離です。 少しのビジネスロジックを持つより豊かなコンポーネントでは、逆流アクションを直接呼びます。通常は、前述の「ダム」コントローラにはコンテナコンポーネントそのものでもあります。

したがって、ボトムライン - データはできるだけ高いレベルから流れなければなりませんが、アクションは下位コンポーネントから起動できますが、常にコールバック・プロップで同じ結果が得られるかどうかを確認してください。

ご不明な点 - ツールバーは、独自のツールバーアクトを持ち、直接呼び出すための複雑なコンポーネントです。しかし、コンテンツコンポーネントは間違いなく上からデータを取得する必要があります。また、アプリケーションが複雑になると、データフローをそのように推論するのも簡単です。

希望に役立ちます。 Fluxの全体はまだ進行中の芸術です...