LoginSignup
0
0

More than 3 years have passed since last update.

Angular勉強会 #4 ライフサイクルフック

Last updated at Posted at 2020-12-15
1 / 6

ライフサイクルフック

Angularに限らず、多くのViewフレームワークには「ライフサイクル」という考え方がある。これはViewの生成から破棄までの状態遷移を定義したもので、あらゆるView要素を同じライフサイクルで管理することで、効率的かつ拡張しやすいView構造としている。

「拡張しやすさ」を生み出すために、Viewの各ライフサイクルに処理を挿入することができる。これをライフサイクルフックといい、多くのViewフレームワークで標準的に備わっている機能となる。

Angularでは、Viewを管理するComponentにおいて、ライフサイクルフックが可能になっている。


Angular Component のライフサイクル

image.png

Angularの公式ドキュメントも参照


ngOnXXX を購読するには

それぞれ対応するInterfaceが用意されているので、Component内でそれを実装すればよい。
呼び出しはAngularが勝手に行ってくれる。

export class ComponentOverviewComponent implements OnInit {
  ngOnInit(): void {}
}

ngOnDestroy は最後の砦

ngOnDestroyはコンポーネントを削除する際のファイナライザのような役割をもち、コンポーネント内で利用しているリソースの後始末を行う必要がある(それを怠るとメモリリークとなり、パフォーマンスに大きな影響を与える)

代表的なものは以下

  • DOM要素へのイベントハンドラ(onClickなど)
  • Promiseなどのコールバックオブジェクトの登録
  • Observable要素の購読
  • タイマーの停止

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