スマートコンポーネントとダムコンポーネントの翻訳
Reactでアプリケーションを作成する際に非常に役立つシンプルなテンプレートがあります。 Reactをしばらく使用している場合は 、おそらく既に理解しているでしょう。 これについてはこの記事で詳しく説明していますが、いくつかの点を追加したいと思います。
コンポーネントを再利用する方がはるかに簡単であることがわかり、コンポーネントを2つのカテゴリに分けると議論できます。 私はそれらをスマートとダムと呼びますが、ファットとスキニー、ステートフルとピュア、スクリーンとコンポーネントなども聞きました。 これはすべて同じというわけではありませんが、考え方は似ています。
私の愚かなコンポーネント：
- Fluxアクションやストアなど、アプリケーションの他の部分とは無関係
- this.props.childrenでよく見られます
- 小道具だけでデータとコールバックを受け取る
- 独自のCSSファイルを持っています
- 時折、独自の状態を持つ
- 他の愚かなコンポーネントを使用できます
- 例：ページ、サイドバー、ストーリー、ユーザー情報、リスト
私のスマートコンポーネント：
- 1つ以上のダムまたはスマートコンポーネントをラップします
- ストアの状態を保存し、オブジェクトとして愚かなコンポーネントにスローします
- Fluxアクションを呼び出し、それらに愚かなコールバックコンポーネントを提供します
- 独自のスタイルを持つことはありません
- 自身でDOMを生成することはほとんどなく、レイアウトに愚かなコンポーネントを使用
- 例：UserPage、フォロワーサイドバー、StoryContainer、FollowedUserList
それらを異なるフォルダーに入れて、違いを明確にします。
このアプローチからの利益
- 責任の最良の分割。 この方法でコンポーネントを記述すると、アプリケーションとUIをよりよく理解できます。
- 最高の再利用性。 完全に異なる状態ソースで同じ愚かなコンポーネントを使用できます。
- 愚かなコンポーネント-これは実際にはアプリケーションの「パレット」であり、それらをすべて1つのページに配置し、デザイナーにそれらを構成させて、アプリケーションロジックにクロールすることができます。 このようなページで回帰テストを実行できます。
- これにより、サイドバー、ページ、ContextMenuなどの「レイアウトコンポーネント」を抽出し、異なるスマートコンポーネントで同じレイアウトを複製する代わりにthis.props.childrenを使用する必要があります。
コンポーネントはDOMを発行すべきではないことに注意してください。 UI間の境界のみを提供する必要があります。