导航：首页 > 开发技术 >

Angular4中脏值检测的示例分析

发表于：2024-11-21 作者：千家信息网编辑

千家信息网最后更新 2024年11月21日，这篇文章将为大家详细讲解有关Angular4中脏值检测的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。SummaryAngular 4的脏值检测是个老话题了

千家信息网最后更新 2024年11月21日Angular4中脏值检测的示例分析

这篇文章将为大家详细讲解有关Angular4中脏值检测的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

Summary

Angular 4的脏值检测是个老话题了，而理解这个模型是做Angular性能优化的基础。因此，今天我们再来聊聊Angular 4脏值检测的原理，并看看性能优化的小提示。

进入点 - Zone.js

Angular 4是一个MVVM框架。数据模型（Model）转换成视图模型（ViewModel）后，绑定到视图（View）上渲染成肉眼可见的页面。因此，发现数据模型变化的时间点是更新页面的关键，也是调用脏值检测的关键。

经过分析，工程师们发现，数据的变化往往由macrotask和microtask等异步事件引起。因此，通过重写浏览器所有的异步API，就能从源头有效地监听数据变化。Zone.js就是这样一个猴子脚本（Monkey Patch）。Angular 4使用了一个定制化的Zone（NgZone），它会通知Angular可能有数据变化，需要更新视图中的数据（脏值检测）。

脏值检测（Change Detection）

脏值检测的基本原理是存储旧数值，并在进行检测时，把当前时刻的新值和旧值比对。若相等则没有变化，反之则检测到变化，需要更新视图。

Angular 4把页面切分成若干个Component（组件），组成一棵组件树。进入脏值检测后，从根组件自顶向下进行检测。Angular有两种策略：Default和OnPush。它们配置在组件上，决定脏值检测过程中不同的行为。

Default - 缺省策略

ChangeDetectionStrategy.Default。它还意味着一旦发生可能有数据变化的事件，就总是检测这个组件。

脏值检测的操作基本上可以理解为以下几步。1）更新子组件绑定的properties，2）调用子组件的NgDoCheck和NgOnChanges生命周期钩子（Lifecycle hook），3）更新自己的DOM，4）对子组件脏值检测。这是一个从根组件开始的递归方程。

// This is not Angular codefunction changeDetection(component) { updateProperties(component.children); component.children.forEach(child => {  child.NgDoCheck();  child.NgOnChanges(); }; updateDom(component); component.children.forEach(child => changeDetection(child));}

我们开发者会非常关注DOM更新的顺序，以及调用NgDoCheck和NgOnChanges的顺序。可以发现：

DOM更新是深度优先的
NgDoCheck和NgOnChanges并不是（也不是深度优先）

OnPush - 单次检测策略

ChangeDetectionStrategy.OnPush。只在Input Properties变化（OnPush）时才检测这个组件。因此当Input不变时，它只在初始化时检测，也叫单次检测。它的其他行为和Default保持一致。

需要注意的是，OnPush只检测Input的引用。Input对象的属性变化并不会触发当前组件的脏值检测。

虽然OnPush策略提高了性能，但也是Bug的高发地点。解决方案往往是将Input转化成Immutable的形式，强制Input的引用改变。

Tips

数据绑定

Angular有3种合法的数据绑定方式，但它们的性能是不一样的。

直接绑定数据

   Name {{item.name}}  Classes {{item.classes}}

大多数情况下，这都是性能最好的方式。

绑定一个function调用结果

   Name {{item.name}}  Classes {{classes(item)}}

在每个脏值检测过程中，classes方程都要被调用一遍。设想用户正在滚动页面，多个macrotask产生，每个macrotask都至少进行一次脏值检测。如果没有特殊需求，应尽量避免这种使用方式。

绑定数据+pipe

   Name {{item.name}}  Classes {{item | classPipe}}

它和绑定function类似，每次脏值检测classPipe都会被调用。不过Angular给pipe做了优化，加了缓存，如果item和上次相等，则直接返回结果。

NgFor

多数情况下，NgFor应该伴随trackBy方程使用。否则，每次脏值检测过程中，NgFor会把列表里每一项都执行更新DOM操作。

@Component({ selector: 'my-app', template: `     {{item.id}}
  
   `,})export class App { collection; constructor() {  this.collection = [{id: 1}, {id: 2}, {id: 3}]; }   getItems() {  this.collection = this.getItemsFromServer(); }   getItemsFromServer() {  return [{id: 1}, {id: 2}, {id: 3}, {id: 4}]; }   trackByFn(index, item) {  return index; }}

关于"Angular4中脏值检测的示例分析"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

很赞哦！