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

This article introduces the relevant knowledge of "change case Detection and Analysis in Angular". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Change detection in Angular is a mechanism for synchronizing the state of the application UI with the state of the data. When you apply logic to change the component data, the value bound to the DOM property in the view also changes. The change detector is responsible for updating the view to reflect the current data model.

Paper will sleep shallow, never know the matter want to practice. In order to make it easier for readers to understand, this article starts with a small example and then develops it step by step. Examples are as follows:

/ / app.component.tsimport {Component} from'@ angular/core';@Component ({selector: 'app-root', templateUrl:'. / app.component.html', styleUrls: ['. / app.component.css']}) export class AppComponent {title = 'aa'; handleClick () {this.title =' bb';}} / / app.componnet.html {{title}}

The example is simple: bind a click event to the div element. Clicking on the element will change the value of the variable title, and the display of the interface will be updated accordingly. How does the framework know when and how to update the view? Let's find out.

When we click on the div element, the handleClick function is executed. So how is this function triggered and executed in Angular applications? If you read my previous article on zone.js, you will know that click events in Angular apps have been taken over by zone.js. Based on this answer, it is obvious that at first it must be triggered by zone.js, but here we need to further analyze the direct invocation relationship and unfold it layer by layer. The closest thing to a handleClick function call is the following code:

Function wrapListener (listenerFn,...) {return function wrapListenerIn_markDirtyAndPreventDefault (e) {let result = executeListenerWithErrorHandling (listenerFn,...);}}

The listenerFn function in the above code points to handleClick, but it is also an argument to the wrapListener function. In the example, the element is bound to a click event, and the relevant template compilation product looks like this:

Function AppComponent_Template (rf, ctx) {. I0 ["benchmark listener"] ("click", function AppComponent_Template_div_click_0_listener () {return ctx.handleClick ();})}

The initial loading application executes renderView, then executeTemplate, and then triggers the above template function, so that the click function of the element is passed all the way to the listenerFn parameter. Here we understand that the trigger source of the click function is zone.js, but the real click function transfer is implemented by Angular, so how are zone.js and Angular related? Zone.js will schedule a task for each asynchronous event, and for the example in this article, invokeTask is called by the following code:

Function forkInnerZoneWithAngularBehavior (zone) {zone._inner = zone._inner.fork ({name: 'angular', properties: {' isAngularZone': true}, onInvokeTask: (delegate, current, target, task, applyThis, applyArgs) = > {try {onEnter (zone); return delegate.invokeTask (target, task,...);} finally {onLeave (zone) })}

Is it familiar to see here, because there is a similar code snippet in the previous article introduced by zone.js. The forkInnerZoneWithAngularBehavior function is called by the constructor of class NgZone. So far, we have led to a protagonist of Angular change detection, NgZone, which is a simple encapsulation of zone.js.

Now that we know how the click function is executed in the example, the application data has changed after the function has been executed, and how is the view updated in time? Let's go back to the forkInnerZoneWithAngularBehavior function mentioned above, the try finally statement block, which executes the invokeTask function and ends up executing the onLeave (zone) function. Further analysis shows that the onLeave function finally calls the checkStable function:

Function checkStable (zone) {zone.onMicrotaskEmpty.emit (null);}

Subscribe to this emit event in the class ApplicationRef constructor accordingly:

Class ApplicationRef {/ * * @ internal * / constructor () {this._zone.onMicrotaskEmpty.subscribe ({next: () = > {this.tick () = > {this.tick ();}});});}

Does this.tick () look familiar in the subscription-related callback function? If you read my previous article on Angular lifecycle functions, you will certainly have the impression that it is a key call to trigger view updates. Although this function was discussed in that lifecycle introduction article, this article focuses on change detection so that the function is the same but the focus is slightly different. The order of calls related to this.tick is roughly as follows:

This.tick ()-> view.detectChanges ()-> renderComponentOrTemplate ()-> refreshView ()

Here refreshView is more important and analyzed separately:

Function refreshView (tView, lView, templateFn, context) {. If (templateFn! = = null) {/ / key code 1 executeTemplate (tView, lView, templateFn,...);}. If (components! = = null) {/ / key Code 2 refreshChildComponents (lView, components);}}

In this process, the refreshView function will be called twice, the first time to enter the key code 2 branch, and then call the following function to re-enter the refreshView function:

RefreshChildComponents ()-> refreshChildComponents ()-> refreshComponent ()-> refreshView ()

The second time to enter the refreshView function call is the key code 1 branch, that is, the execution is: executeTemplate function. This function finally executes the AppComponent_Template function in the template compilation product:

Function AppComponent_Template (rf, ctx) {if (rf & 1) {/ / conditional branch 1 i0 ["roomelementStart"] (0, "div", 0); i0 ["roomlistener"] ("click", function AppComponent_Template_div_click_0_listener () {return ctx.handleClick ();}); i0 ["inherited listener"] (1); i0 ["roomelementEnd"] () } if (rf & 2) {/ / conditional branch 2 i0 ["alternate textInterpolate"] (1); i0 ["invalid textInterpolate"] (ctx.title);}}

If there are readers who are not sure where the functions in the above template compilation products come from, it is recommended to read the previous article on the principle of dependency injection, which will not be repeated due to space limitations. At this point, the AppComponent_Template function executes the code in conditional branch 2, and the conditional advance function updates the relevant index value to ensure that the correct element is found. Here, we will focus on the following textInterpolate function, which ends up calling the following textInterpolate1 function:

Function optional textInterpolate1 (prefix, v0, suffix) {const lView = getLView (); / / key code 1 const interpolated = interpolation1 (lView, prefix, v0, suffix); if (interpolated! = = NO_CHANGE) {/ / key code 2 textBindingInternal (lView, getSelectedIndex (), interpolated);} return codes

It is worth pointing out that the function name ends with the number 1, because there are similar functions such as "interpolation textInterpolate2", "interpolation" textInterpolate3, and so on. Different special functions are called internally in Angular according to the number of interpolation expressions. In this example, the number of interpolation expressions in the text node is 1, so the actual call is the interpolation expressions textInterpolate1 function. This function mainly does two things, the key code 1 is to compare whether the interpolation expression value has been updated, and the key code 2 is to update the value of the text node. Let's first take a look at the function interpolation1 of key code 1, which ends up calling:

Function bindingUpdated (lView, bindingIndex, value) {const oldValue = lView [bindingIndex]; if (Object.is (oldValue, value)) {return false;} else {lView [bindingIndex] = value; return true;}}

The value of the text node before change detection is called oldValue, which is stored in lView, which I mentioned in my previous article. Readers who have forgotten can take a look at the role of lView. BindingUpdated first compares the new value with the old value, and the method of comparison is Object.is. If the new value and the old value have not changed, false is returned. If there is a change, update the value stored in lView and return true. The function textBindingInternal of key code 2 ends up calling the following functions:

Function updateTextNode (renderer, rNode, value) {ngDevMode & & ngDevMode.rendererSetText++; isProceduralRenderer (renderer)? Renderer.setValue (rNode, value): rNode.textContent = value;}

After the above process, when we click the div element, the display content of the interface will change from aa to bb, that is, the synchronous update from the change of application data to the status of UI is completed, which is the most basic change detection process of Angular.

This is the end of the content of "change case Detection and Analysis in Angular". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.