kito

今回はReactでのライフサイクルメソッドについて説明していきたいと思います。
Reactの学習を始めて、ライフサイクルという壁にぶち当たりましが、少し乗り越えることができました。

ライフサイクルメソッドとは

Reactのコンポーネントにはライフサイクルというものが存在します。

ライフサイクルとはなんなのか・・・
上手く例えることができないので、実際にコードを見ながら説明していくことにします。

まず、ライフサイクルには大きく3つの期間に分けられ、Mounting・Updating・Unmountingに分けられます。 その期間で使用できるメソッドをライフサイクルメソッドと言います。

今回は、ライフサイクルメソッドから個人的に使用頻度の高いものを紹介していきます。

ざっくばらんに説明していきます。

Mounting

constructor()

• stateの初期値の設定ができます。
  

render()

• レンダリングされる部分
• コンポーネント内で必須です。
  

componentDidMount()

• コンポーネントがマウント（DOMツリーに挿入）された後に、呼ばれるメソッドです。
• データフェッチやタイマーセットなど、初回のDOMに対して処理を行うことが多いです。
  

Updating

render()

• stateやpropsの変更が行われた後に再度render()が呼び出されます。
  

componentDidUpdate()

• render()が呼ばれ、DOMの更新がされた直後に呼ばれるメソッドです。

Unmounting

componentWillUnmount()

• マウントの解除
• 例えば、componentDidMount()で設定した、タイマーを解除するときに使われます。

コンソールで確認してみよう！！

※ライフサイクルメソッドは、クラスコンポーネントで使用できます。ご注意願います。

App.js

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. render()が呼ばれ、レンダリングが行われた後、componentDidMount()が呼ばれます。
4. countUpボタンを押すことで、stateのcountが更新され、再度render()が呼ばれます。
5. 最後にcomponentDidUpdate()が呼ばれ、 countUpボタンを押すたびに4と5を繰り返します。

下記のコードエディタのコンソールで確認してみてください！

index.js

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

<React.StrictMode>では、constructor, renderが二回実行されてしまうので、<React.Fragment> に書き換えております。

詳しくはこちらまで
React公式のドキュメント strict モード

タイマーをセットしてみよう

最後に、componentDidMount()を使って、タイマーをセットしていきます。

1. componentDidMount()でgetNowDataを実行します。
2. stateのnowに現在の時刻を毎秒setStateします。
3. 更新されるごとにrender()が呼ばれ反映されます。

まとめ

Reactのライフサイクルは、なかなか難しいですが、理解することで実装の幅が大きく広がると思います。
少しでも参考になると幸いです。
最後まで読んで頂きありがとうございます。