【設計】Reactのライフサイクルメソッドを分かりやすく解説

2022 8/27

2022年8月27日

本記事の想定読者

Reactの土台となるライフサイクルメソッドを完璧にマスターしたい
useEffectを扱えるようになるためのReactのライフサイクルメソッドをマスターしたい

本記事は、上記の方に向けて執筆しています。

執筆者：Reactのライフサイクルメソッドは必ず立ち塞がる壁ですよね。私自身も、ライフサイクルで苦戦しました。

本記事では、私が苦戦したポイントなどを分かりやすい言葉に置き換えて解説して行きます。

最初は専門的には違くても、ニュアンスを掴むことが大切だと思っています。

一通り読んでみる
ニュアンスを掴む
正しい概念を理解する

今回はニュアンスを掴むことに特化しています。

2021年5月21日執筆

本記事は常に最新の情報を掲載しています。

また、分かりやすい表現にするため、何度もリライトを繰り返しております。

本記事の概要

クラスコンポーネントで使用するライフサイクルメソッドを軸に解説して行きます。

大半の方がuseEffectが理解できない
ライフサイクルメソッドを理解しようとする
挫折する

このようになっているので、今回はライフサイクルメソッドの根本であるクラスコンポーネントを軸にして解説してみます。

エコおじい

クラスコンポーネントで理解できるとuseEffectの理解が捗ります。

記事の内容

Reactのライフサイクルとは

Reactのには、ライフサイクルと言われている時間の流れが存在しています。

マウンティング：生まれる
アップデイティング：進化する
アンマウンティング：亡くなる

もっと分かりやすく言うと、大体のライフサイクルは下記のようになっています。

Reactのライフサイクル

マウンティング時

constructor()
render()
componentDidMount()

アップデイティング時

render()
componentDidUpdate()

アンマウンティング

componentWillUnmount

細かくするともう少しあるのでが、大体がこんな流れです。

Reactのライフサイクルは基本的にクラスコンポーネントで使われる

最近になり、useEffectを使うことで、解決できるようになりました。

useEffectで使用できるもの

componentDidMount
componentDidUpdate
componentWillUnmount

エコおじい

本記事は、クラスコンポーネントをベースに解説しています。関数コンポーネントベースで知りたい方は下記の記事を参考にしてください。

Reactのライフサイクルメソッドが使われる場面

基本的には下記の場合でライフサイクルメソッドを活用していきます。

データベースとのAPI通信
仮想DOMの内容変更
ログ出力
setState()でstateを使用するとき

Reactのライフサイクルメソッドの流れ

ライフサイクル：マウンティング
ライフサイクル：アップデイティング
ライフサイクル：アンマウンティング

ライフサイクル1：マウンティング

マウンティング時で使用できるメソッドは下記の通りです。

constructor()
getDerivedFromProps()
render()
componentDidMount()

constructor()

一番最初に呼び出されるメソッドです。

constructor(props) {
    super(props);
  }

このような書き方を見たことがあるはずです。

constructor()は基本的に、一番最初に呼ばれるので、書くのも1番上です。

stateの初期化などで主に使用されるメソッドです。

render()

このメソッドは必須のです。

componentDidMount()

クラスコンポーネントの際には良く使用されるメソッドです。

ライフサイクル2：アップデイティング

アップデイティング時に使用されるメリットは下記の通りです。

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

componentDidUpdate()

ここではHTTPリクエストをする際に活用します。

ライフサイクル3：アンマウンティング

アンマウンティング時のメソッドは一種類のみです。

componentWillUnmount

タイマーのストップ、リクエストのキャンセルなどを行うメソッドです。

ライフサイクルの流れまとめ

エコおじい

ライフサイクルでよく使われる流れは下記の通りです。

マウンティング時
constructor()
render()
componentDidMount()

アップデイティング時
render()
componentDidUpdate()

アンマウンティング
componentWillUnmount

細かくすると、先ほど例に出したものが入るのですが、最初の頃はこれだけで十分です。

実際に下記のコードをコピーして入力してみてください。

import React from 'react';

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      count: 0,
    }
    console.log("constructor")
  }
  componentDidMount() {
    console.log("componentDidMount")
  }
  componentDidUpdate() {
    console.log("componentDidUpdate")
  }
  countUp = () => {
    this.setState({count: this.state.count + 1 })
  }
  render(){
    console.log("render")
    return(
      <div>
        <button onClick={this.countUp}>countUp</button>
        <div>{this.state.count}</div>
      </div>
    )
  }
}
export default App;

上記のコードを読み込むと下記の流れになることがわかったはずです。