[S3-E440]Angular 开发者常犯的错误

Posted 2021-04-26 前端JavaScript

Angular vs Angular 2 vs Angular 4

Angular 1.x 版本统称为 AngularJS，Angular 2+ (4/5) 统称为 Angular。

第三方库的命名也有一定的规则。假设早期版本的命名以 ng- 作为前缀，当 Angular 2 发布后，该库名称会使用 ng2- 作为前缀。但当 Angular 4 发布以后，新的命名规则就随之出现了。新的术语是使用 ngx- 作为前缀，因为 Angular 使用语义版本，每六个月会发布一个新版本。因此，举个例子，当我们把 ng2-bootstrap 更名为 ngx-bootstrap 后，今后就不需要再频繁更换库的名称了。

ngOnChanges vs ngDoCheck

AngularJS 使用 watcher 和 listener 的概念。watcher 是一个函数，返回被监测的值。通常情况下，这些值是对象模型的属性值。但也不总是数据模型的属性 - 我们可以跟踪组件的状态、计算新值等。如果该函数返回的值与前一次的值不一样，Angular 就会调用 listener，通常它用来更新 UI 状态。

Angular 移除了 watch 和 scope，现在我们将使用组件的输入属性。除此之外，Angular 为我们提供了 ngOnChanges 生命周期钩子。为了提高变化检测的性能，对于对象比较，Angular 内部直接使用 === 运算符进行值比较。因此当输入属性是引用类型，当改变对象内部属性时，是不会调用 ngOnChanges 生命周期钩子的。

// JS has NaN !== NaN

export function looseIdentical(a: any, b: any): boolean {

  return a === b || typeof a === 'number' && typeof b === 'number'

    && isNaN(a) && isNaN(b);

}

许多开发人员不知道这一点，陷入这个陷阱。为了解决这个问题，有各种解决方案：

1、使用 ngDoCheck 生命周期钩子

2、使用不可变的数据结构

3、把输入对象拆分为多个输入 (即不是直接传递引用对象，而是把内部属性抽离成独立的字段)

4、使用 s