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的delta供客户端渲染。

因此，答案是，它可能只向浏览器发送很少的html，但服务器将每秒为每个用户在内存中呈现60次页面。

这根本不会有好的规模。使用Reactive库将数据从源推送到UI会更好。这样，它只会在需要时渲染，并且UI会立即更新。

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

而且https://blazor-university.com/components/render-trees/