1
1

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 3 years have passed since last update.

Reactのライフサイクル

Posted at

#ライフサイクルとは
コンポーネントが配置されて、変更されて、破棄されるまでの流れのこと

#ライフサイクルには3種類ある
上記にほぼ書いてありますが、それぞれこういう意味

  • Munting
    コンポーネントの配置
  • Updating
    コンポーネントの変更
  • Unmounting
    コンポーネントの破棄

#主要メソッド
それぞれのライフサイクルには主要なメソッドがあるそうで、取り合えずこれだけ覚えておきましょう
###Muntingの主要メソッド

  • constructor()
    初期化
    stateを初期化するときに多く使っている
    これからコンポーネントの中で使おうとする変数等を最初に定義するとき使う
  • render()
    Virtual DOMを描画
    JSXを返す
  • componetDidMount()
    render()後に一度だけ呼ばれる
    コンポーネントに対してイベントリスナーを設定することが多い
    addEventListenerをよく使っている

###Updatingの主要メソッド

  • render()
    Virtual DOMの再描画
    コンポーネントに変更が加わったときに再度呼ばれる
  • componentDidUpdate()
    再render()後に呼ばれる
    条件付きイベントを使うときに使う

###Unmountingの主要メソッド

  • componentWillUnmount()
    コンポーネントが破棄される直前、リソースを開放する
    リスナーを解除するために使うこと多い
    removeEventListenerをよく使っているということ

動画見てそれ通りにやるとこういう基礎の部分が抜け落ちることがよくあるので、こうやってアウトプットすることはやっぱり大事ですね この記事書いててやっとこの辺の知識がわかってきました汗 ##参考 https://www.youtube.com/watch?v=2jRkPz4-hSo&t=147s
1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?