Angular Academy · 课时

优化列表与渲染

Q: 「优化列表与渲染」这节课中我会学到什么？

使用跟踪功能加快大型列表的处理速度 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用跟踪功能加快大型列表的处理速度

优化列表与渲染 是 CoddyKit 上的免费 Angular Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

列表渲染为何重要

列表是最常见的性能瓶颈。每次发生变化都重新渲染整个列表不仅浪费工作，还会重置 DOM 状态。Angular 为您提供了高效渲染的工具。

@for 代码块

内置控制流 @for 要求使用 track 表达式，以便 Angular 在更新过程中识别每个项目。

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
}

为何必须进行跟踪

没有稳定的标识时，Angular 无法判断哪些项目移动了、添加了或删除了。track 会将每个渲染节点映射到对应数据，使 Angular 能够复用 DOM，而不是重新创建节点。

按标识进行跟踪

请使用唯一且稳定的键，例如 id。对于会重新排序的列表，请避免使用 track $index，因为索引变化会导致不必要的 DOM 大量变动。

@for (user of users(); track user.id) {
  <app-user-card [user]="user" />
}

适合使用索引跟踪的场景

如果项目没有唯一 id 且永远不会重新排序（例如只追加的日志），可以使用 track $index。

@for (line of logLines(); track $index) {
  <p>{{ line }}</p>
}

传统的 trackBy

使用较旧的 *ngFor 时，需要提供一个返回稳定键的 trackBy 函数。

trackById(index: number, item: Item) {
  return item.id;
}

在模板中使用 trackBy

在 *ngFor 微语法中引用该函数。

<li *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</li>

空状态和加载状态

@for 支持在集合为空时使用 @empty 代码块，从而避免额外的 *ngIf 检查。

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items yet.</li>
}

避免在绑定中调用函数

模板中的函数会在每次检查时运行。请将值预先计算到信号或经过记忆化的字段中，而不要在 @for 代码块中调用方法。

OnPush 与不可变列表

将 OnPush 与每次变化都创建新的数组引用结合使用。配合正确的 track 后，Angular 只会更新实际发生变化的行。

this.items.update(list => [...list, newItem]);

虚拟滚动

对于超大型列表，请使用 CDK 的 cdk-virtual-scroll-viewport 只渲染可见行，无论数据量多大，都能保持较小的 DOM。

<cdk-virtual-scroll-viewport itemSize="48">
  <div *cdkVirtualFor="let item of items">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

快速检查

检验您对列表优化的理解。

回顾

您学会了使用稳定键、@empty 代码块、结合 OnPush 的不可变更新，以及适用于超大型集合的虚拟滚动，通过 @for ... track（或传统的 trackBy）优化列表。

常见问题解答

「优化列表与渲染」课时是免费的吗？

是的 — 「优化列表与渲染」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「优化列表与渲染」这节课中我会学到什么？

使用跟踪功能加快大型列表的处理速度你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「优化列表与渲染」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy