对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 相关文章推荐
网页打开自动最大化的js代码
Aug 22 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
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
php 全文搜索和替换的实现代码
2008/07/29 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
深入理解javascript原型链和继承
2014/09/23 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
Python格式化输出%s和%d
2018/05/07 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python中的句柄操作的方法示例
2019/06/20 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
python selenium 获取接口数据的实现
2020/12/07 Python
python statsmodel的使用
2020/12/21 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
智能钱包:Ekster
2019/11/21 全球购物
一套Java笔试题
2016/08/20 面试题
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
工程总经理工作职责
2013/12/09 职场文书
文明班级建设方案
2014/05/15 职场文书
2014年信访工作总结
2014/11/17 职场文书
2014年药店工作总结
2014/11/20 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技