Blazor 服务器端 - 使用 StateHasChanged 循环进行实时更新

Question

目前，我在 Blazor 服务器页面上使用无限循环（有延迟）来更新我的 UI。

<div>
    @for (int i = 0; i < GlobalData.Length; i++)
    {
        @GlobalData[i]
    }
<div>

@code {

    public CancellationTokenSource CancellationTokenSource { get; set; }

    protected override void OnInitialized()
    {
        CancellationTokenSource = new CancellationTokenSource();
        RealTimeUpdate(CancellationTokenSource.Token);
    }

    public async Task RealTimeUpdate(CancellationToken cancellationToken)
    {
        while(!cancellationToken.IsCancellationRequested)
        {
            await Task.Delay(TimeSpan.FromMilliseconds(1000 / 60), cancellationToken);
            if(!cancellationToken.IsCancellationRequested)
            {
                InvokeAsync(() => this.StateHasChanged());
            }
        }
    }
}

所以确保在我的本地环境中使用单个会话可以正常工作。 但是在野外负载下这将如何执行？

Answer 1

StateHasChanged，无论是在服务器还是浏览器上，都会重新渲染当前组件/页面及其所有子组件（等）。

结果被渲染到内存中的虚拟 DOM，然后与之前渲染的虚拟 DOM 进行比较。 如果有任何更改，它将生成一个 html 增量供客户端呈现。

所以答案是，它可能会向浏览器发送很少的 html，但服务器将在内存中为每个用户每秒渲染 60 次页面。

这根本不会很好地扩展。 最好使用 Reactive 库将数据从源推送到 UI。 这样它只会在需要时呈现，并且您的 UI 会立即更新。

请参阅https://blazor-university.com/overview/blazor-hosting-models/

和https://blazor-university.com/components/render-trees/