Angular 2
Оптимизация рендеринга с помощью ChangeDetectionStrategy
Поиск…
По умолчанию vs OnPush
Рассмотрим следующий компонент с одним входным myInput
и внутренним значением, называемым someInternalValue
. Оба они используются в шаблоне компонента.
import {Component, Input} from '@angular/core';
@Component({
template:`
<div>
<p>{{myInput}}</p>
<p>{{someInternalValue}}</p>
</div>
`
})
class MyComponent {
@Input() myInput: any;
someInternalValue: any;
// ...
}
По умолчанию свойство changeDetection:
в декораторе компонента будет установлено значение ChangeDetectionStrategy.Default
; неявный в примере. В этой ситуации любые изменения любого из значений в шаблоне MyComponent
повторную визуализацию MyComponent
. Другими словами, если я изменю myInput
или someInternalValue
угловой 2 будет оказывать энергию и повторно отображать компонент.
Предположим, однако, что мы хотим только повторно визуализировать, когда входы меняются. Рассмотрим следующий компонент с 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;
// ...
}
Установив changeDetection:
to ChangeDetectionStrategy.OnPush
, MyComponent
будет повторно отображаться только при изменении его входов. В этом случае myInput
должен будет получить новое значение от своего родителя, чтобы вызвать повторную визуализацию.