Lifecycleについて

React.Component を継承したclass componentは処理の過程の特定の時点でコードを実行するためにいくつかの
「ライフサイクルメソッド」があり、勉強したのでmemo。

まず基本的な描画の流れ

componentが作成され、マウントされる前、マウント時、マウントされた後、それぞれにメソッドがコールバックされます。

レンダリング = 表示用のデータをもとに、内容を整形して表示すること
マウント = コンポーネントが画面にレンダリングされること

1.constructor()
2.static getDerivedStateFromProps()　
3.render()
4.componentDidMount()

更新される時

props や state が変更された時にcomponentが再レンがリングされる時に呼ばれます。

1.static getDerivedStateFromProps()
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate
5.componentDidUpdate()

アンマウント(コンポーネントが DOM から削除されるときに呼び出されます。)
・componentWillUnmount()

使わない方が良いメソッド

・componentWillUpdate()
・componentWillReceiveProps()

実際書いてみた!

class Test extends Componentes<Props, State> {

// state の初期化もメソッドのバインドもしないのであれば、React コンポーネントのコンストラクタを実装する必要はないメソッドです。
  constructor() {
    console.log('constructor');
  }

// getDerivedStateFromProps は、初期マウント時とその後の更新時の両方で、render() メソッドを呼び出す直前に呼び出されます。
// state を更新するためにオブジェクトを返すか、何も更新しないために null を返すべきです。
  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');
  }


// 新しい props または state が受け取られると、レンダーする前に shouldComponentUpdate() が呼び出されます。
// デフォルトは trueですが、shouldComponentUpdate() が false を返した場合、render() は呼び出されません。
  shouldComponentUpdate() {
    console.log('shouldComponentUpdate');
// 注意：shouldComponentUpdateはprops または state が更新されない場合falseを返すので値が変わらない場合呼ばれないです。どこで呼ばれるかの確認のためにtrueを返してみる
    return true
  }


// 最後にレンダーされた出力が、たとえば DOM にコミットされる直前に呼び出されます。
// このライフサイクルによって返された値はすべて、componentDidUpdate() へのパラメータとして渡されます。
  getSnapshotBeforeUpdate() {
    console.log('getSnapshotBeforeUpdate');
  }


// 更新が行われた直後に componentDidUpdate() が呼び出されます。
// このメソッドは最初のレンダーでは呼び出されません。
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }


// コンポーネントがマウントされた直後に呼び出されます。
// コンポーネントが変更される可能性があるときに、変更される前に DOM からある情報（たとえば、スクロール位置）を取得することを可能にします。
  componentDidMount() {
    console.log('componentDidMount');
  }


// render() メソッドは、クラスコンポーネントで必ず定義しなければならない唯一のメソッドです。
// 呼び出されると、this.props と this.state を調べて、次のいずれかの型を返します。
 render() {
    console.log('render')
  return ();
 }
}

実行結果

props や state が変更され、更新された時

参考
https://ja.reactjs.org/docs/react-component.html
https://react.keicode.com/basics/life-cycle-events.php