Reactが用意しているライフサイクルメソッド7つ

  • 4
    いいね
  • 0
    コメント

Reactのライフサイクルメソッドを学んだのでメモ

componentWillmount

マウントされる直前に1回だけ呼ばれる」
- 初期化処理を行うのに適している
- コンポーネントがDOMツリーに追加される前に1度だけ呼ばれる
- このメソッド内でsetstate()するとrender時にまとめて行われる

componentDidMount

「マウントされた直後に1回だけ呼ばれる」
- DOMに関わる初期処理を行いたい時に便利
- コンポーネントがDOMツリーに追加された状態で呼ばれる

componentWillReceiveProps

「コンポーネントがプロパティの値を受けるときに呼ばれる」
- プロパティが更新されるときに呼ばれる
- 親コンポーネントのStateがPropsとして渡されていて、その変化で(表示以外で)何かしたいときに便利

shouldComponentUpdate

「コンポーネントを更新してもいいかどうかの判断を行う」
- 戻り値は「True」または「False」
- 無駄な処理を無くし、パフォーマンスの向上を行うときに便利

componentWillUpdate

「コンポーネントが更新される前に呼ばれる」
- shouldComponentの戻り値がtrueの場合呼ばれる

componentDidUpdate

「コンポーネントが更新された後に呼ばれる」
- DOMの変化にフックして何かしたい場合に使うと便利

componentWillUnmount

「コンポーネントがアンマウントする前に呼ばれる」
- コンポーネントがDOMから削除される時に呼ばれる
- Timerの処理やDOMのイベントを解除するときはここで処理をかいておく