对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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
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函数in_array()使用详解
2014/08/20 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP asXML()函数讲解
2019/02/03 PHP
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python编程中的for循环语句学习教程
2015/10/14 Python
Python开发的HTTP库requests详解
2017/08/29 Python
浅谈Python中的bs4基础
2018/10/21 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
自荐信的格式
2014/03/10 职场文书
教堂婚礼主持词
2014/03/14 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
公务员个人考察材料
2014/12/23 职场文书
初中语文教师研修日志
2015/11/13 职场文书
高中班主任心得体会
2016/01/07 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python