Angular2 中的 ChangeDetectionStrategy 是什么以及何时使用 OnPush Vs Default？答案

【问题标题】：What is ChangeDetectionStrategy in Angular2 and when to use OnPush Vs Default?Angular2 中的 ChangeDetectionStrategy 是什么以及何时使用 OnPush Vs Default？
【发布时间】：2017-03-01 21:42:45
【问题描述】：

我碰巧在ngrx documentation 中看到了ChangeDetectionStrategy。它使用OnPush。

Angular2 中的ChangeDetectionStrategy 是什么，什么时候使用 OnPush Vs Default？

【问题讨论】：

查看article

标签： angular

【解决方案1】：

以上所有答案都解释了OnPush 和Default，在这里我发布了一个关于它是如何工作的示例： https://plnkr.co/edit/hBYb5VOrZYEsnzJQF5Hk?p=preview

user-one.component.ts ：

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

@Component({
  selector: 'user-one',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div>
      <h4>{{ user.name }}</h4>
      <h5>{{ user.age }} years old</h5>
      {{ user.location }} <br />
      {{ user.email }}

      <button (click)="update()">Internal update</button>
      <p>* should not update</p>
    </div>
  `
})
export class UserOneComponent {
  @Input()
  user;

  update() {
    this.user.name = 'Lebron James';
  }
}

user-two.component.ts：

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

@Component({
  selector: 'user-two',
  changeDetection: ChangeDetectionStrategy.Default,
  template: `
    <div>
      <h4>{{ user.name }}</h4>
      <h5>{{ user.age }} years old</h5>
      {{ user.location }} <br />
      {{ user.email }}

      <button (click)="update()">Internal update</button>
      <p>* should update</p>
    </div>
  `
})
export class UserTwoComponent {
  @Input()
  user;

  update() {
    this.user.name = 'Kevin Durant';
  }
}

每次我们更改像“this.user.email”或“this.user.name”这样的对象属性时，UserTwoComponent 总是会更新更改，但 UserOneComponent 只有在我们有新的用户对象时才会更改。

如果更改每个组件内部的属性，它会继承 ChangeDetectionStrategy，例如，如果我们在 UserOneComponent 中更改 this.user.name，则 UserOneComponent 和 UserTwoComponent 中的名称都会更改，但如果我们在 UserTwoComponent 内部更改名称，则只有名称UserTwoComponent 内部会改变

【讨论】：

【解决方案2】：

如果您的对象是不可变的并且您不更改组件中对象的状态，请使用OnPush 策略。它将执行得更好，而不是默认情况下，对象的每次更改都会运行更改检测器来解决更改。 Change Detection Strategy: OnPush

中描述了或多或少相似的内容

为了通知 Angular 我们将遵守前面提到的条件以提高性能，我们将使用OnPush 更改检测策略

Angular 文档说

ChangeDetectionStrategy:

OnPush 表示水合期间变化检测器的模式将设置为CheckOnce。

Default 表示水化期间变化检测器的模式将设置为CheckAlways。

【讨论】：

如果开发人员手动管理变更检测，是否意味着使用OnPush，默认是Angular2做的？
手动使用哪种策略没有意义。
什么是hydration？
@EpicPandaForce 这是一个变化检测器。

【解决方案3】：

我在那个链接中看到了一个非常好的和简单的解释：

http://www.codecompiled.com/change-detection-in-angular-2/

ChangeDetectionStrategy.OnPush: 它只会在特定情况下更新视图：
* 当某个事件被触发时。
* 当输入值改变时。

Default 意思是：总是更新视图。

【讨论】：

上面指定的always 是什么？

【解决方案4】：

这个例子可以帮助你理解它：

change_detection_strategy_onpush

angular2-with-immutablejs-and-redux

那么当一个事件被触发时会发生什么呢？在 Angular 1.x 中，当一个摘要循环被触发时，整个应用程序中的每个绑定都会被触发。同样在 Angular 2 中，每个单独的组件也会被检查。现在告诉 Angular 仅在其输入属性之一发生更改而不是每次事件发生时才对组件运行更改检测不是很酷吗？我们可以在组件级别使用 Angular 的 ChangeDetectionStrategy。

OnPush 只关注输入属性，默认检查所有属性。

【讨论】：

【解决方案5】：

更改检测是 Angular 框架提供的一项功能，它负责检查指定组件与父子关系之间发生的更改。

1.变化检测使角度应用更有效，您明智地使用它。

2.它有两种策略onPush和Default。

3.OnPush策略在组件中的指定对象被修改时执行，否则保持原样。这就是它高效的原因。

4.默认策略使应用程序在发现更改时立即执行。

【讨论】：