kouの技術的メモ

学習した内容の定着やアウトプット用に開設しました

React 関数コンポーネントとPresentational Component と Container Component

TypeScript&React

関数コンポーネント

Reactのコンポーネントはクラスでも関数でも書けるが Facebook の React 開発チームの公式的な見解としては関数を使うように勧めている。

過去の関数コンポーネントの欠点 クラスコンポーネントではそのままではクラスとして実装できていた、 Local State を持つ ことができない。そしてライフサイクルメソッドを備えられない。

Presentational Component と Container Component

役割による分類。 Presentational Component は、主に見た目を担うコンポーネント。 Container Componentは処理を担うコンポーネント。

関数コンポーネントはLocal State を持つ ことができず、そしてライフサイクルメソッドを備えられないので、そのままではContainer Componentとしては使えないが、HOC とか Render Props、Hooks といった機能を使ってContainer Componentとして使う。

【メモ】コンポーネント名は常に大文字。

React は小文字で始まるコンポーネントを DOM タグとして扱う。 例えば、 JSXでは

は HTML の div タグを表しますが、 はコンポーネントを表しており、スコープ内に Welcome が存在する必要がある。