홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

변경 감지란 무엇입니까? Angle의 변경 메커니즘에 대해 이야기해 보겠습니다.

저자：Eve Cole 업데이트 시간：2022-06-02 14:05:53

변경 감지란 무엇입니까? 다음 글에서는 Angular의 변경 감지 메커니즘에 대해 설명하고 상태 변경이 변경 감지를 알리는 방법과 Angular 변경 감지 전략을 소개합니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.

1. 변화 감지란 무엇인가요?

  • 요약: 구성 요소 트리를 순회하고, 각 구성 요소의 변경 사항을 확인하고, 구성 요소 속성이 변경되면 DOM 업데이트를 트리거하는 변경检测机制. [관련 추천 튜토리얼: "Angular 튜토리얼"]

  • 변경 감지의 기본 작업: 프로그램의 내부状态파악하고可见합니다. 이 상태는 모든 객체, 배열 또는 기본 데이터 유형일 수 있습니다.

2. 변화의 원인은 무엇입니까?

이벤트 기반 소스는 다음 세 가지 범주로 분류됩니다.

  • 이벤트: 페이지 클릭, 제출, 마우스 다운...

  • XHR: 백엔드 서버에서 데이터 가져오기

  • 타이머: setTimeout(), setInterval()

이러한 점에는 한 가지 공통점이 있습니다. 즉, 모두 비동기식입니다. 즉, 모든异步操作데이터 변경을 유발할 수 있는 근본 요소이므로 일부 비동기 작업이 수행될 때마다 애플리케이션의 상태가 변경될 수 있습니다. 이때 뷰를 업데이트해야 합니다.

3. 상태 변화 감지 시 알림 방법

Angular 에서는 NgZone 이 연결되어 Angular의 모든异步事件모니터링합니다. Angular는 시작 시 기본 브라우저 API 중 일부를 Zone.js 작성합니다(모든 비동기 이벤트를 폭력적으로 가로채기).

변경 감지를 트리거하는 두 가지 일반적인 방법이 있습니다. 한 가지 방법은 구성 요소 수명 주기 후크를 기반으로 합니다.

 ngAfterViewChecked() {
console.log('cluster-master.comComponent CD');
}

또 다른 방법은 변경 감지를 켜거나 끄는 것을 수동으로 제어하고 이를 수동으로 트리거하는 것입니다.

 생성자(개인 CD: ChangeDetectorRef) {
CD.분리()
setInterval(() => {
this.cd.DetectChanges()
}, 5000)
}

3. 각도 변화 감지

Angular의 핵심은 구성 요소화입니다. 구성 요소의 중첩은 결국组件树요소로 나눌 수 있습니다. 각 구성 요소에는 해당变化检测器ChangeDetector 도 있습니다.
Angular의 각 구성 요소에는 자체 변경 감지기가 있어 각 구성 요소에 대해 변경 감지가 수행되는 방법과 시기를 제어할 수 있습니다.

4. 변화 감지 전략

Angular는 또한 개발자에게 변경 감지 전략을 사용자 정의할 수 있는 기능을 제공합니다.

  • 기본값:每次변경 감지는其他组件의 상태 변경 및本组件

  • Onpush: 각 변경 감지는满足一些条件않는 한 이 구성 요소의 변경 확인을 건너뜁니다.

4.1 기본값

Angular의 기본 변경 감지 메커니즘은 ChangeDetectionStrategy.Default 입니다. 각 비동기 이벤트 콜백이 끝나면 NgZone은整个组件树트리거하여至上而下

4.2 onPush

구성 요소 및 그 아래의所有子组件에 대한 변경 감지를跳过데 사용되는 OnPush 전략

실제로 OnPush 정책을 설정한 후에도 변경 감지를 트리거하는 방법은 여전히 ​​많습니다.

  • 1) 컴포넌트의 @Input 속성引用변경됩니다.

  • 2) click、submit、mouse down 등 하위 구성요소의 DOM 이벤트를 포함하여 구성요소 내의 DOM 이벤트.

  • 3) 구성 요소의 Observable 이벤트를 구독하고 동시에 Async pipe 설정합니다.

  • 4) 구성 요소에서 ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() 메서드를 수동으로 사용합니다.

5. 변경 감지 개체 참조

  • markForCheck():子组件该子组件到根组件사용되며, 변경 감지 전략이 onPush 로 설정된 경우에도 다음 변경 감지 중에 이 경로의 구성 요소를 확인一定각도 감지기에 알립니다.

  • discoverChanges():该组件到各个子组件의 변경 감지를 수동으로 시작합니다.

  • detach(): 구성 요소의 감지기를 감지기 수에서脱离하고 다시 연결하지 않는 한 더 이상 감지 메커니즘에 의해 제어되지 않습니다.

  • reattach(): 분리된 감지기를 감지기 트리에重新链接

관련 기사