Reactのライフサイクル

Reactでライフサイクルについて学ぶ。
毎回、忘れるので忘備録も兼ねて、文章で読んでもイマイチ頭に入らないのでモックで挙動を確認するのが一番いい。

codesandbox.io

componentWillMount

• コンポーネントがDOMツリーに追加される直前に一度だけ呼ばれる
• 初期化に使える
• ここでsetState()した場合は更新後の値が使われる
• React 17.0で廃止予定

componentDidMount

• 最初のrenderが実行された直後に実行される
• DOMへのアクセスが可能なので要素の初期化処理に使える

componentWillReceiveProps

• コンポーネントがPropsを受け取るたびに呼ばれる
• 新しいモノと古いモノ２つを参照出来る

shouldComponentUpdate

• trueを返すと再描画される falseだとされない
• propsやstateは更新されたけど、描画は変化無し、みたいな時に再描画するのがもったいないので、その時はfalseにしたりする

componentWillUpdate

• コンポーネントのPropsやStateの変更で描画する直前に呼び出される
• 初期描画時は呼ばれない
• React17.0 で廃止予定

componentDidUpdate

• コンポーネントのPropsやStateの変更で描画が行われた直後に実行される
• 初期描画時は呼ばれない

componentWillUnmount

• コンポーネントがDOMから削除される直前に呼ばれる
• イベントやタイマーのキャンセルに使う

図だと、この記事がわかりやすい。 qiita.com