Angular:不要再在模板内调用函数了

![2021-10-29 15.17.37.jpg][1]

模板是一种HTML的形式，它告诉Angular如何渲染组件。每个组件都有它的模板，它定义了元素和它应该如何看起来。但最常见的错误使用技巧之一是在模板内调用一个函数。

```
import { Component } from '@angular/core';

@Component({
  selector: 'app-performance-issue',
  template: `
    <div *ngFor="let name of filterNames()">{{ name }}</div>`,
})
export class PerformanceIssueComponent {

names = ['Maria', 'Michel', 'Jack', 'John', 'Sam', 'Mila'];

filterNames(): string[] {
    return this.names.filter(name => name.startsWith('M'));
  }
}
```
以这种方式获得计算值是很容易的。但这可能导致一个严重的性能问题，我们应该注意。

The Problem
-----------

这个问题的核心与变化检测机制有关，Angular用它来检测变化的数据并更新DOM的受影响部分。然而，Angular无法检测到函数调用的值是否有任何变化。事实上，模板中的所有函数都会在每个变化检测周期中被重新执行，进行比较。

例如，在上面的代码片段中，很明显，*filterNames()*是依赖于名字的。如果*filterNames()*没有变化，名字也没有变化。即使在变化检测周期内没有值的变化，*filterNames()*仍然会被调用，因为Angular引擎还不能检测这种类型的关系。

让我们切实地看看问题的核心所在。

```
import { Component } from '@angular/core';

@Component({
  selector: 'app-performance-issue',
  template: `
    <div *ngFor="let name of filterNames()">{{ name }}</div>
    <button (click)="onClick()">Click Me!</button>`,
})
export class PerformanceIssueComponent {

names = ['Maria', 'Michel', 'Jack', 'John', 'Sam', 'Mila'];

filterNames(): string[] {
    console.log("filterNames() called!");
    return this.names.filter(name => name.startsWith('M'));
  }

onClick() {
    console.log("Button clicked!");
  }
}
```
每次点击按钮（触发了一个变化检测周期），*filterNames()*函数将总是被重新执行，如下图所示。

![1_u_l68T1-woa3Mbr_uSdUWw.png][2]

每当按钮被点击时就调用这些函数，这听起来无害，因为没有人会一直点击它。

Angular中有些功能会在后台非常频繁地触发变化检测，比如绑定mousemove事件。当我们在应用中使用这些功能时，函数的重新执行将成为我们不能忽视的问题。例如，看一下下面的代码片段。

```
import { Component } from '@angular/core';

@Component({
  selector: 'app-performance-issue',
  template: `
    <div *ngFor="let name of filterNames()">{{ name }}</div>
    <div
        style="height: 300px; width: 300px; background-color: #2f487e;"
        (mousemove)="onMousemove()">
    </div>`,
})
export class PerformanceIssueComponent {

names = ['Maria', 'Michel', 'Jack', 'John', 'Sam', 'Mila'];
  counter = 0;

filterNames(): string[] {
    this.counter++
    console.log("filterNames() called! " + this.counter + " times!");
    return this.names.filter(name => name.startsWith('M'));
  }

onMousemove() {
    console.log('Mouse moved');
  }
}

```
通过用鼠标移动*<div>*中的光标，我们会看到这个函数在很短的时间内被执行了数百次。
![1_ywSGT-0_5NMgiglTtO8IkA.png][3]

起初只有几个函数调用，影响可能不大。然而，当越来越多的新组件被添加到应用程序中时，它们会以指数形式堆积起来，最终吞噬了所有的计算能力，使应用程序变得缓慢。

有些人可能会想到使用getter方法来避免函数调用。但事实上，这并不可行，因为getter方法也是一个函数调用，这也有同样的问题。

```
import { Component } from '@angular/core';

@Component({
  selector: 'app-performance-issue',
  template: `
    <div *ngFor="let name of filteredNames">{{ name }}</div>
    <div
        style="height: 300px; width: 300px; background-color: #2f487e;"
        (mousemove)="onMousemove()">
    </div>`,
})
export class PerformanceIssueComponent {

names = ['Maria', 'Michel', 'Jack', 'John', 'Sam', 'Mila'];
  counter = 0;

get filteredNames(): string[] {
    this.counter++
    console.log("filterNames() called! " + this.counter + " times!");
    return this.names.filter(name => name.startsWith('M'));
  }

onMousemove() {
    console.log('Mouse moved');
  }
}
```

![1_jCmltyjtNqlzGb8pEKkU2w.png][4]

The Solution
------------

事实上，这个问题并没有完美的解决方案。Angular必须在变化检测期间重新执行模板内的所有函数，这是其设计的一个局限性。一个可能的变通方法是避免带有复杂计算的模板函数调用。如果我们需要有一些计算值，我们应该自己手动管理，而不是依赖Angular的变化检测。

Solution1 — 使用 setter function
------------------------------

```
import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-performance-issue',
  template: `
    <div *ngFor="let name of filteredNames">{{ name }}</div>`,
})
export class PerformanceIssueComponent {

filteredNames = []

@Input() set names(value: string[]) {
    this.filteredNames = value.filter(name => name.startsWith('M'));
  }
}
```

Solution2 — 使用 ngOnChanges
--------------------------

```
import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';

@Component({
  selector: 'app-performance-issue',
  template: `
    <div *ngFor="let name of filteredNames">{{ name }}</div>`,
})
export class PerformanceIssueComponent implements OnChanges{

@Input() names = []
  filteredNames = []

ngOnChanges(changes: SimpleChanges): void {
    if (changes.value) {
      this.filteredNames = this.names.filter(name => name.startsWith('M'));
    }
  }
}
```

[1]: http://guobacai.com/usr/uploads/2021/10/2510547019.jpg
  [2]: http://guobacai.com/usr/uploads/2021/10/825491543.png
  [3]: http://guobacai.com/usr/uploads/2021/10/2531700720.png
  [4]: http://guobacai.com/usr/uploads/2021/10/3882566673.png

Angular:不要再在模板内调用函数了

评论已关闭