Angular 2
Optimieren des Renderns mit ChangeDetectionStrategy

Standard vs OnPush

Betrachten Sie die folgende Komponente mit einer Eingabe myInput und einem internen Wert namens someInternalValue . Beide werden in der Vorlage einer Komponente verwendet.

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

@Component({
  template:`
  <div>
    <p>{{myInput}}</p>
    <p>{{someInternalValue}}</p>
  </div>
  `
})
class MyComponent {
  @Input() myInput: any;

  someInternalValue: any;

  // ...
}

Standardmäßig wird die changeDetection: im Komponentendekorator auf ChangeDetectionStrategy.Default . im Beispiel implizit. In dieser Situation lösen alle Änderungen an den Werten in der Vorlage ein erneutes Rendern von MyComponent . Mit anderen Worten, wenn ich myInput oder someInternalValue Winkel 2, wird Energie someInternalValue und die Komponente erneut someInternalValue .

Nehmen wir jedoch an, dass wir nur dann neu rendern möchten, wenn sich die Eingaben ändern. Berücksichtigen Sie die folgende Komponente mit changeDetection: ChangeDetectionStrategy.OnPush

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

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
  template:`
  <div>
    <p>{{myInput}}</p>
    <p>{{someInternalValue}}</p>
  </div>
  `
})
class MyComponent {
  @Input() myInput: any;

  someInternalValue: any;

  // ...
}

Durch Festlegen von changeDetection: auf ChangeDetectionStrategy.OnPush wird MyComponent nur dann neu MyComponent , wenn sich die Eingaben ändern. In diesem Fall muss myInput einen neuen Wert von seinem übergeordneten myInput erhalten, um ein erneutes Rendern auszulösen.