Angular 官方开发指南总结
1.变更检测
变更检测是Angular检查应用程序状态是否已更改以及是否需要更新任何DOM的过程。Angular会从上道谢遍历你的组件，寻找更改。而且会定期运行其变更检测机制，实现对数据模型的更改反应在应用程序的视图中。变更检测可以手动触发或异步事件来触发。
1.1 区域(Zone)污染
Zonge是一种信号机制，Angular用来检测应用程序的状态何时可能已更改，它捕获异步操作。如：`settimeout`、网络请求和事件监听器。angular根据zone安排变更检测。
某些情况下，已经安排的任务或微任务不会对数据模型进行任何更改，此时不需要变更检测。常见的例子
- `requestAnimationFrame`、`setTimeout`、`setInterval`
- 第三方库的任务或微任务调度
在NgZone之外运行任务 在上述情况下可以指示angular避免使用NgZone为给定代码段调度的任务调用变更检测。
import { Component, NgZone, OnInit } from '@angular/core';
@Component(...)
class AppComponent implements OnInit {
constructor(private ngZone: NgZone) {}
ngOnInit() {
this.ngZone.runOutsideAngular(() => setInterval(pollForUpdates), 500);
}
}
上述代码通过runOutsidAngular告诉angular应该在Angular Zone之外执行setInterval并在pollForUpdates运行之后跳过运行变更检测。
1.2 慢速计算
在每个变更检测周期上，Angular都会同时进行
- 除非另有指定，否则会根据每个组件的检测策略估算所有组件中的所有模板表达式
- 执行
ngDoCheck、ngAfterContentChecked、ngAfterViewChecked和ngOnChanges生命周期钩子。模板中的单个慢速计算或生命周期钩子可能会减慢整个变更检测过程，因为 Angular 会按顺序运行计算。
优化慢速计算
- 优化底层算法。这是推荐的方法；如果你可以加快导致问题的算法的速度，则可以加快整个变更检测机制。
- 使用纯管道进行缓存。你可以将繁重的计算移动到纯管道中。与 Angular 上一次调用它时相比，只有在检测到其输入发生更改时，Angular 才会重新估算纯管道。
1.3 跳过组件子树
默认情况下，JavaScript会使用你可以从多个不同组件引用的可变数据结构。Angular会在你的整个组件树上运行变更检测，以确保数据结构的最新状态反映在DOM中。
对于大多数应用程序，变更检测都足够快，但是，当应用成旭有特别大的组件树时，在整个应用程序中运行变更检测可能会导致性能问题，可以通过将变更检测配置为仅在组件树的子集上运行来解决。
如果确定应用程序的一部分不受状态更改的影响，可以使用`OnPush`跳过整个组件子树中的变更检测。
使用OnPush OnPush 变更检测会指示 Angular 仅在以下情况下为组件子树自动运行变更检测：
- 子树的根组件接收到作为模板绑定的结果的新输入。Angular 将输入的当前值和过去值使用
==进行比较 - Angular 处理使用了 OnPush 变更检测策略的组件中的事件时
import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {}
