マウントフェーズ
componentWillMount
- 基本的には非推奨
- まずはconstructorかcomponentDidMountで制御できないか検討すること
- v16からUNSAFE_componentWillMountという名前に変更
- renderよりも前に呼ばれる
- constructorよりも後に呼ばれる
- setStateしてもrenderはされない
componentDidMount
- コンポーネントがマウントされた直後に呼ばれる
- DOMにアクセスできるため、イベントリスナー登録などはこのフェーズで行う
- setStateは原則禁止
- render → componentDidMount → setState → render
- 無駄に2回描画されるので特別な理由がない限りは禁止
componentWillUnmount
- コンポーネントがアンマウントされる直前に呼ばれる
- setIntervalをクリアしたり、イベントリスナーを解除したりするフェーズ
アップデートフェーズ
componentWillReceiveProps(nextProps)
- 基本的には非推奨
- v16からUNSAFE_componentWillReceivePropsという名前に変更
- setState可
- propsの変更直前に呼ばれる
- stateの変更では呼ばれない
shouldComponentUpdate(nextProps, nextState)
- renderさせるかどうかを制御する
- PureComponentを使用するほうが一般的
- true/falseが返却値
- trueの場合はrenderさせる
- falseの場合はrenderさせない
- 主にパフォーマンスチューニングのために使用する
componentWillUpdate(nextProps, nextState)
- 基本的には非推奨
- v16からUNSAFE_componentWillUpdateという名前に変更
- renderされる直前の最後のフェーズ
- setStateは禁止
- componentWillUpdateが再度実行されて無限ループの可能性があるため
- shouldComponentUpdateでfalseを返した場合は呼ばれない
componentDidUpdate(prevProps, prevState, snapshot)
- 仮引数は前のprops、state
- renderの直後に呼ばれる
- setState可
- shouldComponentUpdateでfalseを返した場合は呼ばれない
