面试题：Angular组件的生命周期钩子函数与性能优化

ngOnInit：
- 用途：该钩子在组件初始化时被调用一次。在此处进行一次性的初始化操作，比如获取初始数据、设置初始状态等。
- 性能优化：避免在ngOnInit中进行复杂的实时计算或频繁触发渲染的操作。因为这些操作会在组件创建时就执行，可能导致加载缓慢。例如，如果需要从后端获取数据，尽量使用可观察对象（Observable）并结合async管道来处理数据，这样可以避免阻塞主线程，提高性能。
ngOnChanges：
- 用途：当组件的输入属性（@Input()）发生变化时，该钩子会被调用。
- 性能优化：
  - 在频繁更新数据的场景下，首先要判断变化是否有实际意义。可以通过比较新旧值来决定是否执行后续操作。例如：

ngOnChanges(changes: SimpleChanges) {
  const myInputChange = changes['myInput'];
  if (myInputChange &&!isEqual(myInputChange.previousValue, myInputChange.currentValue)) {
    // 只有当值真正变化时才执行后续计算
    this.doCalculation();
  }
}

 - 避免在`ngOnChanges`中进行不必要的DOM操作或复杂计算，因为它可能会在短时间内频繁触发。如果确实需要更新视图，尽量使用`ChangeDetectorRef`的`markForCheck`方法而不是直接触发完整的变更检测，这样可以减少不必要的渲染。

3. ngOnDestroy：

用途：当组件被销毁时，该钩子会被调用。
性能优化：在这里清理资源，如取消订阅可观察对象、解绑事件监听器等。如果不清理这些资源，可能会导致内存泄漏，随着组件的频繁创建和销毁，性能会逐渐下降。例如：

private subscription: Subscription;
ngOnInit() {
  this.subscription = this.dataService.getData().subscribe(data => {
    // 处理数据
  });
}
ngOnDestroy() {
  this.subscription.unsubscribe();
}

其他生命周期钩子辅助性能优化：
- ngDoCheck：
  - 用途：开发者自定义的变更检测钩子，默认情况下，Angular的变更检测机制会检查组件及其子组件的所有绑定。ngDoCheck可以让开发者在默认检测机制之外自定义检测逻辑。
  - 性能优化：在频繁更新数据场景下，如果默认的变更检测过于频繁或不准确，可以在ngDoCheck中实现更精细的检测逻辑。但要注意，由于它会在每次变更检测周期中调用，所以实现逻辑应尽量轻量，避免复杂计算，否则可能会降低性能。
- ngAfterContentInit 和 ngAfterContentChecked：
  - 用途：ngAfterContentInit在组件内容（通过<ng-content>投影进来的内容）初始化后调用，ngAfterContentChecked在每次组件内容检查后调用。
  - 性能优化：在处理投影内容相关的性能优化时，如果需要在投影内容初始化后执行一些一次性操作（如初始化第三方UI组件等），可以在ngAfterContentInit中进行。而ngAfterContentChecked可用于在投影内容频繁更新时，做一些轻量级的自定义检查和处理，但同样要避免复杂计算。
- ngAfterViewInit 和 ngAfterViewChecked：
  - 用途：ngAfterViewInit在组件视图（包括子视图）初始化后调用，ngAfterViewChecked在每次组件视图检查后调用。
  - 性能优化：ngAfterViewInit适用于在视图完全初始化后执行操作，如操作DOM元素（前提是操作是必要且性能开销合理的）。ngAfterViewChecked可用于在视图频繁更新时进行自定义检查，但由于调用频繁，应确保逻辑简单，避免影响性能。

星途面试题库

面试题：Angular组件的生命周期钩子函数与性能优化

知识考点

面试题答案