おにちゃん塾の商品一覧

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

【設計】Reactのライフサイクルメソッドを分かりやすく解説
URLをコピーする
URLをコピーしました!
本記事の想定読者
  • Reactの土台となるライフサイクルメソッドを完璧にマスターしたい
  • useEffectを扱えるようになるためのReactのライフサイクルメソッドをマスターしたい

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

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

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

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

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

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


2021年5月21日執筆

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

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


本記事の概要

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

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

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

おにちゃん

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

目次

Reactのライフサイクルとは

Reactのライフサイクルとは
Reactのライフサイクルとは

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

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

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

Reactのライフサイクル

マウンティング時

  • constructor()
  • render()
  • componentDidMount()

アップデイティング時

  • render()
  • componentDidUpdate()

アンマウンティング

  • componentWillUnmount

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


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

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

useEffectで使用できるもの

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount
おにちゃん

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


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

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

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


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

Reactのライフサイクルメソッドの流れ
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;

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

  1. constructorが読み込まれる
  2. renderが読み込まれる
  3. componentDidMountが読み込まれる
  4. ボタンをクリックする
  5. renderが読み込まれる
  6. componentDidUpdateが読み込まれる

この流れは、割と多くの場面で使用するので覚えておきましょう。


まとめ:Reactのライフサイクルを理解できた方は次のステップへ

まとめ:Reactのライフサイクルを理解できた方は次のステップへ
まとめ:Reactのライフサイクルの次へ

ここまで【設計】Reactのライフサイクルメソッドを分かりやすく解説の解説をしてきました。

キャプション
  • ライフサイクルメソッドを理解できれば、Reactは余裕です
  • ライフサイクルメソッドを活用する場面は、外部との連携が多い
  • Reactを学びたい方はおにちゃん塾を活用しよう

本記事は以上です。最後までご覧いただきありがとうございました

本格的にReactを学びたい方はおにちゃん塾or動画教材をおすすめしています。


読者におすすめの記事


読者におすすめの動画教材

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる