각도에서의 변경 감지

각도에서의 변경 감지

반응형

모두를 위한 각도: 8부

다른 많은 초보자들처럼, 제가 Angular 앱을 처음 시작했을 때, 저는 변화 감지에 대해 생각하지 않았습니다. 지금으로서는 그것이 존재하는지 확신할 수 없습니다. 하지만 여기 제가 이 개념에 대해 읽기 시작했을 때 답을 찾은 질문들이 있습니다.

ChangeDetection이란? 전략은 무엇이며 어떻게 대처해야 하는가? 우리는 항상 선택할 수 있나요? 그럼 시작합시다.

ChangeDetection

이것은 Angular에게 무언가가 변했다는 것을 알릴 수 있는 메커니즘입니다. 자동으로 구성요소 인스턴스 및 해당 보기(템플릿)를 새로 고칩니다.

Angular(각도)는 구성 요소의 바인딩을 전파하는 변경 디텍터를 생성합니다.

전략들

구성 요소 장식자로의 changeDetection 메타데이터를 이미 확인했을 수 있습니다.

@Component({ ... changeDetection: ... })

탐지 전략을 변경합니다.체납

@Component({ ... changeDetection: ChangeDetectionStrategy.Default, })

기본적으로 구성 요소를 만들 때 changeDetection 메타데이터가 정의되지 않습니다. 제공하지 않으면 ChangeDetectionStrategy를 사용합니다.체납 즉, 모든 이벤트, 모든 변경에서 구성 요소가 검사됩니다. 예를 들어 마우스를 약간만 누르면 스터디가 트리거됩니다. 최적화되지는 않았지만 때로는 도움이 될 수 있습니다.

팁: 왜 그런지 설명하는 좋은 코멘트와 함께 필요할 때 정확하게 하는 것이 도움이 될 수 있습니다.

탐지 전략을 변경합니다.온푸시

Angular 앱에 적합한 최적화를 찾고 있다면 이 앱을 사용해야 합니다. 다음과 같은 경우 검사를 트리거할 수 있습니다.

데이터 바인딩된 입력 속성` 참조가 변경되었습니다.

이벤트 핸들러가 트리거됨

요구에 따라

온 디맨드를 확인하는 방법 그거 좋은 질문이네. 당신은 여전히 관련이 있어요.

Angular는 ChangeDetectorRef라는 기본 클래스를 제공하며 여기에는 변경 감지 기능이 포함되어 있습니다.

abstract class ChangeDetectorRef { abstract markForCheck(): void abstract detach(): void abstract detectChanges(): void abstract checkNoChanges(): void abstract reattach(): void }

이를 사용하려면 다음과 같이 생성자에 종속성을 추가하면 됩니다.

@Component({ ... }) export class ExampleComponent { constructor(private _changeDetectorRef: ChangeDetectorRef) {} }

이제 구성 요소의 변경 탐지를 혼자서 처리할 수 있습니다.

팁: 구성 요소만 검사하려면 markForCheck()를 사용하고 하위 항목도 검사하려면 detectChanges()를 사용하십시오.

우리는 항상 선택할 수 있을까?

전체적으로 그렇습니다. 이 두 가지를 모두 응용 프로그램에서 사용할 수 있습니다. 하지만 제가 각도가 있는 CdkTable 코드를 연구한 결과 다음과 같은 설명을 발견했습니다.

따라서 CdkTable 구성 요소는 기본 전략을 사용합니다. 예, 각 방법에는 사용 사례가 있습니다. 구성 요소를 좀 더 최적화해야 하는지, 아니면 단지 가짜인지 매번 생각해야 합니다.

결론

예, 이제 애플리케이션에 적용할 몇 가지 최적화에 대해 생각해 볼 수 있습니다. 이런 반사작용을 하지 마세요: 세상에, 새롭고 독특한 것을 발견했어요. 어디든 할 거예요!!! 각각의 사건은 생각할 필요가 있습니다. 기억하세요.

질문이 있으면 주저하지 마세요. 읽어주셔서 감사합니다.

더 배우기

from http://it-ground.tistory.com/181 by ccl(A) rewrite - 2021-09-14 05:01:47