angular变更检测和onPush策略

 变更检测

当组件实例化之后，Angular 就会创建一个变更检测器，它负责传播组件各个绑定值的变化。 该策略是下列值之一：

• ChangeDetectionStrategy#OnPush 把策略设置为 CheckOnce（按需）。

• ChangeDetectionStrategy#Default 把策略设置为 CheckAlways。

更改任何模型时, Angular会检测到更改并立即更新视图。这是Angular中的更改检测。该机制的目的是确保基础视图始终与其对应的模型保持同步。

如   DOM事件(单击, 悬停等)    AJAX请求    计时器(setTimer(), setInterval())

1 Angular默认的change detection一旦触发，它会重新计算模板中以及绑定的表达式，然后再执行相应的视图更新。Angular最佳实践提出不要在模板中做比较复杂的计算或函数。

2 onPush机制那么就是告诉Angular在执行检测的时候，跳过当前组件内部的检测。只有当组件的input down输入有新值（变化）或内部有事件event up输出的时候，或者说组件再次通知Angular的检测机制来更新组件。

注意，在Angular的onPush检测机制中，只要组件的输入值input变化，组件内部才会执行更新。

但是在Javascript中，简单数据类型：boolean，null，未定义，Number，String；对象数据类型：数组，对象

简单数据类型在作为参数的时候是按值传递的，而复杂数据类型是按引用传递的。所以，如果按引用传递的值如Array或object数据类型发生变化，组件是不会更新的。

 

默认策略-更新引用类型时需要

this.arr = this.arr.push({xx:1})

onpush策略-组件再次通知Angular的检测机制来更新组件。

@Component({
  selector: 'app-onpush',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OnpushComponent implements OnInit {

  data = [];
  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {}

  private getDictList() {

    this.data = this.data.push({id:2});
    this.cdr.markForCheck();

 }