24、Blazor渲染控制与测试全解析

Blazor渲染控制与测试全解析

1. 使用 @key 指令控制渲染

在渲染集合时，通常会遍历集合中的每个项目并渲染相应的 UI 元素。Blazor 的 RenderTree 及其差异化算法会观察列表的变化（插入、更新和删除），并相应地更新 UI。在运行时，Blazor 会根据列表中的项目为 UI 中渲染的每个项目分配并索引一个序列号，这是大多数情况下的常规做法。

为了模拟这个场景，我们可以创建一个示例组件：
1. 在 Pages 文件夹中，创建一个名为 key-directive-sample.razor 的 Razor 组件。
2. 在其中编写以下代码：

@page "/key-directive-sample"
<h3>Key Attribute Sample</h3>
<ul>
    @foreach (var item in numbers)
    {
        <li>@item</li>
    }
</ul>
<button @onclick="Insert">Sort</button>
@code {
    private int counter = 4;
    private List<int> numbers = new List<int>
    {
        0, 1, 2, 3
    };
    private void Insert()
    {
        num