reactのコンポーネントの設計について

Question

#　背景
現在reactを使ってwebアプリケーションを作成しようとしています．しかしどのようにコンポーネントを設計するかわからなかったのでネットで調べてみるとブログに出会いました．

このブログの筆者はコンポーネントの設計について以下のように言っています．

内部関数で子Componentをrenderしない．
悪い例

class Layout extends React.Component {
  renderHeader() {
    return <header/>
  }
  render() {
    return <div>
      {this.renderHeader()}
      {this.props.children}
      </div>
  }
}

そして責務に則って分割すべき．

良い例

function Header() {
  return <header/>
}

function Layout({children}) {
  return <div>
    <Header/>
    {children}
  </div>
}

ここで疑問なのですかここでいう責務とは何なのでしょうか？

悪い例で挙げられているソースコードはheaderコンポーネントをレンダーする責務と子コンポーネントをレンダーする責務の2つの責務を1つのクラスが担ってしまっているからよくないということなのでしょうか．

Answer 1

参考にされたブログの筆者ではないので、私的な意見、になるのですが・・・

Layoutというコンポーネントは、名前からすると、なんらかの「要素」の「配置」を司るもの、という意図があると思います。

悪い例の場合、Headerという「要素」の中身を、Layoutの中で構成している（例ではHeaderだけなのでピンと来にくいかもしれませんが・・・）のが、「配置」という責務を超えているという、意味合いだと思います。

Headerの中身が、複雑になった場合（stateやReduxの情報からレンダリングする）、悪い例では、Layout
コンポーネントに実装が増えますが、その内容は「配置」ではないと思います。

凝集度という観点では、責務を一つに絞り込むのが好ましいとは思いますが、現実の実装では、状況によって複数の責務を持つことはあるように思います（もちろん絞り込むに越したことはありませんが・・・）。大事なのは、名前から想像できる責務を超える仕事をしてしまわないこと、のように感じます。

たとえば、悪い例のコンポーネント名が、Layoutではなく、Pageのような名前なら、そんなに悪いことでもない気がします。（冒頭に断った通り、個人的な意見ですので、違う見解は多々あると思います。）

Comments

[pumper]

なるほど！！！
わかりやす説明ありがとうございます．