Angular 2
ChangeDetectionStrategy를 사용하여 렌더링 최적화
수색…
기본 대 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
가 다시 렌더링됩니다. 즉, myInput
또는 someInternalValue
변경하면 각도 2가 에너지를 someInternalValue
구성 요소를 다시 렌더링합니다.
그러나 입력이 변경 될 때만 다시 렌더링하기를 원한다고 가정 해보십시오. changeDetection:
과 함께 다음 구성 요소를 고려하십시오. ChangeDetectionStrategy.OnPush
설정 changeDetection:
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:
ChangeDetectionStrategy.OnPush
로 설정하면 MyComponent
는 입력이 변경 될 때만 다시 렌더링됩니다. 이 경우 myInput
은 부모로부터 새 값을 받아 재 렌더링을 트리거해야합니다.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow