Reactコンポーネントのライフサイクルについて | プログラマーになった「中卒」男のブログ

Reactにおいて基本単位となるのがコンポーネント（Component）。
コンポーネントはStateと呼ばれる状態を持ったビューのことだ。

コンポーネントは共通のライフサイクルを持っており、生成・Stateの変更・破棄までの一連の流れに関連したイベント関数が用意されている。

それではライフサイクルの順を追って、どのタイミングでどんなメソッドが用意されているのかを確認しよう。

コンテンツ

マウント時

コンポーネントがrenderメソッドなどでDOMにマウントされた時、以下の順にメソッドが実行される。

マウントされる直前に実行されるのがconstructor。

constructorでは主にstateの初期化を行う。

constructor(props) {
  super(props);
  this.state = {
    x: 0,
    y: 1,
  };
}

Reactでstate値を変更する場合、通常this.setState()を使うが、constructor内においては例外でsetState()を使用しない。

コンポーネントがマウントされた時に一度だけ実行されるのがcomponentDidMount。

一般的には外部データをAPIで呼んだりする時に使われる。

親コンポーネントから与えられるpropsや、this.setState()によりstateが更新された時、以下の順でメソッドが実行される。

stateが新しい値に更新されても、コンポーネントを更新せずに以前の状態を維持させたい場合、falseを戻り値として返せばrender()の中身が更新されずに維持される。

つまりrender()以降のライフサイクルメソッドが呼び出されなくなるということだ。

shouldComponentUpdate() {
  return false;
}

更新される前のpropsやstateの値を使用したい場合に使われる。

二つの引数を持ち、それぞれ更新される前のpropsとstateを参照することができる。

shouldComponentUpdate(prevProps, prevState) {
  // prevPropsは更新前のpropsを、prevStateは更新前のstateを参照できる
  // this.props、this.stateで現在（更新後）の値を参照できる
}

また、任意の値を戻り値として返せば、次に紹介するcomponentDidUpdate()メソッドの第三引数として渡すこともできる。

更新完了後に実行されるメソッド。

最大3つの引数を持つが、使わない引数は省略できる。

componentDidUpdate(prevProps, prevState, snapshot) {
  // getSnapshotBeforeUpdate()の戻り値をsnapshotで参照できる
}

コンポーネントが破棄される直前に実行される。

主に、コンポーネントに関連するイベントリスナーやタイマーなどを解除する際に使用される。

コンポーネント内でエラーが発生した際に実行される。

エラーオブジェクトとなるerror、エラーについての情報を格納するinfo、と二つの引数を持つ。