我们知道在Angular2中的数据流是单向的,而且每个组件都有一个变化检测器,这样所有组件的变化检测器就构成了一个树状结构。每次变化检测都会从根组件逐个进行检测,但是这样会带来不必要的性能浪费,尤其是,比如在template中会对value进行format:
<div>{{formattedValue(value)}}</div>
在每次变化检测是都会执行该方法,而且变化检测执行的次数有可能是你意向不到的多。因为在有以下事情发生时变化检测都会执行:
- setTimeout
- ajax请求返回
- 鼠标等事件发生
那么如何避免在数据没有发生变化时不对该组件进行变化检测呢?在定义组件时添加如下配置:
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
})
当定义OnPush策略时,如果数据没有发生变化则跳过对该组件的变化检测。如果想触发变化检测,可以调用ChangeDetectorRef的markForCheck方法。前提是需要将ChangeDetectorRef注入进来。
这样的话,可以避免一些不必要的变化检测。