Angular 2
Rendering optimaliseren met ChangeDetectionStrategy

Standaard versus OnPush

Beschouw het volgende onderdeel met één invoer myInput en een interne waarde genaamd someInternalValue . Beide worden gebruikt in de sjabloon van een component.

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

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

  someInternalValue: any;

  // ...
}

Standaard wordt de changeDetection: in de component-decorator ingesteld op ChangeDetectionStrategy.Default ; impliciet in het voorbeeld. In deze situatie worden wijzigingen in een van de waarden in de sjabloon opnieuw geactiveerd voor MyComponent . Met andere woorden, als ik mijn myInput verander of een of andere someInternalValue hoek 2 zal energie uitoefenen en de component opnieuw renderen.

Stel echter dat we alleen opnieuw willen weergeven wanneer de ingangen veranderen. Overweeg het volgende onderdeel met changeDetection: ingesteld op 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;

  // ...
}

Door changeDetection: te stellen op ChangeDetectionStrategy.OnPush wordt MyComponent alleen opnieuw weergegeven wanneer de invoer verandert. In dit geval moet myInput een nieuwe waarde van het bovenliggende myInput ontvangen om een nieuwe weergave te activeren.