@foreach 渲染集合最直接但无键值跟踪,易致 UI 错误;应初始化为空集合而非 null,基础写法为 @foreach (var item in Items) { @item },需索引时用 @for。

Blazor 中用 @foreach 渲染集合是最直接的方式,但要注意它不自带键值跟踪,容易在集合更新时引发 UI 错误或状态丢失。
基础写法:安全渲染简单列表
确保集合非 null,避免运行时异常。推荐用空集合初始化,而不是 null。
- 在
@code块中定义:private ListItems = new(); - 模板中使用:
@foreach (var item in Items) {@item} - 若需索引,改用
@for (int i = 0; i ,更可控
避免重复渲染问题:用 @key 指定唯一标识
@foreach 默认按位置匹配 DOM 节点,添加/删除中间项会导致后续元素重用错误的组件实例(比如输入框失焦、状态错乱)。
- 给每个循环项加上
@key,指向稳定唯一的值(如 ID):@foreach (var user in Users) {} - 不要用
@key="user.Name"这类可能重复或变化的字段 - 若没有 ID,可用
@key="Guid.NewGuid()"(仅限一次性静态列表,不适用于可更新场景)
配合状态更新:别直接修改原集合引用
Blazor 组件靠引用变化触发重新渲染。直接调用 Items.Add() 不会自动刷新界面,除非显式调用 StateHasChanged() 或用新集合替换。
- 推荐方式:生成新集合并赋值,触发自动重渲染
Items = new List(Items) { "New Item" }; - 或手动通知:
Items.Add("New Item"); StateHasChanged(); - 对
IEnumerable类型,@foreach会在每次渲染时重新枚举,注意性能和副作用(如 LINQ 查询未缓存)
替代方案:考虑 @bind + InputSelect 或虚拟滚动
当集合很大(如上千项)或需要交互筛选时,@foreach 可能卡顿。
- 下拉选择用
更轻量 - 长列表建议用第三方库(如
Radzen.Blazor的Virtualize组件)或原生(.NET 6+) -
自动只渲染可视区域,大幅提升性能...
基本上就这些。@foreach 简单好用,关键在加 @key、换引用、避坑集合变更逻辑。









