Question

我有一个组件中的项目的列表：

list: Array<MyType>;

用户可以在点击时选择和取消选择元素：

toggleItem(item: MyType) {
  if (this.selection.has(item)) {
    this.selection.delete(item);
    return;
  }

  this.selection.add(item);
}

所选项目存储在Set中：

selected: Set<MyType> = new Set();

现在，我需要根据是否选择元素来切换CSS类和title属性：

<button class="toggle"
        type="button"
        [ngClass]="{'selected': selection.has(item)}"
        [title]="selection.has(item) ? 'Select' : 'Deselect'"
        (click)="toggleItem(item)">
  {{ item.title }}
</button>

现在，我在某个地方读到了一个不好的主意，因为Angular会定期对函数调用进行评估以评估更改，例如：

[ngClass]="{'selected': selection.has(item)}"

他们说最好检查变量或对象的成员，例如：

[ngClass]="{'selected': item.selected}"

是真的吗？它是否会以我目前使用的方式降低性能？我应该为每个添加到Set或从geom_text中删除的项目添加属性吗？

Answer 1

每当Angular执行更改检测时，它都会检查模板中变量的任何内容是否已更改。

现在，对于模型变量，检查非常简单，因为Angular可以简单地读取它们的值以检查更改。

但是函数并不是真的。使用函数，Angular只能通过调用函数本身来确定变量是否已更改。

现在，如果函数是一个单值返回值，那么并没有太大区别。

但是，如果该函数具有复杂的逻辑，则它将实质上破坏所有性能。每当每次更改检测周期运行时，Angular都会调用该函数以检查并检测更改。

因此，实际上不建议在模板中以数据绑定语法编写函数。

注意：我也为此写了Medium Article。我建议您检查一下。主要是关于Angular Reactive Forms的性能。但这可以帮助您更好地理解我在上面所说的话。

检查属性与检查函数的返回值的性能如何？

1 个答案: