Blazor WebAssembly - trackBy 等效项

Question

我正在为我的论文研究 Angular 和 Blazor 之间的性能比较。 我想基于这个开源框架来做： https : //github.com/krausest/js-framework-benchmark 。 为此，我需要在 Blazor 中编写自己的测试应用程序实现。 我做到了，但我有一个问题。 Angular 有 trackBy 关键字（下面的示例），它可以在模型更改时仅更改 DOM 中的一行集合。 如果没有这个关键字，每个模型更改都需要重建整个表（ https://angular.io/api/common/NgForOf#ngForTrackBy ）。 Blazor 中是否有任何等价物？

        <tr [class.danger]="item.id === selected" *ngFor="let item of data; trackBy: itemById">
            <td class="col-md-1">{{item.id}}</td>
            <td class="col-md-4">
                <a href="#" (click)="select(item, $event)">{{item.label}}</a>
            </td>
            <td class="col-md-1"><a href="#" (click)="delete(item, $event)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
            <td class="col-md-6"></td>
        </tr>

Answer 1

您正在寻找@key指令：

@foreach (var todos in todoLists) {
    <TodoListCard @key=@todos.Id Todos=@todos />
}

从文档：

当呈现元素或组件列表并且元素或组件随后发生变化时，Blazor 的差异算法必须决定可以保留哪些先前的元素或组件以及模型对象应如何映射到它们。 通常，此过程是自动的，可以忽略，但在某些情况下，您可能希望控制该过程。

映射过程可以通过@key 指令属性来控制。 @key 使差异算法根据键的值保证元素或组件的保留。