Angular中单向数据流的示例分析-创新互联
这篇文章主要介绍了Angular中单向数据流的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联公司专注于市中企业网站建设,成都响应式网站建设公司,商城网站制作。市中网站建设公司,为市中等地区提供建站服务。全流程按需搭建网站,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务变更检测
Angular 中,数据是由顶部根节点流向最后的叶子节点,整个数据流是单向,构成一颗单向树。
Angular 认为所有的异步操作都有可能会引起模型的变化,引起数据模型发生变化的事件源有:
Events:click, mouseover, keyup ...
Timers:setInterval、setTimeout
XHRs:Ajax(GET、POST ...)
Angular 封装 Zone来拦截跟踪异步,一旦发现异步行为,Angular 就会进行变更检测。
因为数据流是单向的,组件的数据来源只能由父组件进行传入,所以 Angular 会从上到下,广度遍历检测组件,只要父组件检测完毕就能继续检测子组件。而相比 angularjs,双向、混乱的数据流方向,会导致重复变更检测重复多次,直到数据稳定,可能会导致性能问题,或者出现数据和视图处于不一致的状态,即渲染过程完成后的视图不能反映数据的实际状态。
渲染输出
当检测到数据模型变化时,组件需要重新渲染,Angular将运行它的 DOM 生成函数,该函数会生成一个新的 DOM数据结构,该结构对应于组件 View 的新版本。
Angular 在渲染过程中,评估模板表达式并在整个组件树中调用生命周期钩子。
注意:绿色标志会多次调用
从生命调用周期来看(绿色有向线),ngAfterViewChecked 标示该组件及子组件视图输出完成。看以下一例子:
import {Component, AfterViewChecked} from '@angular/core'; import {Course} from "./course"; @Component({ selector: 'app-root', template: `{{course.description}}`}) 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 的“单向数据流”规则禁止在一个视图已经被组合好之后再更新视图。
这意味着数据模型到视图过程是单向,不可在视图后发生数据流发生改变。
感谢你能够认真阅读完这篇文章,希望小编分享的“Angular中单向数据流的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联成都网站设计公司,关注创新互联成都网站设计公司行业资讯频道,更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页题目:Angular中单向数据流的示例分析-创新互联
URL标题:http://pwwzsj.com/article/dhsijd.html