LoginSignup
0
0

More than 3 years have passed since last update.

React(コンポーネントのライフサイクル) とらゼミ06 メモ

Last updated at Posted at 2021-05-22

ライフサイクル

  • コンポーネントの「時間の流れ」。
  • 生まれて、成長して死ぬまでの循環。
  • それぞれの段階で必要な処理を必要。

三種類のライフサイクル

  • Mounting : コンポーネントが配置される(生まれる)期間。
  • Updating : コンポーネントが変更される(成長する)期間。
  • Unmouting : コンポーネントが破棄される(死ぬ)期間。

なぜライフサイクルを使う?

  • 関数の外に影響を与える関数を記述するため。 DOM変更、API通信、ログ出力、setState().....etc
  • 副作用 = 適切な場所に配置すべき処理。

ライフサイクルの流れ。

ec873f34-66ea-4f00-09ea-af9f8fdeb167.png

Mounting(始動時)

入学式、準備期間。
componentDidMount() : renderの後に一度だけ呼ばれる、リスナーの設定やAPI通信に使われる。

Updating(更新)

何度も呼ばれる、再利用。
componentDIdUpdata() : 再レンダ後に呼ばれるスクロールイベントや条件付きイベント。

Unmouting(終了)

コンポーネントの破棄、葬式。
componentWillUnmount() : コンポーネントが破棄される直前にリソースの解除

0
0
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
0
0