React コンポーネントのライフサイクル

コンポーネントのライフサイクル

ライフサイクルとは

• コンポーネントの「時間の流れ」
• 生成、変更、破棄までの循環
• それぞれの段階で必要な処理を記述

３種類のライフサイクル

Mounting：コンポーネントが生成される期間
Updating：コンポーネントが変更される期間
Unmounting：コンポーネントが破棄される期間

なぜライフサイクルを使うのか

• 関数外に影響を与える関数を記述するため
  e.g. DOM変更、API通信、ログ出力、setState() ...etc
• 副作用 = 適切な場所に配置すべき処理

order	Mounting	Updating	Unmounting
1	constructor()
2	render()	render()
3	componentDidMount()
4		componentDidUpdate()
5			componentWillUnmount()

主要メソッド

Mount

constructor()：初期化（stateなど）
render()：VDOMを描画（JSXをreturn）
componentDidMount()：render()後に一度だけ呼ばれる。リスナーの設定やAPI通信に使われる。

Updating

render()：VDOMを描画（JSXをreturn）
componentDidUpdate()：再render()後に呼ばれる。スクロールイベントや条件付きイベント。

Unmounting

componentWillUnmount()：コンポーネントが破棄される直前に呼ばれる。リソースを解放するために使う。（リスナーの解除など）