Lifecycleについて

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 ();
 }
}