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

【React】ライフサイクルメソッドの基本だけ抑える

 ライフサイクルとは

コンポーネントが持つ、以下の三つの期間のこと。コンポーネントが生まれ、更新され、破棄されるまでのそれぞれの時期を表す。

  • Mounting
  • Updating
  • Unmounting

 ライフサイクル「メソッド」とは

それぞれのライフサイクルで使用できるメソッドのこと。下記から基本的なものだけ解説していきます。

 Mounting

 constructor()

ここでstateの初期化などが行われる。actionのバインドのためにも使われたりする。

 componentDidMount()

rennder後に一度だけ呼ばれる。イベントリスナーの設定などがここで行われる。そのコンポーネントを使う上で、必要な準備をここでするイメージ

 render()

必須のメソッド。この子がいないとダメ。ここに実際に描画されるUIを書く。注意点としては、この中でpropsstateを変更する直接的な処理を書いてはいけない。propsstateが変更されるたびに、renderが走るため、無限ループが発生してしまうから。冪等にさせておく(冪等がわからない場合はググってください🙇‍♂️)

 Updating

 render()

propsstateが更新された時もrenderが走る。このおかげ(?)で値が変われば、自動的にUIが書き換わる。

componentDidUpdate()

コンポーネントが更新されるたびに呼ばれるので、propsstateを更新する処理は減らした方がよき(絶対ではないが。)

  • 第一引数→props
  • 第二引数→state
  • 第三引数→snapshot

それぞれ、こんな感じで受け取る。

 Unmounting

コンポーネントが破棄される前に呼ばれるメソッド。ここでイベントリスナーやタイマーを解除してあげる。そうしないと、メモリが解放されない。

個人的んはhooksを使った関数コンポーネントが好きだけどね。

 参考

https://qiita.com/yuria-n/items/3c3fc8d29fd2e56ed7a9#render

すごく勉強になりました🙇‍♂️

onikan
都内の自社開発企業で長期インターン(週5フルタイム)でエンジニアしています。| Ruby | Rails | React.js | 未経験→実務ベースの/プログラミング/エンジニア/インターンなどについて発信していきます!文系大学2年生(休学中)
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
ユーザーは見つかりませんでした