再谈Angular4 脏值检测(性能优化)

再谈Angular 4的脏值检测：深入理解性能优化

Angular 4的脏值检测是开发者们持续关注的话题，它是Angular性能优化的基础。今天，我们一起来深入Angular 4脏值检测的原理，并分享一些性能优化的实用提示。

一、进入点——Zone.js

二、脏值检测（Change Detection）

脏值检测的基本原理是对比新旧值。Angular 4将页面划分为若干个组件，组成一棵组件树。在进入脏值检测后，从根组件开始，自上而下进行检测。Angular提供了两种策略：Default和OnPush。

1. Default——缺省策略

使用ChangeDetectionStrategy.Default意味着一旦发生数据变化的事件，就总是检测该组件。脏值检测的操作包括更新子组件绑定的属性、调用子组件的生命周期钩子、更新DOM以及对子组件进行脏值检测。值得注意的是，DOM更新是优先的，而NgDoCheck和NgOnChanges的调用并不是优先。

2. OnPush——单次检测策略

ChangeDetectionStrategy.OnPush只在Input Properties变化时才检测组件。当Input不变时，它只在初始化时进行检测，这就是所谓的单次检测。需要注意的是，OnPush只检测Input的引用变化，Input对象的属性变化并不会触发当前组件的脏值检测。虽然OnPush策略提高了性能，但也可能引发一些Bug。解决方案通常是将Input转化为不可变的形式，强制改变Input的引用。

三、数据绑定与性能优化提示

直接绑定数据：

在一个有序列表里，每一个元素都直接与数据绑定。当你看到列表中的每一个条目，你都能看到它们的名字和所属类别，这就是直接的数据绑定。这是大多数情况下的最优选择。

绑定一个函数的调用结果：

在某些情况下，我们可能需要绑定一个函数的调用结果。例如，在列表的每个元素中，都有一个名为“classes”的函数被调用并显示结果。每当脏值检测周期开始时，这个函数都会被调用。设想用户正在滚动页面，每次滚动都会触发脏值检测，导致函数被频繁调用。除非有特殊需求，否则我们应尽量避免这种方式，以减少性能消耗。

数据绑定与管道的结合：

当我们将数据与管道结合时，每次脏值检测都会触发管道的调用。但Angular对管道进行了优化，通过缓存机制提高效率。如果当前元素与上次相同，管道将直接返回上次的结果。尽管如此，我们还是应当谨慎使用管道，确保它们不会过度消耗资源。

关于NgFor的注意事项：

在使用NgFor时，为了提高性能，我们通常应该配合使用trackBy函数。如果不使用trackBy，每次脏值检测都会更新DOM列表中的每一项。通过指定trackBy函数，我们可以告诉Angular如何跟踪每个元素的身份，从而提高更新效率。

在组件示例中，我们有一个简单的应用组件，包含一个列表和一个刷新按钮。通过trackByFn函数，我们可以告诉NgFor如何跟踪列表中的每一项。当从服务器获取新数据时，我们只需更新集合即可，NgFor会自动处理DOM的更新。

参考：

以上内容是对数据绑定在Angular中的几种常见方式的详细解释，希望能对大家的学习有所帮助。也希望大家能关注并支持狼蚁SEO的更多内容。