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

站长资源 2024/11/28 佚名

2 0 1

变更检测

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: `
 <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数据结构的流程。

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

angular2单向数据绑定,angularjs,单向绑定,单向数据流

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“对Angular中单向数据流的深入理解”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

Vue项目使用CDN优化首屏加载问题

jQuery中复合选择器简单用法示例

评论“对Angular中单向数据流的深入理解”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接