A brief discussion on the method of Angular's change detection

Change Detection is one of the most important features in Angular 2. When the data in the component changes, Angular 2 can detect data changes and automatically refresh the view to reflect the corresponding changes.

Before introducing change detection, we need to introduce the concept of rendering in the browser. Rendering is the process of mapping a model to a view. The value of the model can be a primitive data type, object, array, or other data object in JavaScript. However, the view can be other elements such as paragraphs, forms, buttons, etc. in the page. These page elements are represented internally using DOM (Document Object Model). For better understanding, let's take a look at a specific example:

This example is simple, because the model will not change, so the page will only be rendered once. If the data model changes constantly at runtime, the whole process will become complicated. Therefore, in order to ensure the synchronization of data and views, the page will be rendered multiple times. Next, let’s consider the following issues:

1. When will the model change?

2. What changes have occurred in the model

3. Where is the view area that needs to be updated after the change?

4. How to update the corresponding view area

The basic purpose of change detection is to solve the above problems. In Angular 2, when the model within the component changes, the change detector within the component detects an update and notifies the view to refresh. Therefore, the change detector has two main tasks:

1. Detect the changes in the model

2. Notification view refresh

Next, let’s analyze what changes are and how changes are produced.

Changes and Events

Change is the difference between the old model and the new model. In other words, change produces a new model. Let's take a look at the following code:

import { Component } from '@angular/core'; @Component({
 selector: 'exe-counter',
 template: `
 <p>Current value：{{ counter }}</p>
 <button (click)="countUp()"> + </button>` }) export class CounterComponent {
 counter = 0;

 countUp() { ++;
 }
}

After the page is rendered for the first time, the current value of the counter is 0. When we click the + button, the counter value of the counter will be automatically increased by 1, and the current value in the page will be updated. In this example, the click event causes a change in the counter attribute value.

Let's continue to look at the next example:

import { Component, OnInit } from '@angular/core'; @Component({
 selector: 'exe-counter',
 template: `
  <p>Current value：{{ counter }}</p>
 ` }) export class CounterComponent implements OnInit {
 counter = 0;
 ngOnInit() {
  setInterval(() => { ++;
  }, 1000);
 }
}

This component uses the setInterval timer to automatically add 1 to the counter value per second. In this case, it is the timer event that causes a change in the property value. Finally, let’s take a look at an example:

import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; @Component({
 selector: 'exe-counter',
 template: `
  <p>Current value：{{ counter }}</p>
 ` }) export class CounterComponent implements OnInit {
 counter = 0; constructor(private http: Http) {}
 ngOnInit() { ('/')
    .map(res => ())
    .subscribe(data => {  = ;
    });
 }
}

When this component is initialized, it will send an HTTP request to obtain the initial value. When the request returns successfully, the value of the component's counter property will be updated. In this case, it is caused by the XHR callback to change the property value.

Now let’s summarize the three types of event sources that cause model changes:

1、Events：click, mouseover, keyup ...

2、Timers：setInterval、setTimeout

3、XHRs：Ajax(GET、POST ...)

These event sources have a common feature, that is, they are all asynchronous operations. Then we can think that all asynchronous operations may cause changes in the model.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.