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

我碰巧在中看到了

ChangeDetectionStrategy

。它使用

OnPush

---

Angular2中的

ChangeDetectionStrategy

是什么，何时使用OnPush Vs Default？

如果对象是不可变的，并且不更改组件中对象的状态，请使用

OnPush

策略。当对象的每次更改都使运行更改检测器来解决更改时，它将比默认情况下执行得更好。中描述了或多或少类似的情况

为了告知Angular我们将遵守前面提到的条件以提高性能，我们将使用

OnPush

更改检测策略

医生说

• OnPush

  意味着在水合过程中更改检测器的模式将设置为

  CheckOnce

• 默认值

  表示变更检测器的模式将在变更期间设置为

  CheckAlways

---

此示例可以帮助您理解它：

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

---

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

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

ChangeDetectionStrategy.OnPush

： 它将仅在特定场景中更新视图：
*当某些事件被触发时。
*当输入值改变时

---

Default

意思是：始终更新视图。

以上所有答案都解释了推送和默认，我在这里发布了一个关于其实际工作原理的示例：

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';
  }
}

从'@angular/core'导入{Component，Input，ChangeDetectionStrategy}；
@组成部分({
选择器：“用户一号”，
changeDetection:ChangeDetectionStrategy.OnPush，
模板：`
{{user.name}
{{user.age}}岁
{{user.location}}

{{user.email}
内部更新
*不应该更新

`
})
导出类UserOneComponent{
@输入（）
用户；
更新（）{
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';
  }
}

从'@angular/core'导入{Component，Input，ChangeDetectionStrategy}；
@组成部分({
选择器：“用户2”，
changeDetection:ChangeDetectionStrategy.Default，
模板：`
{{user.name}
{{user.age}}岁
{{user.location}}

{{user.email}
内部更新
*应该更新

`
})
导出类UserTwoComponent{
@输入（）
用户；
更新（）{
this.user.name='Kevin Durant'；
}
}

每次我们更改诸如“this.user.email”或“this.user.name”之类的对象属性时，UserTwoComponent都会更新更改，但UserOneComponent仅在我们有新的用户对象时才会更改

---

如果您更改每个组件内的属性，它将继承ChangeDetectionStrategy，例如，如果我们在UserOneComponent内更改this.user.name，UserOneComponent和UserTwoComponent中的名称都将更改，但是如果我们在UserTwoComponent内更改名称，UserTwoComponent中唯一会更改的名称是angular framework提供的一项功能，该功能负责检查具有父子关系的指定组件之间发生的更改。

1.更改检测使角度应用程序更加高效，您可以明智地使用它。

2.有推送和默认两种策略。

3.OnPush策略在组件中指定的对象被修改时执行。否则它将保持原样。这就是为什么它能提高效率。

---

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

检查这是否意味着如果开发人员手动管理更改检测，则使用

OnPush

，默认情况下，Angular2执行此操作时？手动操作没有意义。什么是

水合作用

？@EpicPandaForce它是一个变化检测器正在执行的操作。

始终

在上面指定了什么？