面试题：Angular组件的生命周期钩子与变化检测

Question

阐述Angular组件生命周期钩子函数ngOnInit、ngOnChanges、ngDoCheck的触发时机和使用场景。在组件数据频繁变化的场景下，如何利用变化检测策略（默认、OnPush）优化性能？

Answer 1

ngOnInit

1. 触发时机：在Angular第一次显示数据绑定和设置指令/组件的输入属性之后，只调用一次。
2. 使用场景：用于组件的初始化，比如发起HTTP请求获取数据、初始化组件内变量等操作，这些操作只需要在组件创建时执行一次。

ngOnChanges

1. 触发时机：当组件的输入属性（@Input()）发生变化时就会触发，在组件初始化时也会触发一次。
2. 使用场景：当需要根据输入属性的变化来更新组件的状态或执行特定逻辑时使用，比如根据传入的不同参数重新计算某些值。

ngDoCheck

1. 触发时机：在每个变化检测周期中被调用，Angular默认的变化检测机制无法检测到的变化，可以通过此钩子来手动检测。
2. 使用场景：当需要检测那些Angular默认变化检测机制无法检测到的变化，如对象内部属性的变化（引用未变但内部值改变），就可以在这个钩子函数中手动实现检测逻辑。

利用变化检测策略优化性能

1. 默认策略：Angular默认的变化检测策略是 Default，它会在每个事件循环（如DOM事件、Promise回调等）之后检查组件树中的所有组件。在数据频繁变化的场景下，这种策略可能导致性能问题，因为每次变化都要检查整个组件树。
2. OnPush策略：将组件的变化检测策略设置为 OnPush，可以显著提升性能。当使用 OnPush 策略时，组件的变化检测只会在以下情况触发：
   • 组件的输入属性引用发生变化（如传入新的对象或数组）。
   • 组件接收到事件（如点击事件）。
   • 可观察对象（Observable）发出新值。 在数据频繁变化但输入属性引用不变的场景下，使用 OnPush 策略能避免不必要的变化检测，从而提高性能。比如，组件仅依赖于某个服务提供的不可变数据，并且不需要响应DOM事件之外的其他事件时，使用 OnPush 策略可以减少变化检测的频率。