angular 2 - 006 change detection 脏治检查 - DC

ANGULAR CHANGE DETECTION EXPLAINED

引发脏治检查有三种方式:

1. Events - click, submit, …
2. XHR - Fetching data from a remote server
3. Timers - setTimeout(), setInterval()

跳过子组件检查

跳过没必要的子组件检查可以提升性能

input是一个observables的时候, 如何实现跳过DC?

@Component({
  template: '{{counter}}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
class CartBadgeCmp {

  @Input() addItemStream:Observable<any>;
  counter = 0;

  ngOnInit() {
    this.addItemStream.subscribe(() => {
      this.counter++; // application state changed
    })
  }
}

constructor(private cd: ChangeDetectorRef) {}

ngOnInit() {
    this.addItemStream.subscribe(() => {
      this.counter++; // application state changed
      this.cd.markForCheck(); // marks path
    })
  }
}

Virtual DOM

ng2引入VM, 实现只更新变化的视图部分