/note/tech

Reactにおける責務(UI/ロジック)の切り分け

私の考えでは以下の使い分けが望ましいです。

UIとUIロジックは密結合

UIと業務ロジックは疎結合

UIロジックと業務ロジックは疎結合

  • atoms
    • コンポーネントの最小単位。
    • ロジックは持たない。
    • ステートレスなコンポーネント。
    • システム全体で流用できる。
  • molecules
    • atoms、moleculesの複合コンポーネント。
    • UIロジックを持つことがある。
    • ステートレスなコンポーネント。
    • システム全体で流用できる。
  • organisms
    • atoms、moleculesの複合コンポーネント。
    • 業務のドメイン情報をDOMに持つことがある。
    • そのためシステム全体で流用できるとは限らない。
    • APIとの疎通や業務ロジックを持つことがある。
    • PresentationalComponentsとContainerComponentsを分ける。