Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of dirty value detection in Angular4. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Summary

Dirty value detection in Angular 4 is an old topic, and understanding this model is the basis for Angular performance optimization. So today we'll talk about the principles of dirty value detection in Angular 4 and take a look at some tips for performance optimization.

Entry point-Zone.js

Angular 4 is a MVVM framework. After the data model (Model) is converted into a view model (ViewModel), it is bound to the view (View) and rendered into a page visible to the naked eye. Therefore, finding the time point of the data model change is the key to update the page, and it is also the key to call dirty value detection.

After analysis, engineers found that changes in data are often caused by asynchronous events such as macrotask and microtask. Therefore, by rewriting all the asynchronous API in the browser, you can effectively listen for data changes from the source. Zone.js is such a monkey Monkey Patch. Angular 4 uses a customized Zone (NgZone) that notifies Angular of possible data changes and the need to update the data in the view (dirty value detection).

Dirty value detection (Change Detection)

The basic principle of dirty value detection is to store the old value and compare the new value of the current time with the old value when testing. If it is equal, there is no change, otherwise, a change is detected and the view needs to be updated.

Angular 4 splits the page into several Component (components) to form a component tree. After entering the dirty value detection, the detection is carried out from the root component from top to bottom. Angular has two strategies: Default and OnPush. They are configured on components to determine different behaviors during dirty value detection.

Default-default policy

ChangeDetectionStrategy.Default . It also means that this component is always detected whenever there is an event that may change the data.

The operation of dirty value detection can basically be understood as the following steps. 1) update the properties,2 bound by the subcomponent) call the NgDoCheck and NgOnChanges lifecycle hooks (Lifecycle hook) of the subcomponent, and 3) update your own DOM,4) detect the dirty values of the subcomponent. This is a recursive equation starting from the root component.

/ / This is not Angular codefunction changeDetection (component) {updateProperties (component.children); component.children.forEach (child = > {child.NgDoCheck (); child.NgOnChanges ();}; updateDom (component); component.children.forEach (child = > changeDetection (child));}

We developers will be very concerned about the order of DOM updates and the order in which NgDoCheck and NgOnChanges are called. You can find:

DOM updates are depth first

NgDoCheck and NgOnChanges are not (nor depth first)

OnPush-single detection strategy

ChangeDetectionStrategy.OnPush . This component is only detected when Input Properties changes (OnPush). Therefore, when the Input is unchanged, it is only detected at initialization, which is also called a single detection. Its other behavior is consistent with that of Default.

It is important to note that OnPush only detects references to Input. Changes in the properties of the Input object do not trigger dirty value detection for the current component.

Although the OnPush policy improves performance, it is also a high-incidence location for Bug. The solution is often to convert Input into the form of Immutable, forcing the reference of Input to change.

Tips

Data binding

Angular has three legal data binding methods, but their performance is not the same.

Bind data directly

Name {{item.name}} Classes {{item.classes}}

In most cases, this is the best way to perform.

Bind the result of a function call

Name {{item.name}} Classes {{classes (item)}}

In each dirty value detection process, the classes equation is called again. Imagine that the user is scrolling the page, multiple macrotask are generated, and each macrotask is checked for dirty values at least once. If there are no special needs, this mode of use should be avoided as far as possible.

Bind data + pipe

Name {{item.name}} Classes {{item | classPipe}}

It is similar to binding function, where each dirty value detection classPipe is called. However, Angular optimizes pipe and caches it. If item is equal to last time, the result will be returned directly.

NgFor

In most cases, NgFor should be used with the trackBy equation. Otherwise, NgFor will update every item in the list during each dirty value detection process.

@ Component ({selector: 'my-app', template: `{{item.id}} Refresh items`,}) export class App {collection; constructor () {this.collection = [{id: 1}, {id: 2}, {id: 3}];} getItems () {this.collection = this.getItemsFromServer ();} getItemsFromServer () {return [{id: 1}, {id: 2}, {id: 3}, {id: 4}] } trackByFn (index, item) {return index;}} this is the end of the article on "sample analysis of dirty value detection in Angular4". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.