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

This article mainly introduces the example analysis of one-way data flow in Angular, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

Change detection

In Angular, the data flows from the top root node to the last leaf node, and the whole data flow is one-way, forming an one-way tree.

Angular believes that all asynchronous operations may cause changes in the model, and the event sources that cause changes in the data model are:

Events:click, mouseover, keyup...

Timers:setInterval 、 setTimeout

XHRs:Ajax (GET, POST...)

Angular encapsulates Zone to intercept trace asynchrony, and once asynchronous behavior is found, Angular detects changes.

Because the data flow is unidirectional and the data source of the component can only be passed in from the parent component, Angular traverses the detection component from top to bottom, and can continue to detect the child component as long as the parent component is detected. Compared with angularjs, bi-directional and chaotic data flow direction will cause repeated change detection to be repeated many times until the data is stable, which may lead to performance problems, or the data and view may be in an inconsistent state, that is, the view after the rendering process can not reflect the actual state of the data.

Render output

When a change in the data model is detected, the component needs to re-render, and Angular runs its DOM generation function, which generates a new DOM data structure that corresponds to the new version of the component View.

Angular evaluates template expressions and invokes lifecycle hooks throughout the component tree during rendering.

Note: the green flag will be called multiple times

From the point of view of the life call cycle (green directed line), ngAfterViewChecked indicates that the component and subcomponent view output is complete. Look at the following example:

Import {Component, AfterViewChecked} from'@ angular/core';import {Course} from ". / course"; @ Component ({selector: 'app-root', template: `{{course.description}}`}) export class AppComponent implements AfterViewChecked {course: Course = {id: 1, description: "Angular For Beginners"}; ngAfterViewChecked () {this.course.description + = Math.random ();}}

The above code will cause an error during the Angular change detection cycle. The component has finished outputting the DOM data structure, and we have modified the data state in the component ngAfterViewChecked () method. This causes the data to be inconsistent with the view state after the view is rendered.

Data flows from component classes to the DOM data structures that represent them, and the behavior of generating these DOM data structures does not in itself lead to further modification of the data. However, we modify the data behavior during the ngAfterView life cycle, and Angular's "one-way data flow" rule forbids updating a view after it has been combined.

This means that the data model-to-view process is one-way and the data flow cannot be changed after the view.

Thank you for reading this article carefully. I hope the article "sample Analysis of one-way data flow in Angular" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.