Blazor 渲染列表数据很简单，核心是用
@foreach遍历集合，配合组件生命周期和状态更新机制即可实时响应变化。
用 @foreach 直接渲染基础列表
这是最常用的方式。只要在 Razor 组件中定义一个可枚举的字段（比如
List<string></string>或
IEnumerable<product></product>），就能直接遍历输出： 确保数据字段是组件的 public 或 protected 成员，且在
OnInitialized或
OnParametersSet中初始化 在标记中写
@foreach (var item in items) { <div>@item.Name</div> }
Blazor 会自动为每个元素生成 DOM 节点，但注意：没有 key 属性时，列表更新可能触发整块重绘
用 @key 提升列表更新效率
当列表项可能增删改时，加上
@key告诉 Blazor “哪个元素对应哪个数据”，避免不必要的 DOM 重建： 在循环内包裹的标签上加
@key="item.Id"（推荐用唯一、稳定、非 null 的值，如数据库 ID） 例如：
@foreach (var user in users) { <usercard user="user"></usercard> }
不加 @key 时，插入第一个元素可能导致所有后续组件被销毁重建；加了之后 Blazor 只移动或复用对应 key 的组件实例
响应式更新：让列表动起来
Blazor 不会自动监听集合变化（比如
List.Add()），需要手动通知 UI 更新： 调用
StateHasChanged()强制重新渲染（适合简单场景） 更推荐用
ObservableCollection<t></t>—— 它自带 INotifyCollectionChanged，Blazor 会自动响应增删改 如果用 EF Core 或 API 获取数据，记得在
await后赋值并调用
StateHasChanged()，否则可能因异步时机问题不刷新
带条件/空状态的列表渲染
实际项目中常要处理空列表、加载中、错误等状态：
用@if (items == null)显示加载中，
@else if (!items.Any())显示“暂无数据” 避免直接在
@foreach外层套
@if再进循环，而是先判断再统一渲染，逻辑更清晰 可以封装成
<listdisplay items="@users"><itemtemplate>...</itemtemplate></listdisplay>提高复用性（需自定义组件）
基本上就这些。关键不是语法多难，而是理解 Blazor 的渲染逻辑：数据变 → 通知刷新 → 比对 DOM → 差量更新。把 @key 和状态通知做对，列表就稳了。
