Angular2中的变化检测器

    我们知道在Angular2中的数据流是单向的,而且每个组件都有一个变化检测器,这样所有组件的变化检测器就构成了一个树状结构。每次变化检测都会从根组件逐个进行检测,但是这样会带来不必要的性能浪费,尤其是,比如在template中会对value进行format:

<div>{{formattedValue(value)}}</div>

    在每次变化检测是都会执行该方法,而且变化检测执行的次数有可能是你意向不到的多。因为在有以下事情发生时变化检测都会执行:

  • setTimeout
  • ajax请求返回
  • 鼠标等事件发生

    那么如何避免在数据没有发生变化时不对该组件进行变化检测呢?在定义组件时添加如下配置:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})

    当定义OnPush策略时,如果数据没有发生变化则跳过对该组件的变化检测。如果想触发变化检测,可以调用ChangeDetectorRef的markForCheck方法。前提是需要将ChangeDetectorRef注入进来。

这样的话,可以避免一些不必要的变化检测。

猜你喜欢

转载自blog.csdn.net/zhaoruda/article/details/79405595