각도의 탐지 변경 : 알아야 할 모든 것

각도 변화 탐지 메커니즘의 심층 분석

이 기사는 Angular의 변화 탐지 메커니즘을 깊이 탐구하고 기본 작동 원리를 밝히고 최적화 전략을 제공합니다. 인터넷 에서이 주제에 대한 정보는 상대적으로 적습니다.이 기사는 최신 각도 버전 (작성시 4.0.1)을 기반으로 소스 코드를 분석하고 이전 버전 2.4.1의 해당 컨텐츠를 다룹니다.

핵심 개념 :보기 (보기) Angular 응용 분야는 구성 요소로만 구성된 것이 아니라 나무를보십시오. 각 구성 요소는 각도 UI 아키텍처의 기본 단위 인보기에 해당하며 모든 속성 검사 및 DOM 업데이트를 처리 할 책임이 있습니다. 소스 코드의 뷰에 대한 설명은 다음과 같습니다.

보기는 응용 프로그램 UI의 기본 빌딩 블록입니다. 함께 만들어지고 파괴 된 가장 작은 요소 그룹입니다.

보기에서 요소의 속성을 변경할 수 있지만보기에서 요소의 구조 (숫자 및 순서)는 변경 될 수 없습니다. 요소의 구조를 변경하면 ViewContainerRef를 사용하여 중첩 뷰를 삽입, 이동 또는 삭제 하여만 수행 할 수 있습니다. 각보기에는 여러 뷰 컨테이너가 포함될 수 있습니다.

이 기사에서는 구성 요소보기와 구성 요소 개념을 서로 바꿔서 사용합니다. 많은 웹 기사와 스택 오버 플로우 답변은 여기에 "변경 감지 개체"또는 "ChangeEtectorRef"로 설명 된 뷰를 나타냅니다. 실제로, 각도에는 별도의 변화 감지 객체가 없으며, 변경 감지는보기에 직접 작용합니다. 각보기는 속성을 ​​통해 하위 뷰에 연결되어 서브 뷰에서 작업을 수행 할 수 있습니다.

보기 상태 (ViewState)

뷰에는 상태가 있으며, 이는 뷰와 모든 하위 뷰를 위해 변경 감지를 실행할지 여부를 결정하는 데 중요한 역할을합니다. 중요한 상태는 다음과 같습니다

: 뷰가 첫 번째 점검인지 여부를 나타냅니다.

: 뷰의 변경 감지를 가능하게하는지 여부를 나타냅니다.

: 뷰에서 오류가 발생했는지 여부를 나타냅니다.

: 전망이 파괴되었는지 여부를 나타냅니다.

nodes

가 이거나 뷰가 또는 상태에 있으면 뷰의 변경 감지와 하위 뷰가 건너 뜁니다. 기본적으로 모든 뷰는

를 사용하지 않는 한 로 초기화됩니다. Angular는 기본 구성 요소보기를 캡슐화하고

메소드를 갖는

와 같은 뷰를 조작하기위한 고급 개념을 제공합니다. 비동기 이벤트가 발생하면 Angular는 최상위 수준

변경 감지를 트리거하여 자체 변경 감지 후 하위 뷰를 재귀 적으로 감지합니다.

1. 는 토큰을 통해 구성 요소 생성자에 주입 될 수 있습니다. FirstCheck
변경 감지 작업

2. 기능은 뷰 변경 감지를 실행하는 주요 논리입니다. 이 함수는 호스트 구성 요소에서 시작하여 각 구성 요소와 하위 구성 요소를 차례로 확인합니다. checkAndUpdateView 함수가 발사되면 다음 순서로 작업을 수행합니다.

   세트 .

   하위 컴포넌트/명령 인스턴스의 입력 속성을 확인하고 업데이트하십시오.
   하위 뷰 변경 감지 상태를 업데이트하십시오 (변경 감지 전략 구현의 일부).
   1. 임베디드 뷰의 변경 감지를 실행하십시오 (위의 단계를 반복하십시오). ViewState.firstCheck 바인딩이 변경되면 자식 구성 요소의
   라이프 사이클 후크가 호출됩니다.
   호출 하위 구성 요소의 및
라이프 사이클 후크를 호출합니다 (
3. 는 첫 번째 점검에서만 호출됩니다).
4. 하위 뷰 구성 요소 인스턴스의 OnChanges
호출 하위 구성 요소 인스턴스의
5. 및 OnInit 라이프 사이클 후크를 호출하십시오 (ngDoCheck는 첫 번째 점검에서만 호출). OnInit 현재보기 구성 요소 인스턴스의 속성이 변경되면 현재보기의 DOM 보간을 업데이트하십시오.
하위 뷰의 변경 감지를 실행하십시오 (위의 단계를 반복하십시오).
6. ContentChildren 현재보기 구성 요소 인스턴스의
7. 호출 하위 구성 요소 인스턴스의 AfterContentInit 및 AfterContentChecked 라이프 사이클 후크를 호출하십시오 (AfterContentInit는 첫 번째 점검에서만 호출).
현재보기 검사를 비활성화합니다 (변경 감지 정책 구현의 일부).
9. 변경 감지 전략 및 수동 트리거 정책은 입력 속성 변경 또는 명시 적 이벤트 시작과 같은 실제 데이터가 변경 될 때만 변경 감지 만 수행하기 때문에 성능 오버 헤드를 크게 줄일 수 있습니다.
10. 는 특히 크고 복잡한 응용 분야에서 변화 감지의보다 미세한 제어를 가능하게하기 위해 , ViewChildren 및 와 같은 방법을 제공합니다.
(다음은
11. , AfterViewInit의 특정 응용 프로그램 시나리오 및 샘플 코드를 포함하여 AfterViewChecked의 사용 방법과 변경 감지를위한 최적화 전략을 자세히 소개합니다. > 메소드) AfterViewInit
(기사의 나머지 부분은 이러한 방법을 사용하여 성능을 최적화하고 실용적인 응용 시나리오 및 코드 예제를 제공하는 방법을 계속 탐색 할 것입니다.)
12. (마지막으로,이 기사는 onpush 전략, 변경 감지 최적화 기술, 구역의 역할 및 변경 감지를 디버깅하는 방법을 다루는 각도 변화 감지에 대한 자주 묻는 질문을 요약합니다.)

위 내용은 각도의 탐지 변경 : 알아야 할 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!