为什么在设置了OnPush标志的情况下,Angular2在更改检测过程中同时捕捉到引用更改和基元更改

Why is both reference change and primitive change catch by Angular2 during change detection even with OnPush flag set?

本文关键字:引用 过程中 检测 标志 OnPush 情况下 为什么 Angular2 设置      更新时间:2023-09-26

考虑以下代码

import {Component, OnInit, Input, OnChanges, DoCheck, ChangeDetectionStrategy} from 'angular2/core'
@Component({
  selector: 'child1',
  template: `
    <div>reference change for entire object: {{my_obj1.name}}</div>
    <div>reassign primitive in property of object: {{my_obj2.name}}</div>
    <div>update primitive in property of object: {{my_obj2.num}}</div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class Child1 {
  @Input()
  my_obj1: Object = {'name': ''};
  @Input()
  my_obj2: Object = {'name': '', 'num': 0};
  ngDoCheck() {
    console.log('check from child1');
    console.log(this.my_obj1);
    console.log(this.my_obj2);
  }
}
@Component({
  selector: 'parent',
  template: `
    <div>
      <child1
        [my_obj1]="my_obj1"
        [my_obj2]="my_obj2"
      >
      </child1>
      <button (click)="change_obj1()">
        Change obj1
      </button>
    </div>
    `,
  directives: [Child1]
})
export class App {
  my_obj1: Object = {'name': 'name1'};
  my_obj2: Object = {'name': 'name2', 'num': 0};
  change_obj1() {
    this.my_obj1 = {'name': 'change1'}
    this.my_obj2['name'] = 'change2';
    this.my_obj2['num'] += 1;
  }
}

从我做的实验来看,以下是我对当前Angular2变化检测策略的理解,有人能验证它是否属实吗?

  1. Angular2在进行更改检测时默认检查值是否相等。如果不存在ChangeDetectionStrategy.OnPush,则检查组件树中的每个关注变量的值是否相等。如果值相等为false,则会重新提交该特定组件;如果值相等值为true,则不会重新提交该具体组件。

  2. 如果将ChangeDetectionStrategy.OnPush添加到零部件中。行为变化如下

    i。如果组件内的变量发生参考变化,则重新绘制组件,并检查子组件的变化检测(其具体的变化检测算法值/参考检查取决于ChangeDetectionStrategy.OnPush

    ii。如果组件内的变量没有参考变化,则不重新绘制组件,并且不检查子组件的变化检测,无论是否存在ChangeDetectionStrategy.OnPush

这是正确的解释吗?

我重新设计了你的plunker:新的plunker

由于基元值是不可变的,因此重新分配和更新之间没有区别–基元获得了新的不可变值,所以我删除了"更新"代码。此外,将分配一个新的对象引用(它确实会触发变化检测)和分配一个新基元值(它不会触发变化检测。所以我也这么做了。

如果你运行我的Plunker,我们可以进行以下观察:

  1. 更改OnPush组件上的引用类型的输入属性将更新组件的视图。将检查模板绑定是否有更改。此外,还会检查子组件(假设它们未使用OnPush
  2. 更改OnPush组件上引用类型中包含的基元属性将不会更新组件的视图。不检查模板绑定是否有更改。此外,无论是否使用OnPush,都不会检查子组件
  3. ngDoCheck()总是在第一个OnPush组件上调用,而不管是否检查模板绑定的更改。我觉得这很奇怪(谁知道呢,也许是个bug)。因此,仅仅因为调用了ngDoCheck()并不一定意味着检查了模板绑定

请注意,当检测到模板绑定更改时,只有该更改才会传播到子组件或DOM(视情况而定,具体取决于绑定类型)。如果绑定更改导致DOM更改,则不会重新绘制整个组件。只有绑定的DOM数据才会更新,浏览器才会更新这一个DOM元素。(这与其他一些框架不同,在其他框架中,如果发现任何更改,它们会重新提交整个模板。这有助于提高Angular的速度。)

这篇文章非常详细地解释了它:

http://victorsavkin.com/post/133936129316/angular-immutability-and-encapsulation

简而言之,你的假设是正确的。Angular2必须是保守的,并检查值是否相等,即它必须对引用的对象进行"深度检查"。

使用ChangeDetectionStrategy.OnPush,只有当对其输入对象的引用发生更改时,才会更新组件。

这就是为什么不可变对象可以是首选的数据结构——如果我们必须更新一个对象,那么组件现在正在引用一个新对象。因此,angular很容易知道哪些组件必须更新。

通过ChangeDetectorRef.markForCheck();方法,性能行为也可以通过可观察性来实现。

这里对此进行了解释:

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html