Blazor中OnAfterRenderAsync未完成时重复调用的问题咨询

问题本质 #

Blazor 不会自动保证 OnAfterRenderAsync 的执行是串行的。当父组件短时间内频繁调用 StateHasChanged 时，新的渲染会触发新的 OnAfterRenderAsync 调用，而前一次的调用可能还在异步执行中，这就会导致像你代码里的 _jsModule 还未初始化完成就被后续调用访问，引发空引用异常。

直接修复方案 #

1. 线程安全的懒加载JS模块

使用 Lazy<Task<IJSObjectReference>> 确保JS模块只初始化一次，且所有调用都会等待初始化完成：

private readonly Lazy<Task<IJSObjectReference>> _lazyJsModule;

public YourComponent()
{
    _lazyJsModule = new Lazy<Task<IJSObjectReference>>(() => 
        JsRuntime.LoadJSModule(this));
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var jsModule = await _lazyJsModule.Value;

    if (firstRender)
    {
        await jsModule.InvokeVoidAsync("doLogic");
    }

    await jsModule.InvokeVoidAsync("doSomethingElse");
}

// 组件销毁时释放JS模块
public async ValueTask DisposeAsync()
{
    if (_lazyJsModule.IsValueCreated)
    {
        var jsModule = await _lazyJsModule.Value;
        await jsModule.DisposeAsync();
    }
}

2. 同步OnAfterRenderAsync执行（通用基类）

如果需要确保整个 OnAfterRenderAsync 逻辑串行执行，可以封装一个基类，用信号量处理同步：

public abstract class SyncOnAfterRenderComponent : ComponentBase, IAsyncDisposable
{
    private readonly SemaphoreSlim _semaphore = new SemaphoreSlim(1, 1);

    protected sealed override async Task OnAfterRenderAsync(bool firstRender)
    {
        await _semaphore.WaitAsync();
        try
        {
            await OnAfterRenderAsyncSync(firstRender);
        }
        finally
        {
            _semaphore.Release();
        }
    }

    // 子类实现这个方法代替原OnAfterRenderAsync
    protected abstract Task OnAfterRenderAsyncSync(bool firstRender);

    public async ValueTask DisposeAsync()
    {
        _semaphore.Dispose();
        await DisposeAsyncCore();
    }

    protected virtual ValueTask DisposeAsyncCore() => ValueTask.CompletedTask;
}

你的组件只需继承这个基类，实现 OnAfterRenderAsyncSync 即可，无需重复处理同步逻辑。

根源优化：减少StateHasChanged调用频率 #

短时间内频繁调用 StateHasChanged 是触发问题的诱因，可以通过**防抖（Debounce）**合并渲染请求：

private Timer _debounceTimer;

public void TriggerStateUpdate()
{
    _debounceTimer?.Dispose();
    // 延迟50ms执行StateHasChanged，合并短时间内的多次触发
    _debounceTimer = new Timer(_ =>
    {
        InvokeAsync(StateHasChanged);
        _debounceTimer.Dispose();
    }, null, 50, Timeout.Infinite);
}

这样可以避免不必要的频繁渲染，从根源上降低并发调用的概率。

总结 #

Blazor 设计上允许 OnAfterRenderAsync 并发执行，因此这类场景需要开发者自行处理同步逻辑。通用解决方案可以从三个维度入手：确保依赖资源的线程安全初始化、同步异步生命周期方法的执行、优化渲染触发频率。

内容的提问来源于stack exchange，提问作者Jakub Vojtašák