这篇文章给大家介绍Angular中的onPush变更检测策略有哪些，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

成都创新互联专注于海湖新企业网站建设,成都响应式网站建设,电子商务商城网站建设。海湖新网站建设公司,为海湖新等地区提供建站服务。全流程定制网站，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

默认的变更检测策略

默认情况下，Angular使用ChangeDetectionStrategy.Default策略来进行变更检测。

默认策略并不事先对应用做出任何假设，因此，每当用户事件、记时器、XHR、promise等事件使应用中的数据将发生了改变时，所有的组件中都会执行变更检测。

这意味着从点击事件到从ajax调用接收到的数据之类的任何事件都会触发更改检测。

通过在组件中定义一个getter并且在模板中使用它，我们可以很容易的看出这一点：

@Component({
  template: `
    
Hello {{name}}!
    {{runChangeDetection}}
  `
})
export class HelloComponent {
  @Input() name: string;

  get runChangeDetection() {
    console.log('Checking the view');
    return true;
  }
}

@Component({
  template: `
    
    Trigger change detection
  `
})
export class AppComponent  {
  onClick() {}
}

执行以上代码后，每当我们点击按钮时。Angular将会执行一遍变更检测循环，在console里我们可以看到两行“Checking the view”的日志。

这种技术被称作脏检查。为了知道视图是否需要更新，Angular需要访问新值并和旧值比较来判断是否需要更新视图。

现在想象一下，如果有一个有成千上万个表达式的大应用，Angular去检查每一个表达式，我们可能会遇到性能上的问题。

那么有没有办法让我们主动告诉Angular什么时候去检查我们的组件呢？

OnPush变更检测策略

我们可以将组件的ChangeDetectionStrategy设置成ChangeDetectionStrategy.OnPush。

这将告诉Angular该组件仅仅依赖于它的@inputs()，只有在以下几种情况才需要检查：

1. Input引用发生改变

通过设置onPush变更检测测策略，我们与Angular约定强制使用不可变对象（或稍后将要介绍的observables）。

在变更检测的上下文中使用不可变对象的好处是，Angular可以通过检查引用是否发生了改变来判断视图是否需要检查。这将会比深度检查要容易很多。

让我们试试来修改一个对象然后看看结果。

@Component({
  selector: 'tooltip',
  template: `
    
{{config.position}}
    {{runChangeDetection}}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TooltipComponent  {

  @Input() config;

  get runChangeDetection() {
    console.log('Checking the view');
    return true;
  }
}

@Component({
  template: `
    
  `
})
export class AppComponent  {
  config = {
    position: 'top'
  };

  onClick() {
    this.config.position = 'bottom';
  }
}

这时候去点击按钮时看不到任何日志了，这是因为Angular将旧值和新值的引用进行比较，类似于：

/** Returns false in our case */
if( oldValue !== newValue ) { 
  runChangeDetection();
}

值得一提的是numbers, booleans, strings, null 、undefined都是原始类型。所有的原始类型都是按值传递的. Objects, arrays, 还有 functions 也是按值传递的，只不过值是引用地址的副本。

所以为了触发对该组件的变更检测，我们需要更改这个object的引用。

@Component({
  template: `
    
  `
})
export class AppComponent  {
  config = {
    position: 'top'
  };

  onClick() {
    this.config = {
      position: 'bottom'
    }
  }
}

将对象引用改变后，我们将看到视图已被检查，新值被展示出来。

2.源于该组件或其子组件的事件

当在一个组件或者其子组件中触发了某一个事件时，这个组件的内部状态会更新。 例如：

@Component({
  template: `
    Add
    {{count}}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
  count = 0;

  add() {
    this.count++;
  }

}

当我们点击按钮时，Angular执行变更检测循环并更新视图。

你可能会想,按照我们开头讲述的那样，每一次异步的API都会触发变更检测，但是并不是这样。

你会发现这个规则只适用于DOM事件，下面这些API并不会触发变更检测：

@Component({
  template: `...`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
  count = 0;

  constructor() {
    setTimeout(() => this.count = 5, 0);

    setInterval(() => this.count = 5, 100);

    Promise.resolve().then(() => this.count = 5); 
    
    this.http.get('https://count.com').subscribe(res => {
      this.count = res;
    });
  }

  add() {
    this.count++;
  }

注意你仍然是更新了该属性的，所以在下一个变更检测流程中，比如去点击按钮，count值将会变成6(5+1)。

3. 显示的去执行变更检测

Angular给我们提供了3种方法来触发变更检测。

第一个是detectChanges()来告诉Angular在该组件和它的子组件中去执行变更检测。

@Component({
  selector: 'counter',
  template: `{{count}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent { 
  count = 0;

  constructor(private cdr: ChangeDetectorRef) {

    setTimeout(() => {
      this.count = 5;
      this.cdr.detectChanges();
    }, 1000);

  }

}

第二个是ApplicationRef.tick()，它告诉Angular来对整个应用程序执行变更检测。

tick() {
 
  try {
    this._views.forEach((view) => view.detectChanges());
    ...
  } catch (e) {
    ...
  }
}

第三是markForCheck()，它不会触发变更检测。相反,它会将所有设置了onPush的祖先标记,在当前或者下一次变更检测循环中检测。

markForCheck(): void { 
  markParentViewsForCheck(this._view); 
}

export function markParentViewsForCheck(view: ViewData) {
  let currView: ViewData|null = view;
  while (currView) {
    if (currView.def.flags & ViewFlags.OnPush) {
      currView.state |= ViewState.ChecksEnabled;
    }
    currView = currView.viewContainerParent || currView.parent;
  }
}

需要注意的是，手动执行变更检测并不是一种“hack”，这是Angular有意的设计并且是非常合理的行为（当然，是在合理的场景下）。

Angular Async  pipe

async pipe会订阅一个 Observable 或 Promise，并返回它发出的最近一个值。

让我们看一个input()是observable的onPush组件。

@Component({
  template: `
    Add
    
  `
})
export class AppComponent {
  items = [];
  items$ = new BehaviorSubject(this.items);

  add() {
    this.items.push({ title: Math.random() })
    this.items$.next(this.items);
  }
}

@Component({
  template: `
     {{item.title}}