angular变更检测和onPush策略

 变更检测

更改任何模型时, 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();
 } 

 

上一篇:运算器(串行加法器和并行加法器,ALU)


下一篇:前端面试题