前置き
かなり間が空いてしまったんですが、最近はReactばっかり書いてます。
書いてるといつもライフサイクルメソッドを忘れてしまうのでまとめてみます。
（v16.3から非同期レンダリングのサポート等でライフサイクルイベントが変更されている）
マウントに関するライフサイクルメソッド
constructor
- 最初に実行
constructor(props)- 初期処理等に使用
componentWillMount(今後のバージョンアップで削除予定)
- コンポーネントがマウントされる直前に実行(renderメソッドよりも前)
- 通常はコンストラクターで実行するので必要なし
- UNSAFE_componentWillMount
componentDidMount
- コンポーネントがマウントされた直後に実行
- レンダリング後なのでDOMにアクセス可能
- ここでsetStateを実行するとrenderが2度実行されるので注意
componentWillUnmount
- コンポーネントがアンマウントされる直前に実行
- 各種コンポーネントに紐づいた処理のクリア等に使用
データのアップデートに関するライフサイクルメソッド
componentWillReceiveProps(今後のバージョンアップで削除予定)
- 引数に受け取る予定のpropsを取得
componentWillReceiveProps(nextProps)- 新しいpropsは取得していないので、引数の
nextPropsとthis.propsとで比較可能 - setStateも実行可能なのでpropsの比較結果をstateとして扱う場合はこのメソッドで行う
- propsが更新される時のみ実行(
nextPropsとthis.propsが同じでも実行) - UNSAFE_componentWillReceiveProps
getDerivedStateFromProps
- componentWillReceivePropsと同じタイミングで呼ばれる
- componentWillReceivePropsと違い、更新時だけでなくマウント時にも呼ばれる
static getDerivedStateFromProps(nextProps, prevState)- 現在のState値とマージされるのでPropsを元にStateの値を更新したいような場面で使う
- Stateを更新する必要がない時は、nullを返す
shouldComponentUpdate
- 引数に次のpropsとstateを取得
shouldComponentUpdate(nextProps, nextState)- 返り値として真偽値(true/false)を返す必要あり
- propsやstateに変更があった際に実行され、返り値によってrenderを実行するか判断
- デフォルトはtrueで常にrenderを実行する
- 主にパフォーマンスチューニングに使用
- 通常はReact.PureComponentを継承して使用する
componentWillUpdate(今後のバージョンアップで削除予定)
- 引数に次のpropsとstateを取得
componentWillUpdate(nextProps, nextState)- render前に呼ばれる最後のライフサイクルメソッド
- ここでsetStateなどの再レンダリングを促す処理は行わない
- shouldComponentUpdateでfalseを返した場合は実行されない
- UNSAFE_ componentWillUpdate
getDerivedStateFromProps
- componentWillUpdateと違い、更新前に必ず一度だけ呼ばれる
static getDerivedStateFromProps(nextProps, prevState)- DOMの更新前後の値を比較して何かしたい場合に使う
componentDidUpdate
- 引数に前のpropsとstateを取得
componentDidUpdate(prevProps, prevState, snapshot)- render直後に実行される
- アップデート後のDOMにアクセスするタイミングとして最適
- APIへの変更完了通知にも利用可能
- shouldComponentUpdateでfalseを返した場合は実行されない
エラーハンドリングに関するライフサイクルメソッド
componentDidCatch
- React v16から実装
- 引数にスタックトレースが入ったerrorとその他の情報が入ったinfoを取得
componentDidCatch(error, info)- 記述したコンポーネントのエラーは検知できないため、子コンポーネントで発生したエラーを検知するためのメソッド