関数コンポーネント
クラスコンポーネントではなく関数コンポーネントを勧める理由
クラスコンポーネントだと以下のようなことが挙げられている
- クラス内の
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