Blazor中向数组增量添加元素且不重渲染整个数组的正确方式是什么

默认渲染行为 #

你现在写的这段无特殊标识的foreach循环渲染代码，在给stuffs新增元素时，Blazor默认会重新渲染列表里的所有元素，哪怕原有元素的内容没有任何变更。
这是因为Blazor默认用索引来匹配循环输出的元素，列表长度变化后索引对应关系发生改变，diff算法会判定所有元素都需要更新。

增量渲染实现方法 #

Blazor内置了@key指令专门解决这个场景的问题，给循环渲染的每个元素绑定唯一的@key值后，Blazor会基于key值做差异比对，只会处理发生变更的部分：原有key对应的元素如果没有改动就不会被重绘，仅新增的key对应的元素会被渲染。
优化后的代码参考：

List<string> stuffs = Recieve_Stuffs();
foreach(var stuff in stuffs)
{
  <span @key="stuff">@stuff</span>
}

注意：@key的值必须是全局唯一的，如果你列表里的字符串可能重复，可以给元素加唯一标识字段来作为@key的取值。

内容的提问来源于stack exchange，提问作者Admiral Genesis