41
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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のイベントを解除するときはここで処理をかいておく
41
39
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
41
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?