Blazor 表在更新值時閃爍

Question

我正在使用 blazor 並且我有一個簡單的機制來發送請求並獲得響應（每秒發送 1 個請求）。 該響應按事件映射到這樣一個簡單的 model：

public class ResponseIdentyfication
{
    public int ResponseNumber { get; set; }
    public List<Identyfication> Identyfication { get; set; }
}

public class Identyfication
{
    public int Slot { get; set; }
    public string Type { get; set; }
    public State State { get; set; }
}

那就是發送到 razor 模板，如下所示：

<table border="1">
    <thead>
        <tr>Status</tr>
    </thead>
    <tbody>
        @foreach (var responses in ResponseIdentyfication.Identyfication.ToArray())
        {
            <tr>
                <td>@responses.ResponseNumber </td>

                @foreach (var resp in @responses.Identyfication)
                {
                    <td class="resp-status-@resp.State">@resp.Type</td>
                }
            </tr>
        }
    </tbody>
</table>

好吧，它向我展示了我想要什么類型，並將其狀態設置為 css class。 問題是響應到達表在刷新數據時閃爍。

所以我的問題是如何消除這種閃爍效果，所以我將只更新發生變化的單元格。

Answer 1

您可以嘗試通過在foreach循環中添加@key屬性來提高渲染性能。

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#use-key-to-control-the-preservation-of-elements-and-components