Angular 2
Optymalizacja renderowania za pomocą ChangeDetectionStrategy

Domyślnie vs OnPush

Rozważ następujący składnik z jednym wejściem myInput i wartością wewnętrzną o nazwie someInternalValue . Oba są używane w szablonie komponentu.

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

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

  someInternalValue: any;

  // ...
}

Domyślnie właściwość changeDetection: w dekoratorze komponentów zostanie ustawiona na ChangeDetectionStrategy.Default ; domyślnie w tym przykładzie. W tej sytuacji wszelkie zmiany dowolnych wartości w szablonie spowodują ponowne renderowanie MyComponent . Innymi słowy, jeśli zmienię myInput lub someInternalValue kąt 2 someInternalValue energię i ponownie wyrenderuje komponent.

Załóżmy jednak, że chcemy ponownie renderować tylko przy zmianie danych wejściowych. Rozważ następujący składnik z changeDetection: ustaw na 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;

  // ...
}

Ustawiając changeDetection: na ChangeDetectionStrategy.OnPush , MyComponent będzie renderował się ponownie tylko po zmianie danych wejściowych. W takim przypadku myInput będzie musiał otrzymać nową wartość od swojego rodzica, aby uruchomić ponowne renderowanie.