對Angular中單向數(shù)據(jù)流的深入理解

更新時間：2018年03月31日 12:03:22 作者：laoergege

這篇文章主要給大家介紹了關于對Angular中單向數(shù)據(jù)流的深入理解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。

變更檢測

Angular 中，數(shù)據(jù)是由頂部根節(jié)點流向最后的葉子節(jié)點，整個數(shù)據(jù)流是單向，構成一顆單向樹。

Angular 認為所有的異步操作都有可能會引起模型的變化，引起數(shù)據(jù)模型發(fā)生變化的事件源有：

Events：click, mouseover, keyup ...
Timers：setInterval、setTimeout
XHRs：Ajax(GET、POST ...)

Angular 封裝 Zone來攔截跟蹤異步，一旦發(fā)現(xiàn)異步行為，Angular 就會進行變更檢測。

因為數(shù)據(jù)流是單向的，組件的數(shù)據(jù)來源只能由父組件進行傳入，所以 Angular 會從上到下，廣度遍歷檢測組件，只要父組件檢測完畢就能繼續(xù)檢測子組件。而相比 angularjs，雙向、混亂的數(shù)據(jù)流方向，會導致重復變更檢測重復多次，直到數(shù)據(jù)穩(wěn)定，可能會導致性能問題，或者出現(xiàn)數(shù)據(jù)和視圖處于不一致的狀態(tài)，即渲染過程完成后的視圖不能反映數(shù)據(jù)的實際狀態(tài)。

渲染輸出

當檢測到數(shù)據(jù)模型變化時，組件需要重新渲染，Angular將運行它的 DOM 生成函數(shù)，該函數(shù)會生成一個新的 DOM數(shù)據(jù)結構，該結構對應于組件 View 的新版本。

Angular 在渲染過程中，評估模板表達式并在整個組件樹中調用生命周期鉤子。

注意：綠色標志會多次調用

從生命調用周期來看（綠色有向線），ngAfterViewChecked 標示該組件及子組件視圖輸出完成?？匆韵乱焕樱?br />

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();
 }
}

上述代碼會在Angular變更檢測周期發(fā)生錯誤。組件已經完成 DOM 數(shù)據(jù)結構輸出，我們還在該組件 ngAfterViewChecked() 方法中修改了數(shù)據(jù)狀態(tài)。這樣導致了視圖渲染后，數(shù)據(jù)跟視圖狀態(tài)不一致。

數(shù)據(jù)從組件類流向表示它們的DOM數(shù)據(jù)結構，生成這些DOM數(shù)據(jù)結構的行為本身就不會導致數(shù)據(jù)的進一步修改。但我們在 ngAfterView 生命周期發(fā)生修改數(shù)據(jù)行為，Angular 的“單向數(shù)據(jù)流”規(guī)則禁止在一個視圖已經被組合好之后再更新視圖。
這意味著數(shù)據(jù)模型到視圖過程是單向，不可在視圖后發(fā)生數(shù)據(jù)流發(fā)生改變。

總結

從變更檢測過程以及渲染輸出過程中，可以總結出：

單向數(shù)據(jù)流指的是從組件樹的頂部到底部渲染掃描過程中應用程序數(shù)據(jù)流轉到由渲染過程生成的輸出DOM數(shù)據(jù)結構的流程。

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。