Игнорирует ли однопоточная эмуляция Blazor Server взаимодействие с JavaScript?

Сегодня я столкнулся с проблемой с компонентом, который оборачивает библиотеку JS, которая может повлиять на связанное значение компонента Blazor. Обновление значения параметра Mask приведет к многократному запуску кода JavaScript.

[Parameter]
public string Value { get; set; }

[Parameter]
public EventCallback<string> ValueChanged { get; set; }

[Parameter]
public Mask Mask { get; set; }

private Mask _mask;
private bool _maskNeedsUpdate;

protected override void OnParametersSet()
{
    // ... Handle other parameters.

    if (_mask != Mask)
    {
        _mask = Mask;
        _maskNeedsUpdate = true;
    }
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // ... initialize JS mask on first render.

    if (_maskNeedsUpdate)
    {
        var valueAfterUpdate = await Js.InvokeAsync<string>("updateMask", _mask);
        if (valueAfterUpdate != Value)
        {
            await ValueChanged.InvokeAsync(valueAfterUpdate);
        }

        _maskNeedsUpdate = false; // <-- This causes problems.
    }
}

Это почти как если бы этот вызов ValueChanged.InvokeAsync() запускал параллельную повторную отрисовку, что приводило к постановке в очередь второго вызова взаимодействия JS, поскольку флаг все еще стоит true. Но я сомневаюсь в этом, поскольку буквально в следующей строке для него установлено значение false (между тем, все, что EventCallback.InvokeAsync(), кажется, делает, это по сути вызывает StateHasChanged() в родительском компоненте и вызывает его обратный вызов).

Изменение кода для установки флага перед вызовом JS, похоже, устранило проблему.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // ... initialize JS mask on first render.

    if (_maskNeedsUpdate)
    {
        _maskNeedsUpdate = false; // <-- Toggle flag before awaiting JS.

        var valueAfterUpdate = await Js.InvokeAsync<string>("updateMask", _mask);
        if (valueAfterUpdate != Value)
        {
            await ValueChanged.InvokeAsync(valueAfterUpdate);
        }
    }
}

Однако это исправление меня смущает, потому что согласно документации:

Blazor использует контекст синхронизации (SynchronizationContext) для обеспечения единого логического потока выполнения. Методы жизненного цикла компонента и обратные вызовы событий, создаваемые Blazor, выполняются в контексте синхронизации.

Контекст синхронизации на стороне сервера Blazor пытается эмулировать однопоточную среду, чтобы максимально соответствовать модели WebAssembly в браузере, которая является однопоточной. Эта эмуляция ограничена только отдельной схемой, то есть две разные схемы могут работать параллельно. В любой момент времени внутри схемы работа выполняется ровно над одним потоком, что создает впечатление одного логического потока. Никакие две операции не выполняются одновременно в одной схеме.

Насколько я понимаю, однопоточная эмуляция не должна позволять моим компонентам Blazor «выполнять параллельный рендеринг», пока мой JavaScript все еще работает (и, если посмотреть на исходный код Blazor, в конечном итоге ожидается OnAfterRenderAsync()). Но тогда почему перемещение флага вверх до вызова взаимодействия JS решает мою проблему? Даже если родительский элемент выполняет повторный рендеринг, не помешает ли однопоточная эмуляция его параллельному повторному рендерингу?

Я хотел бы знать, следует ли мне следить за условиями гонки при разработке компонентов, которые вызывают взаимодействие JavaScript.

Приведенный выше пример был достаточно простым исправлением, но у меня есть другие компоненты, которые обертывают библиотеки JS, которые имеют гораздо более сложное поведение, где обе стороны C# и JS могут изменять связанные параметры, и «просто перемещение флага выше» не будет работать. для некоторых из них, если компонент может выполнять повторный рендеринг параллельно.