関数コンポーネント

クラスコンポーネントではなく関数コンポーネントを勧める理由

クラスコンポーネントだと以下のようなことが挙げられている

• クラス内のthisの挙動が何回
• 記述が冗長になりがちで、時系列が複雑なライフサイクルメソッドの挙動には不向き
• 今後導入予定の各種最適化がクラスだと難しい

React Function Component 型

TypeScriptではReact.FC型を使用する(React.FunctionComponentの省略系)

import * as React from 'react';

type ContentProps = {
  title: string;
}

const Content: React.FC<ContentProps> = props => {
  return (
    <div>
      <h2>{props.title}</h2>
    </div>
  )
}

export default Content;

Presentational Component

• 一般的にコンポーネントと呼ばれることが多い
• 主に見た目を担うコンポーネント
• 「どのように見えるか」に関心をもつ
• 内部にDOMマークアップをふんだんに持つ
• データや振る舞いをPropsとして一方後に受け取る
• FluxのStore等に依存しない
• 自分の状態は持たない(UIの状態は除く)
• データの変更に介入しない
• 関数コンポーネントで表現されることが多い

Container Component

• 一般的にコンテナと呼ばれることが多い
• 処理を担うコンポーネント
• 「どのように機能するか」に関心を持つ
• DOMマークアップを可能な限り持たない
• データや振る舞いをを他のコンポーネントに受け渡す
• FluxのActionを実行したり、FluxのStoreに依存する
• しばしばデータの状態を持つ
• しばしばデータの変更に介入して、任意の処理を行う

• HOCやRender Props, Hooksが使われることが多い

• Presentational and Container Components