ngFor 指令是否会在每次突变时重新渲染整个数组？

Answer 1

除了 Gunter 的回答之外，如果您想知道 UI 的哪一部分被渲染/重新渲染，您可以使用 Chrome（甚至独立于任何库/框架）：

• 打开调试面板
• 菜单（调试面板）/更多工具/渲染

然后您应该看到以下面板：

打开

Paint Flashing

选项，并享受您的列表的乐趣。
如果某个区域呈绿色闪烁，则表明该区域已被涂漆/重新涂漆👍.

EX ：如果您在 Gunter 的答案中使用 Plunkr ： http://plnkr.co/edit/oNm5d4KwUjLpmmu4IM2K?p=preview 并打开

Paint Flashing

，将一个项目添加到列表中，您将看到上一个项目项目不闪烁。 （这意味着没有重新绘制）。

Answer 2

否 ，仅当数组本身被不同的数组实例替换时，它才会重新渲染。

更新

感谢 Olivier Boissé（见评论）

即使传递了不同的数组实例，Angular 也会识别它是否包含相同的项目实例，并且即使这样也不会重新渲染。

另请参阅此 StackBlitz 示例

如果使用的

IterableDiffer

识别并在开头或中间添加或删除，则在该位置插入/删除项目，而不重新渲染所有其他项目。

Plunkers 中演示的动画在这个问题的答案中如何在 Angular 2 中为 *ngFor 制作动画？也演示了这一点。事实上，这种动画是以这种方式实现的驱动因素（除了一般优化之外）

Answer 3

在 Angular 10 中，即使之前的项目未受影响，我的整个元素列表也会重新渲染。我在 ngFor 中使用了

trackBy

并解决了问题。

你可以这样使用它

<li *ngFor="let chatMessage of chatMessages; trackBy: trackChatMessage">

然后在 .ts 文件中添加返回唯一值字符串的函数 trackChatMessage。

trackChatMessage(index: number, chatMessage: ChatMessage) {
return chatMessage.id;
}