奇怪的更新行为:模板不断调用display函数
我注意到一个奇怪的行为。如果我有一个具有focus和focusout回调的input，那么一个只有一个简单的displaySomething-like方法的嵌套组件就会被调用太多次。
只需查看this stackblitz示例(请注意控制台中的日志消息)。
特别是，它是关于displayDataContent()的
<div>
<ul>
<li *ngFor="let content of data.contents">
{{ displayDataContent(content) }}
</li>
</ul>
</div>为什么这个函数会被调用这么多次？如果我没有早点在其中放入一条console.log语句，我就不会注意到这种行为。
如何才能避免这种情况？我一开始就不明白为什么会发生这种事。
回答 1
Stack Overflow用户
发布于 2018-12-13 03:58:57
这是预期的行为。这是绑定到模板的数据，并且Angular的更改检测循环检查绑定属性，以查看它们的值是否已更改，是否需要在组件或其视图中更新。由于这是一个方法，Angular可以检查其值是否已更改的唯一方法是调用它并将新结果与当前值进行比较。
在许多文章中，您经常会看到这种行为被认为是不好的做法，因为多个半昂贵的方法调用会严重影响页面的速度。然而，一个非常简单的方法只需要很少的计算就能返回值，甚至不需要计算，这与使用getter或原生值访问器几乎没有什么不同，因此这种做法并不总是bad...but的，它在堆栈上的工作仍然(稍微)多一些，并且会在方法完成之前阻止更改检测。
出于这个原因，通常认为最佳实践是在绑定之前将值展开到组件属性，或者使用管道。如果该值由于组件外部的事件而发生更改，则使用带有async管道的Observable是最好的模式；Observable的释放意味着响应式更改检测，而不是轮询。
您还可以有策略地告诉Angular关闭或限制整个组件的更改检测，然后使用ChangeDetectorRef手动运行更改检测循环，如果needed...while总体上是加速的话，更改检测是Angular作为框架最吸引人的事情之一，如果可以的话，将该控制反转到Angular通常是更好的设计选择。
https://stackoverflow.com/questions/53750271
复制相似问题
腾讯云开发者
