2

次のコードを検討してください

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、コンポーネント ツリー内の監視対象のすべての変数の値が等しいかどうかがチェックされます。値が等しい場合、その特定のコンポーネントは再レンダリングされ、値が等しい場合、その特定のコンポーネントは再レンダリングされません。

  2. ChangeDetectionStrategy.OnPushコンポーネントに追加する場合。以下のように動作が変化します

    私。コンポーネント内の変数に参照変更がある場合、コンポーネントが再レンダリングされ、子コンポーネントの変更検出がチェックされます (特定の変更検出アルゴリズムの値/参照チェックは に依存しますChangeDetectionStrategy.OnPush) 。

    ii. コンポーネント内の変数に参照の変更がない場合、コンポーネントは再レンダリングされず、子コンポーネントの変更検出はチェックされません。ChangeDetectionStrategy.OnPush

これは正しい解釈ですか？

4

2 に答える 2

0

この投稿では、かなり詳しく説明しています。

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

于 2016-04-18T19:35:02.180 に答える