Do you really know Angular one-way data flow? I have done a summary of my understanding of Angular one-way data flow

Change detection

In Angular, data flows from the top root node to the last leaf node in one direction, forming a one-way tree.

Angular considers that all asynchronous operations can cause changes to the model. The data model can be changed from:

  • Events：click, mouseover, keyup …

  • Timers: setInterval and setTimeout

  • XHRs: Ajax(GET, POST…)

Angular wraps zones to intercept and track asynchrony, and when it detects asynchrony, Angular detects change.

Because the data flow is one-way and the source of the component’s data can only be passed in from the parent, Angular traverses the component from top to bottom in breadth and continues to examine the child component as soon as the parent component completes its inspection. Compared to AngularJS, the two-way, chaotic flow of data leads to repeated change detection repeated many times until the data is stable, which can lead to performance issues or inconsistent states between the data and the view, i.e. the rendering process is completed and the view does not reflect the actual state of the data.

Rendering the output

When a data model change is detected and the component needs to be re-rendered, Angular runs its DOM generator, which generates a new DOM data structure corresponding to a new version of the component View.

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

Note: The green flag is called multiple times

In terms of the call life cycle (green directed line), ngAfterViewChecked indicates that this component and its children are finished exporting their views. Here’s an example:

import {Component, AfterViewChecked} from '@angular/core';
import {Course} from "./course";

@Component({
    selector: 'app-root',
    template: `
    <div class="course">
        <span class="description">{{course.description}}</span>
    </div>
`})
export class AppComponent implements AfterViewChecked {

    course: Course = {
        id: 1,
        description: "Angular For Beginners"
    };

    ngAfterViewChecked() { this.course.description += Math.random(); }}Copy the code

This code will fail during the Angular change detection cycle. The component has finished exporting the DOM data structure, and we have also modified the data state in the component’s ngAfterViewChecked() method. This results in inconsistent data and view state after rendering.

Data flows from component classes to the DOM data structures that represent them, and the act of generating those DOM data structures itself does not lead to further modification of the data. However, when we modify data during the ngAfterView lifecycle, Angular’s “one-way data flow” rule prohibits updating a view after it has already been composed.

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

conclusion

From the process of change detection and rendering output, it can be concluded that:

One-way data flow refers to the flow of application data from the top to bottom rendering scan of the component tree to the output DOM data structure generated by the rendering process.

reference

  • Angular – What is Unidirectional Data Flow? Learn How the Angular Development Mode Works, why it’s important to use it and how to Troubleshoot it

Read more

  • Angular 2 Change Detection – about Angular Change Detection and optimization methods.