【React入門】 7 コンポーネントのライフサイクル

この記事ではコンポーネントのライフサイクルについて書く。

と思ったが、とても分かりやすい画像を作成してくれているQiitaの記事があった。

qiita.com

上記の記事の画像を見れば一目瞭然であるが、リンクだけ載せて終わるのも味気ないので、実際にライフサイクルの各イベント発火時にログを出力するテストページを作成してみた。

https://cosmology233.github.io/sandbox/hatena/2016/08/09/

ログは開発コンソールに出力される。

追記( shouldComponentUpdate について)

shouldComponentUpdate メソッドをクラス内に明示的に記述する場合、 true または false を返してあげなければいけない。

例えば、

shouldComponentUpdate() {
  console.log("hoge");
};

これだけだと、stateの値が変更されても画面が更新されない。

shouldComponentUpdate(nextProps, nextState) {
  console.log("hoge");

  return this.state !== nextState;
};

このようにちゃんと真偽値を返す必要がある。