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

변화 감지란 무엇인가요? 다음 글에서는 Angular의 변경 감지 메커니즘에 대해 설명하고, 상태 변경이 변경 감지를 알리는 방법과 Angular 변경 감지 전략을 소개하겠습니다.

1. 변경 감지란 무엇입니까

• 요약: 구성 요소 트리를 순회하고, 각 구성 요소의 변경 사항을 확인하고, 구성 요소 속성의 변경 사항을 감지하는 데 사용되는 변경 감지 메커니즘입니다. DOM. [관련 튜토리얼 권장 사항: "检测机制，用于遍历组件树，检查每个组件的变化，并在组件属性发生变化的时候触发DOM的更新。【相关教程推荐：《angular教程》】
• 变更检测的基本任务： 获得程序的内部状态并使之在用户界面可见。这个状态可以是任何的对象、数组、基本数据类型。

二、什么引起了变更

事件驱动，来源有以下三大类:

• 事件：页面 click、submit、mouse down……
• XHR：从后端服务器拿到数据
• Timers：setTimeout()、setInterval()

这几点有一个共同点，就是它们都是异步的，也就是说，所有的异步操作是可能导致数据变化的根源因素，所以每当执行一些异步操作时，我们的应用程序状态可能发生改变，而这时则需要去更新视图

三、状态变化怎么通知变更检测

在Angular当中则接入了NgZone，由它来监听Angular所有的异步事件，Angular 在启动时会重写（通过 Zone.js）部分底层浏览器 API（暴力的拦截了所有的异步事件）。

常见的有两种方式来触发变化检测，一种方法是基于组件的生命周期钩子

ngAfterViewChecked() {
    console.log('cluster-master.component cd');
  }

另一种方法是手动控制变化检测的打开或者关闭，并手动触发

constructor(private cd: ChangeDetectorRef) {
  cd.detach()
  setInterval(() => {
    this.cd.detectChanges()
  }, 5000)
}

三、Angular 变更检测

Angular 的核心是组件化，组件的嵌套会使得最终形成一棵组件树，Angular 的变化检测可以分组件进行，每个组件都有对应的变化检测器 ChangeDetector，可想而知这些变化检测器也会构成一棵树。
在 Angular 中每个组件都有自己的变化检测器，这使得我们可以对每个组件分别控制如何以及何时进行变更检测。

四、变更检测策略

Angular还让开发者拥有定制变化检测策略的能力。

• default: 每次变更检测都会引起组件的变更检测，包括其他组件的状态变化，以及本组件引用型变量内部属性值变化
• Onpush: 每次变更检测会跳过本组件的变更检查，除非满足一些条件

4.1 default

Angular 默认的变化检测机制是 ChangeDetectionStrategy.Default，每次异步事件 callback 结束后，NgZone会触发整个组件树 至上而下做变化检测

4.2 <span style="font-size: 18px;">onPush</span>

OnPush 策略，用以跳过某个 component 以及它下面所有子组件的变化检测

其实在设置了 OnPush 策略以后，还是有许多方法可以触发变更检测的；

• 1）组件的 @Input 属性的引用发生变化。
• 2）组件内的 DOM 事件，包括它子组件的 DOM 事件，比如 click、submit、mouse down。
• 3）组件内的 Observable 订阅事件，同时设置 Async pipe。
• 4）组件内手动使用 ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() 方法

五、变化检测对象引用

• markForCheck()：使用于子组件，将该子组件到根组件之间的路径标记起来，通知 angular 检测器下次变化检测时一定检查此路径上的组件，即使设置了变化检测策略为 onPush
• detectChanges()：手动发起该组件到各个子组件的变更检测
• detach()：将组件的检测器从检测器数中脱离，不再受检测机制的控制，除非重新 attach 上
• reattach()：把脱离的检测器重新链接angular tutorial
"]

변경 감지의 기본 작업: 프로그램의 내부 상태를 획득하고 사용자 인터페이스에서 표시합니다. 이 상태는 모든 객체, 배열 또는 기본 데이터 유형일 수 있습니다.

🎜2. 변경의 원인🎜🎜🎜이벤트 중심, 소스는 다음 세 가지 범주입니다.
🎜🎜🎜이벤트: 페이지 클릭, 제출, 마우스 다운...🎜🎜XHR: 가져옴 백엔드 서버 To data🎜🎜Timers: setTimeout(), setInterval()🎜🎜🎜이 지점에는 한 가지 공통점이 있습니다. 즉, 모두 비동기식, 즉 모든 비동기 작업입니다. code>는 데이터 변경의 근본 원인이므로 일부 비동기 작업이 수행될 때마다 애플리케이션의 상태가 변경될 수 있으며 이때 뷰를 업데이트해야 합니다🎜🎜🎜 3. 상태 변경 감지를 알리는 방법 Angular의 변경 사항 🎜🎜🎜은 NgZone에 연결되어 있으며, 이는 Angular가 시작될 때 모든 Angular의 비동기 이벤트를 수신하여 Zone.js ) 기본 브라우저 API의 일부(모든 비동기 이벤트를 폭력적으로 가로챕니다). 🎜🎜변경 감지를 트리거하는 두 가지 일반적인 방법이 있습니다. 한 가지 방법은 구성 요소 수명 주기 후크를 기반으로 합니다.🎜rrreee🎜다른 방법은 변경 감지의 열기 또는 닫기를 수동으로 제어하고 이를 수동으로 트리거하는 것입니다🎜rrreee🎜🎜3. 감지🎜🎜🎜Angular의 핵심은 구성요소화입니다. 구성요소의 중첩은 결국 구성요소 트리를 형성합니다. Angular의 변경 감지는 구성요소로 나눌 수 있으며 각 구성요소에는 해당 Change DetectorChangeDetector, 이러한 변경 감지기도 트리를 형성할 것으로 예상됩니다. <br> Angular의 각 구성 요소에는 자체 변경 감지기가 있으며 이를 통해 각 구성 요소에 대해 변경 감지가 수행되는 방법과 시기를 제어할 수 있습니다. 🎜🎜🎜4. 변경 감지 전략🎜🎜🎜Angular는 개발자에게 변경 감지 전략을 맞춤 설정할 수 있는 기능도 제공합니다. 🎜🎜🎜기본값: <code>매번 변경 감지로 인해 다른 구성 요소 및 이 구성 요소 참조 변수의 상태 변경을 포함하여 구성 요소의 변경이 감지됩니다. 내부 속성 값 변경🎜🎜Onpush: 각 변경 감지는 일부 조건이 충족되지 않는 한🎜🎜🎜🎜4.1 기본값을 제외하고 이 구성 요소의 변경 확인을 건너뜁니다. 🎜🎜🎜Angular의 기본 변경 감지 메커니즘은 ChangeDetectionStrategy.Default입니다. 각 비동기 이벤트 콜백이 종료된 후 NgZone은 전체 구성 요소 트리 를 트리거합니다. down변경 감지 실행🎜🎜🎜4.2 <span style="font-size: 18px;">onPush</span> span>🎜🎜🎜OnPush 전략은 특정 구성 요소와 그 아래의 모든 하위 구성 요소의 변경 감지를 건너뛰하는 데 사용됩니다🎜🎜실제로 OnPush 전략에도 불구하고 변경 감지를 트리거하는 방법은 여전히 ​​많습니다. 🎜🎜🎜1) 구성 요소의 @Input 속성 변경에 대한 참조입니다. 🎜🎜2) 클릭, 제출, 마우스 다운과 같은 하위 구성 요소의 DOM 이벤트를 포함한 구성 요소 내의 DOM 이벤트. 🎜🎜3) 구성 요소의 Observable은 이벤트를 구독하고 동시에 Async Pipe를 설정합니다. 🎜🎜4) 구성 요소의 ChangeDetectorRef.DetectChanges(), ChangeDetectorRef.markForCheck(), ApplicationRef.tick() 메서드를 수동으로 사용합니다. 🎜🎜🎜🎜 5. 감지 개체 참조 변경 🎜🎜🎜🎜markForCheck () : 하위 구성 요소에 사용되어 하위 구성 요소와 루트 구성 요소 사이의 경로를 표시하고 다음 번에 각도 감지기에 확실히 알립니다. >변경 감지 전략이 onPush🎜🎜로 설정된 경우에도 이 경로의 구성 요소를 확인합니다. 감지Changes(): 이 구성 요소에서 각 하위 구성 요소🎜🎜detach(): 감지기 수에서 <code>구성요소의 감지기를 분리합니다. 다시 연결하지 않으면 더 이상 감지 메커니즘에 의해 제어되지 않습니다. 🎜🎜reattach(): 분리된 감지기를 다시 연결합니다. > 탐지기 트리로 이동🎜🎜🎜프로그래밍 관련 지식을 더 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 변경 감지란 무엇입니까? Angle의 변경 메커니즘에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!