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

【问题标题】：Angular 4 - ngFor does not rerender whole DOMAngular 4 - ngFor 不会重新渲染整个 DOM
【发布时间】：2018-11-18 11:29:36
【问题描述】：

我只是检查 trackBy 选项的 *ngFor 。在互联网上可用的大多数示例中，它表明如果您默认不使用trackBy 选项，它会重新渲染整个DOM。例如，如果我们有一个表和 3 行，它们是用ngFor 生成的，在添加另一行之后，在控制台中您可以看到所有 4 行都重新生成了。如果您使用trackBy，它只会渲染第 4 行，而前 3 行将保持原样。

但令人困惑的部分出现在这里。我尝试使用 Angular 4 重现带有表行的示例，并且当我尝试仅使用 ngFor 添加新行（不使用 trackBy）时，它神奇地不会为我重新渲染整个 DOM，而是完全重新- 只渲染最后一行。如果我添加 trackBy 函数，它不会改变重新渲染 DOM 的方式。

只是想知道，如果他们在某个时间点更新了它，现在ngFor 更有效率，还是我遗漏了什么？

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

示例 gif：GIF in action

【问题讨论】：

在此处添加一些代码。
将添加示例 gif，您可以在一分钟内看到它的动作和代码。
添加了 gif 和示例代码。如您所见，控制台显示 DOM 上唯一更改的是添加的新行。而且代码没有trackBy。

标签： javascript angular performance

【解决方案1】：

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

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

【讨论】：

所以在我的例子中，如果我将列表更改为输入字段，它引用一个对象，如果我更改文本，它会重新渲染整个 DOM 吗？
没有。它通过其签名标识一个对象，如果您更改该对象本身的任何内容，则 li（在这种情况下）不会更改。只有当你制作一个新对象并用新对象替换旧对象时，角度才会改变 li 元素。使用 trackBy，您可以添加通过其他内容（例如数据集的 id）来识别对象的能力。
您介意更新我上面的示例以显示案例，它确实更新了所有 li 元素吗？或者在这里提供一个代码，因为它仍然有点不清楚。
看看这个：stackblitz.com/edit/…