Reactガイドを読んでいくその17

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

コンポジション vs 継承

Reactは継承よりもコンポジションを推奨している。
本章では継承を使った場合を例に出してコンポジションではどう解決できるかを示す。

子要素の出力 (Containment)

SidebarやDialogといった汎用的な入れ物を表すようなコンポーネントでは事前に子要素を知らないものがある。
こういったコンポーネントではchildrenというpropsを使って子要素を出力することが可能。

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

上記のような操作をしたことで他のコンポーネントからJSXをネストすることで任意の子要素を渡すことが可能になる。

特化したコンポーネント (Specialization)

コンポーネントを他のコンポーネントの特別なケースとして考える場合がある。
Dialogというコンポーネントがあった時に、WelcomDialogやGoodbyeDialogは特別なケースと言える。
そういった特化したコンポーネントをコンポジションで表現すると以下のようになります。以下のケースでは表現していませんが、クラスとして定義されたコンポーネントでも同様の動作をします。

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />

  );
}

継承はどうするの？

Facebookでは何千というコンポーネントでReactプロジェクトを運用しているが、継承が推奨されるような場所はまったくない。
推奨というより、継承は使うなに近いニュアンスがあると考えられる。

今日はここまで。