Blazor 服务器端 - 使用 StateHasChanged 循环实时更新答案

【问题标题】：Blazor Server Side - real-time update with StateHasChanged LoopBlazor 服务器端 - 使用 StateHasChanged 循环实时更新
【发布时间】：2020-03-30 16:16:03
【问题描述】：

目前，我在 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());
            }
        }
    }
}

因此，请确保在我的本地环境中使用单个会话可以正常工作。但是这在野外负载下会如何表现呢？

【问题讨论】：

IMO 它对于 blazor 服务器应用程序来说看起来不错，因为它使用 SignalR
你应该使用ConfigureAwait(false)：await Task.Delay(TimeSpan.FromSeconds(1000 / 60), cancellationToken).ConfigureAwait(false);
你能解释一下你的代码的使用案例吗？这是一个游戏循环或类似的东西？我在 Flappy Blazor Bird 上使用它：github.com/ctrl-alt-d/FlappyBlazorBird/blob/master/src/…，但通过事件刷新每个用户 UI。
@aguafrommars 没有SynchronizationContext，所以ConfigureAwait(false) 不会有任何区别。
旁注：1000 / 60 是 16。你想要1000.0 / 60.0，或者至少是1000 / 60.0。也不需要1000毫秒，那只是一秒。我会把它写成const int fps = 60; TimeSpan.FromSeconds(1.0 / fps);

标签： c# blazor

【解决方案1】：

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

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

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

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

见https://blazor-university.com/overview/blazor-hosting-models/

还有https://blazor-university.com/components/render-trees/

【讨论】：

实际上看起来像是 Roland Pheasant 出色的 DynamicData 库的主要候选人，该库正是为此目的而构建的。