Angular 4 - ngFor不会重新渲染整个DOM

时间:2018-06-08 11:50:02

标签: javascript angular performance

我只是查看trackBy的{​​{1}}选项。在互联网上提供的大多数示例中,它表明如果您默认情况下不使用*ngFor选项,则会重新呈现整个DOM。例如,如果我们有一个表和3行(使用trackBy生成),则在添加另一行后,您可以在控制台中看到所有4行都已重新生成。如果你使用ngFor,它只会渲染第4行,前3行会保持不变。

但令人困惑的部分来自这里。我尝试使用Angular 4的表行重现示例,当我尝试使用trackBy添加新行时(不使用ngFor),它神奇地不会为我重新渲染整个DOM ,但确切地重新渲染最后一行。如果我添加trackBy函数,它不会改变重新呈现DOM的方式。

只是想知道,如果他们在某个时间点更新了它,现在trackBy效率更高,或者我错过了什么?

示例代码:https://stackblitz.com/edit/angular-igjyci?file=src%2Fapp%2Fapp.component.html

示例gif:GIF in action

1 个答案:

答案 0 :(得分:0)

如果只将新元素推送到数组,则不会更改dom,因为前面元素的标识保持不变。仅举例来说,如果重做整个数组(即使具有相同的值),DOM也会发生变化。 TrackBy只是增加了通过不同方法识别对象的能力。请查看以下链接以获取完整说明。

https://angular.io/api/common/NgForOf#change-propagation