angular 有关侦测组件变化的 ChangeDetectorRef 对象

我们知道,如果我们绑定了组件数据到视图,例如使用 <p>{{content}}</p>,如果我们在组件中改变了content的值,那么视图也会更新为对应的值。

angular 会在我们的组件发生变化的时候,对我们的组件执行变化检测,如果检测到我们的数据发生了变化,就会执行某些操作,如修改绑定数据的时候更新视图。

这样一来,当我们的组件数据比较多的时候,angular就会有很多操作在静悄悄地进行,一个规避这个问题的方法是,设置某个组件的变化检测策略为 'OnPush'。

使用 OnPush 会指引 angular 去检测那些引用发生变化的对象,而不是某个对象下的属性发生变化就执行变化检测的操作。

 

该方法有以下几个方法:

class ChangeDetectorRef {
  markForCheck(): void
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}

 

detach 和 reattach

先来说 detach 和 reattach,顾名思义,顾名思义... 只可意会

detach 方法的用处是,告诉 angular,暂时不用管当前组件的变化了,也就是说,当我们在组件上调用 ChangeDetectorRef  的 detach 方法之后,angular 在该组件数据发生变化的时候,不再执行更新视图等操作。

相反的,reattach 就是让 angular 在组件数据发生变化的时候重新检测该组件的变化,在该组件数据变化的时候,执行如更新视图的操作。

import {ChangeDetectorRef, Component} from '@angular/core';

class DataProvider {
  data = 1;

  constructor() {
    setInterval(() => {
      this.data = this.data * 2;
    }, 500);
  }
}

@Component({
  selector: 'live-data',
  inputs: ['live'],
  template: 'Data: {{dataProvider.data}}'
})
export class LiveData {
  constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {}

  set live(value) {
    if (value) {
      this.ref.reattach();
    } else {
      this.ref.detach();
    }
  }
}

@Component({
  selector: 'app-root',
  providers: [DataProvider],
  template: `
    Live Update: <input type="checkbox" [(ngModel)]="live">
    <live-data [live]="live"></live-data>
  `,
})
export class AppComponent {
  live = true;
}

 

上面的例子中,当我们勾中 checkbox 的时候,会发现,右边的数字一直在更新,而当我们取消勾选的时候,数字停止了更新。

也就是说,当我们 detach 的时候,angular 从变化检测树上移除了该组件,reattach 的时候,angular 把该组件重新加到了变化检测树上。

 

 

markForCheck

说到这个就不得不说一说 angular 的 ChangeDetectionStrategy 了,参见另外一篇文章:todo

当我们调用 ChangeDetectorRef  的 markForCheck 方法之后,angular 会在变化检测周期中检测该组件,

如果我们设置了组件的 changeDetection 为 OnPush 的时候,不使用 markForCheck 方法我们更新数据视图是不会更新的。

@Component({
  selector: 'cmp',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `Number of ticks: {{numberOfTicks}}`
})
export class Cmp {
  numberOfTicks = 0;

  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks++;
     // 如果我们不调用下面这一句,视图将不会更新
      this.ref.markForCheck();
    }, 1000);
  }
}

@Component({
  selector: 'app-root',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<cmp></cmp>`
})
export class App {}

  

detectChanges

检查一遍 变化检测器 (change detector)  和它的子检测器。

可以配合 ChangeDetectorRef 来实现局部变化检查。

有些時候,对于更新频繁数据量又很大的列表,我们不想 angular 在列表变化的时候马上更新视图,我们可以手动去调用 detectChanges 方法,去强制 angular 检查 组件数据的变化。

这样一来,就可以实现自主控制视图更新频率,而不用担心有太大的性能问题了。

 

checkNoChanges

检测该组件及其子组件,如果有变化存在则报错,用于开发阶段二次验证变化已经完成。

 

posted @ 2018-01-28 09:00 eleven24 阅读(...) 评论(...) 编辑 收藏