[React] ライフサイクルのはなし。

React の Life cycle とは

コンポーネントには、ライフサイクル（Life cycle）という概念がある。

Reactの特性上、stateが更新されるとコンポーネントは再レンダリングされる。その際にコンポーネントが最初に読み込まれた時、コンポーネントが更新された時、コンポーネントが更新によって破棄される時など、コンポーネントにはさまざまな状態を遷移していく特徴がある。そのことをライフサイクルという。

ちょっと難しい感じになってしまったので、簡単にいうと

『コンポーネントの状態が変わっていく過程でのそれぞれのステップに名前がついているよ』

って感じだと分かりやすいかも知れない。

Life cycle の種類

次にそれぞれのライフサイクルの種類について見ていく。

ライフスタイルは大きく分けて3つ。

参照：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Life cycle のマウント時（Mounting）

まず最初にLife Cycle のマウント時。これはコンポーネントが最初に描画される時のステップ。

基本的なメソッドは

• constructor
• render
• ComponentDidMount

Life cycle の更新時（Updating）

次にコンポーネントのstateなどが変更されて、コンポーネントの更新が行われるステップ。

基本的なメソッドは

• render 
• componentDidUpdate

Life cycle のアンマウント時（Unmounting）

最後にコンポーネントが破棄されるステップ。

基本的なメソッドは

• componentWillUnmount

 [React] ライフサイクルのはなし。 まとめ

以上、React の Life Cycle のはなしでした。

コンポーネントの状態によって、処理を入れる際に非常に便利なので React 使用する際は必須の概念になります。