Blazor值经SynchronizationContext修改后不立即渲染的原因及优化方案

基础Counter组件代码 #

<p><button @onclick="IncrementCount">Increment counter</button></p>
<p>@_counterValue</p>

@code
{
    private int _counterValue = 0;

    private void IncrementCount()
    {
        _counterValue++;
    }
}

正常行为 #

• 用户点击按钮
• 变量_counterValue递增
• 页面实时更新显示新的变量值

异常行为 #

将IncrementCount修改为以下代码后出现渲染延迟：

private void IncrementCount()
{
    SynchronizationContext.Current!.Post(
        delegate
        {
            _counterValue++;
        }, 
        null);
}

现象：

• 首次点击按钮，变量变为1，但页面仍显示0
• 再次点击，变量变为2，页面显示1
• 以此类推，始终存在差一错误

临时修复 #

手动调用StateHasChanged()可恢复正常渲染：

private void IncrementCount()
{
    SynchronizationContext.Current!.Post(
        delegate
        {
            _counterValue++;
            StateHasChanged();
        }, 
        null);
}

但频繁调用StateHasChanged()会引发过度渲染，不适用于复杂业务场景。

实际场景背景 #

该问题源于实际业务需求：用户点击Blazor按钮后弹出WinForms窗体，关闭窗体后需要更新Blazor中的值，因此必须通过SynchronizationContext调度更新操作。尝试通过WinForms的Application.Idle事件处理队列也会出现相同的渲染延迟问题。

疑问解答 #

1. 为何直接修改变量与通过SynchronizationContext修改变量的渲染行为不同？ #

Blazor的自动渲染触发机制依赖于组件生命周期事件和同步上下文的绑定：

• 直接在@onclick回调中修改变量时，回调本身运行在Blazor的同步上下文内，Blazor会在回调执行完成后自动触发StateHasChanged()，检测状态变更并更新UI。
• 通过SynchronizationContext.Post()调度的委托，是在Blazor的自动渲染检测周期之外执行的。此时状态变更发生在Blazor的"自动更新触发点"之后，当前渲染周期不会捕获到这次变更，要等到下一次触发渲染（比如下一次点击按钮）时才会显示上一次的变更值，从而出现差一错误。

2. 是否存在无需调用StateHasChanged()即可实现正常渲染的方案？ #

可以通过以下两种方式实现：

• 使用InvokeAsync替代直接操作SynchronizationContext：Blazor组件提供的InvokeAsync()方法会自动将委托调度到正确的同步上下文，并且在委托执行完成后自动触发状态变更检测，无需手动调用StateHasChanged()。示例代码：

private void IncrementCount()
{
    InvokeAsync(() =>
    {
        _counterValue++;
    });
}

• 绑定到可观察对象：将_counterValue替换为实现INotifyPropertyChanged的可观察属性，Blazor会自动监听属性变更并触发渲染。示例：

private int _counterValue;
public int CounterValue
{
    get => _counterValue;
    set
    {
        if (_counterValue != value)
        {
            _counterValue = value;
            OnPropertyChanged();
        }
    }
}

public event PropertyChangedEventHandler? PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string? propertyName = null)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

然后在Razor视图中绑定到@CounterValue即可实现自动渲染。

内容的提问来源于stack exchange，提问作者Uwe Keim