Blazor Wasm 每秒调用 SatehHasChanged。落后答案

【问题标题】：Blazor Wasm call SatehHasChanged every second. laggingBlazor Wasm 每秒调用 SatehHasChanged。落后
【发布时间】：2021-10-06 07:26:55
【问题描述】：

Parallel.Invoke(_po, async () => {
                while(!_viewModel.DisConnect)
                {
                    await _viewModel.SetThings();
                    await InvokeAsync(() => StateHasChanged());
                    Thread.Sleep(1000);
                }
            });

用户界面：

@foreach(var rsi in _viewModel.things)
    {
        <div class="row">
            <div class="col text-center">
                <span>Code: @things.Code</span>
            </div>
            <div class="col text-center">
                <span>value: @(Math.Truncate(things.Value * 10000) / 10000)</span>
            </div>
        </div>
    }

调用函数并每秒调用 sateHasChanged 以更新 UI。它落后了。当我将鼠标悬停时，它会在 1~2 秒后做出反应。

如何在不滞后 blazor wasm 的情况下每秒更新 UI 数据？

【问题讨论】：

不要那样做。只是不要。对于初学者来说，Parallel.Invoke 毫无用处。 Parallel 用于数据并行，但 Invoke 不会并行运行任何东西，它实际上只不过是 Task.Run(...).Wait()。其次，它调用的方法没有意义。如果使用数据绑定，StateHasChanged 将被自动调用。如果您使用 things 字段而不是嵌套属性，则没有问题。最后，代码冻结浏览器标签。每个选项卡只有一个线程，这就是 Blazor 到处使用 async 的原因
您可以使用Timer 并在其回调中加载新数据，而不是此代码，并将其存储在字段中。即使它不会冻结浏览器，这也不是一个好主意。轮询只是获取相同的数据，或者只是几个更改的行，对浏览器和服务器都是不利的。改用 SignalR 将更改从服务器推送到浏览器。您不会每 1 秒加载一次相同的数据，而只会获得新数据
作为对@PanagiotisKanavos 所说和他的回答的补充，Thread.Sleep(1000); 阻塞了 WASM 拥有的单个线程，因此延迟了。您应该始终使用await Task.Delay(n)。

标签： asp.net-core optimization blazor-webassembly

【解决方案1】：

代码自己阻塞。 Parallel.Invoke 用于以阻塞的方式并行执行多个操作，但问题的代码只有一个操作。这并不比Task.Run(..).Wait() 好。委托尝试使用InvokeAsync() 调用已阻塞的 UI 线程。然后将线程冻结 1 秒。

使用简单的循环和Task.Delay()会更简单更好：

while(!_viewModel.DisConnect)
{
    await _viewModel.SetThings();
    StateHasChanged();
    await Task.Delay(1000);
}

更好的是，使用计时器：

_timer = new System.Threading.Timer(async _ =>
        {
            await _viewModel.SetThings();
            StateHasChanged();
        },null, 0, 1000);

要停止计时器，请在需要时致电Dispose()：

_timer.Dispose();

【讨论】：