Help us understand the problem. What is going on with this article?

React Componentのライフサイクルのまとめと利用用途

More than 3 years have passed since last update.

React Componentのライフサイクルのまとめ&利用用途

利用用途については雑です。

マウント時

  • componentWillMount
  • componentDidMount

マウントされるときに1度だけ実行される。以降は実行されない。

void componentWillMount()

render()直前の処理。
ここでthis.setState()を行うと、render()は更新されたstateを参照する。

void componentDidMount()

実際のDOMが存在するので、DOM触り放題。
this.setState()はできる。

更新時

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • componentDidUpdate

void componentWillReceiveProps(object nextProps)

新しいpropsを受け取ると実行される。
propsによってstateを変更する場合はここでthis.setState()を行う。
更新時ライフサイクル内でthis.setState()を使える場所はここだけ。
この関数内のthis.setState()がさらなるrender()を呼ぶことはない。

boolean shouldComponentUpdate(object nextProps, object nextState)

パフォーマンス・チューニング時に触る。
returnでbool値を返さなければならない。
falseを返すと、以降のcomponentWillUpdate(), render(), componentDidMount()の処理がスキップされる。
this.setState()は呼んではいけない。呼ぶと無限ループに入り、スタックを食いつぶして止まる。

void componentWillUpdate(object nextProps, object nextState)

render()前に何か準備する。
this.setState()は呼んではいけない。
componentWillUpdate()render()の間のタイミングでthis.props, this.stateで参照できる値が更新される。

void componentDidUpdate(object prevProps, object prevState)

新しいDOM触り放題。
this.setState()は呼んではいけない。

アンマウント時

void componentWillUnmount()

後始末を書くところ。

備考

以下のリンクのライフサイクルの図を合わせて見ると理解が捗ると思います。
React component ライフサイクル図

yukika
water-cell
地球人口100億の時代への農業革命をWebテクノロジで支える
https://water-cell.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした