对Angular中单向数据流的深入理解


Posted in Javascript onMarch 31, 2018

变更检测

Angular 中,数据是由顶部根节点流向最后的叶子节点,整个数据流是单向,构成一颗单向树。

对Angular中单向数据流的深入理解

Angular 认为所有的异步操作都有可能会引起模型的变化,引起数据模型发生变化的事件源有:

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

Angular 封装 Zone来拦截跟踪异步,一旦发现异步行为,Angular 就会进行变更检测。

因为数据流是单向的,组件的数据来源只能由父组件进行传入,所以 Angular 会从上到下,广度遍历检测组件,只要父组件检测完毕就能继续检测子组件。而相比 angularjs,双向、混乱的数据流方向,会导致重复变更检测重复多次,直到数据稳定,可能会导致性能问题,或者出现数据和视图处于不一致的状态,即渲染过程完成后的视图不能反映数据的实际状态。

渲染输出

当检测到数据模型变化时,组件需要重新渲染,Angular将运行它的 DOM 生成函数,该函数会生成一个新的 DOM数据结构,该结构对应于组件 View 的新版本。

Angular 在渲染过程中,评估模板表达式并在整个组件树中调用生命周期钩子。

注意:绿色标志会多次调用

对Angular中单向数据流的深入理解

从生命调用周期来看(绿色有向线),ngAfterViewChecked 标示该组件及子组件视图输出完成。看以下一例子:

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变更检测周期发生错误。组件已经完成 DOM 数据结构输出,我们还在该组件 ngAfterViewChecked() 方法中修改了数据状态。这样导致了视图渲染后,数据跟视图状态不一致。

数据从组件类流向表示它们的DOM数据结构,生成这些DOM数据结构的行为本身就不会导致数据的进一步修改。但我们在 ngAfterView 生命周期发生修改数据行为,Angular 的“单向数据流”规则禁止在一个视图已经被组合好之后再更新视图。
这意味着数据模型到视图过程是单向,不可在视图后发生数据流发生改变。

总结

从变更检测过程以及渲染输出过程中,可以总结出:

单向数据流指的是从组件树的顶部到底部渲染扫描过程中应用程序数据流转到由渲染过程生成的输出DOM数据结构的流程。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
玩转方法:call和apply
May 08 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
3种vue组件的书写形式
Nov 29 Javascript
layui select动态添加option的实例
Mar 07 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery中复合选择器简单用法示例
Mar 31 #jQuery
jQuery中内容过滤器简单用法示例
Mar 31 #jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 #jQuery
Postman模拟发送带token的请求方法
Mar 31 #Javascript
浅谈Postman解决token传参的问题
Mar 31 #Javascript
postman+json+springmvc测试批量添加实例
Mar 31 #Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 #Javascript
You might like
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP安全防范技巧分享
2011/11/03 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
用python写一个定时提醒程序的实现代码
2019/07/22 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
性能服装:HYLETE
2018/08/14 全球购物
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
电子商务专业实习生自我鉴定
2013/09/24 职场文书
水果超市创业计划书
2014/01/27 职场文书
金融与证券专业求职信
2014/06/22 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
实训报告范文大全
2014/11/04 职场文书
先进工作者事迹材料
2014/12/23 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
python多线程方法详解
2022/01/18 Python