面试题答案
一键面试1. 变更检测策略概述
Angular 使用变更检测机制来检查组件状态的变化，并相应地更新 DOM。有两种主要的变更检测策略：默认策略和 OnPush 策略。
2. 默认策略（Default）
- 工作原理：
- 当 Angular 应用的事件循环（如 DOM 事件、Promise 回调、定时器等）触发时，Angular 会从根组件开始，自上而下递归地检查组件树中每个组件的输入属性、绑定表达式以及模板引用变量等是否发生变化。
- 它通过对比新值和旧值来确定是否有变化，对于对象和数组，默认情况下比较的是引用，而非内容。
- 适用场景：
- 适用于大多数通用场景，尤其是组件之间数据流动频繁且数据变化难以预测的情况。例如，一个实时聊天应用，消息频繁更新，每个组件都可能随时因新消息而改变状态。
3. OnPush 策略
- 工作原理：
- 当组件标记为
ChangeDetectionStrategy.OnPush时，Angular 只会在以下情况检查该组件及其子组件的变化：- 组件的输入属性引用发生变化。例如，传入一个新的对象或数组引用。
- 组件接收到事件（如用户点击、键盘输入等 DOM 事件）。
- 组件内的 Observable 发出新值（前提是该 Observable 是使用
async管道订阅的，或者手动标记为ChangeDetectorRef.markForCheck）。
- 这意味着如果输入属性引用未变，且没有相关事件触发，Angular 会跳过该组件及其子组件的变更检测，从而提高性能。
- 当组件标记为
- 适用场景：
- 适用于那些输入相对稳定，输出主要依赖于输入且不频繁变化的组件。例如，展示静态数据的卡片组件，只要输入数据不更新，组件状态就不会改变。
4. 手动触发变更检测
- 使用
ChangeDetectorRef：- 在组件中注入
ChangeDetectorRef：
- 在组件中注入
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
export class ExampleComponent {
constructor(private cdRef: ChangeDetectorRef) {}
}
- 手动触发变更检测：
export class ExampleComponent {
constructor(private cdRef: ChangeDetectorRef) {}
someMethod() {
// 在这里执行一些会改变组件状态的操作
this.cdRef.detectChanges(); // 手动触发变更检测
}
}
- 使用
markForCheck：markForCheck方法标记组件及其祖先组件在下一次变更检测运行时进行检查。
export class ExampleComponent {
constructor(private cdRef: ChangeDetectorRef) {}
someMethod() {
// 执行改变状态的操作
this.cdRef.markForCheck();
}
}
5. 不当使用变更检测策略导致的性能问题及解决办法
- 性能问题：
- 默认策略过度检测：如果在不必要的地方使用默认策略，由于每次事件循环都会检查整个组件树，可能导致性能下降，尤其是在大型应用中。例如，一个包含大量子组件的列表，每个子组件都有默认的变更检测策略，即使只有一个子组件的数据发生变化，整个列表及其所有子组件都会进行变更检测。
- OnPush 策略更新不及时：当在 OnPush 组件中没有正确处理数据更新时，可能会导致组件状态更新不及时。比如，没有正确处理 Observable 数据，或者错误地认为输入属性引用不变就无需更新，而实际上数据内容已经改变。
- 解决办法：
- 优化默认策略：尽量减少不必要的绑定和复杂表达式，避免在模板中进行过多计算。可以将计算逻辑放在组件类中，并使用
OnPush策略优化部分组件。 - 正确使用 OnPush 策略：确保在 OnPush 组件中正确处理输入属性变化，尤其是对于对象和数组，必要时使用不可变数据结构来触发变更检测。对于 Observable 数据，使用
async管道订阅，以确保数据更新时能正确触发变更检测。如果需要手动触发，合理使用ChangeDetectorRef的方法。
- 优化默认策略：尽量减少不必要的绑定和复杂表达式，避免在模板中进行过多计算。可以将计算逻辑放在组件类中，并使用