Angular 2
Optimisation du rendu à l'aide de ChangeDetectionStrategy

Défaut vs OnPush

Considérez le composant suivant avec une entrée myInput et une valeur interne appelée someInternalValue . Les deux sont utilisés dans le modèle d'un composant.

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

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

  someInternalValue: any;

  // ...
}

Par défaut, la propriété changeDetection: du composant decorator sera définie sur ChangeDetectionStrategy.Default ; implicite dans l'exemple. Dans cette situation, toute modification apportée à l'une des valeurs du modèle déclenchera un nouveau rendu de MyComponent . En d'autres termes, si je change myInput ou someInternalValue angular 2 exercera une énergie et restituera le composant.

Supposons, cependant, que nous ne souhaitons que rendre à nouveau lorsque les entrées changent. Considérez le composant suivant avec changeDetection: défini sur 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;

  // ...
}

En définissant le paramètre changeDetection: sur ChangeDetectionStrategy.OnPush , MyComponent ne sera rendu que lorsque ses entrées seront modifiées. Dans ce cas, myInput devra recevoir une nouvelle valeur de son parent pour déclencher un re-render.