代码之家 › 专栏 › 技术社区 › Stefan Falk

怪异的更新行为:模板不断调用显示函数

typescript angular

0

Stefan Falk · 技术社区 · 7 年前

我注意到一种奇怪的行为。如果我有 input 哪个有 focus 和 focusout displaySomething -like方法被多次调用。

看看 this stackblitz 示例(注意控制台中的日志消息)。

特别是关于 displayDataContent() 在里面

<div>
  <ul>
    <li *ngFor="let content of data.contents">
      {{ displayDataContent(content) }}
    </li>
  </ul>
</div>

为什么这个函数会被调用这么多次?如果我没有放置一个标签,我就不会注意到这种行为 console.log 早些时候的声明。

1 回复 | 直到 7 年前

1

joh04667 7 年前

这是预期的行为。这是绑定到模板的数据,Angular的更改检测循环检查绑定属性,以查看其值是否已更改,是否需要在组件或其视图中更新。由于这是一个方法,Angular检查其值是否已更改的唯一方法是调用它并将新结果与当前值进行比较。

在许多文章中,您经常会看到这种行为被认为是不好的做法,因为多个半昂贵的方法调用会严重影响页面的速度。然而,一个非常简单的方法返回的值很少或没有计算,这与使用getter或本机值访问器几乎没有什么不同,因此这种做法并不适用总是糟糕…但是,它仍然(稍微)需要在堆栈上做更多的工作,并且在方法完成之前会延迟更改检测。

Observable 带着 async 管道是最首选的模式;这个 可观察 s排放意味着无功变化检测,而不是轮询。

ChangeDetectorRef 如果需要,手动运行更改检测循环…虽然总体来说这是一个加速过程,但更改检测是Angular作为框架最吸引人的事情之一,如果可以,将该控件反转为Angular通常是更好的设计选择。