钩子函数

1. 什么是生命周期钩子
   • 指的是从组件被ng创建到销毁中间的一些状态，ng为用户提供了在这些状态发生的时候可做的自定义的操作
   • 比如说构造函数初始化完成以后可以让用户自己初始化组件的数据
   • 比如说组件被销毁之前可以做一些操作
   • ...
2. Angular将按照下面列表中的钩子函数顺序执行
   1. ngOnChanges()
      • 当 Angular 设置或重新设置数据绑定的输入属性时响应
      • 它把每个发生变化的属性名都映射到了一个SimpleChange对象， 该对象中有属性的当前值和前一个值
      • 注意，这发生的非常频繁，所以你在这里执行的任何操作都会显著影响性能
      • 其Interface名称为OnChanges
      • 使用详情，请参考官网检测变更钩子
   2. ngOnInit()
      • 在 Angular 初始化组件以后的某个时机会执行(在第一次 ngOnChanges 完成后调用，只会调用一次)。
      • 一般是用于在构造函数之外初始化组件数据，比如说通过Http请求获取的数据
      • 其Interface名称为OnInit
      • 使用详情，请参考官网初始化钩子
   3. ngDoCheck()
      • ngOnChanges() 无法捕获的变更可以使用此钩子
      • 自定义检测虽然很好，但是被调用的频率太高，如果要使用此钩子，其实现必须非常轻量级，否则会很影响用户体验
      • 其Interface名称为DoCheck
      • 使用详情，请参考官网docheck
   4. ngAfterContentInit()
      • 等有时间了再慢慢研究
      • 使用详情，请参考官网aftercontent
   5. ngAfterContentChecked()
      • 等有时间了再慢慢研究
      • 使用详情，请参考官网aftercontent
   6. ngAfterViewInit()
      • 等有时间了再慢慢研究
      • 使用详情，请参考官网afterview
   7. ngAfterViewChecked()
      • 等有时间了再慢慢研究
      • 使用详情，请参考官网afterview
   8. ngOnDestroy()
      • Angular 每次销毁指令/组件之前调用，在这里反订阅可观察对象和分离事件处理器，以防内存泄漏。
      • 基本上都是用于释放不会被自动回收的资源，比如说取消订阅、停止监视DOM事件(Directive)、停止interval计时器、反注册局部或者全局的回调事件。
      • 也可以用于通知，比如说告知其他组件，当前组件即刻要消失。
      • 使用详情，请参考官网ondestroy
3. 参考：https://angular.cn/guide/lifecycle-hooks

搜索

复制