Blazored LocalStorage+MudBlazor：初始化渲染延迟致状态切换可见问题

问题描述 #

开关状态存储在LocalStorage中，加载视图时会读取上次保存的状态，功能正常，但渲染过程中可见状态切换的过渡效果，期望视图仅在渲染完成后显示，消除该过渡。

组件代码如下：

Index.razor #

@page "/"

<MudToolBar>
    <MudSwitch T="bool" Checked="Show" CheckedChanged="HandleShowChanged" />
</MudToolBar>

@if (Show)
{
    <h1>Show something</h1>
}
else
{
    <h1>Nothing to show</h1>
}

Index.razor.cs #

public partial class Index
{
    private bool Show { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Show = await LocalStorage.GetItemAsync<bool>(nameof(Show));
    }

    private async Task HandleShowChanged(bool value)
    {
        Show = value;
        await LocalStorage.SetItemAsync(nameof(Show), value);
    }
}

通过生命周期日志可见，OnAfterRenderAsync在OnInitializedAsync完成前就已执行，导致先渲染默认的Show=false状态，异步读取完成后再更新为保存的状态，进而产生视觉过渡：

Start SetParametersAsync Show: False
Start OnInitializedAsync Show: False
Start OnAfterRenderAsync Show: False
End OnAfterRenderAsync Show: False
End OnInitializedAsync Show: True
Start OnParametersSetAsync Show: True
End OnParametersSetAsync Show: True
Start OnAfterRenderAsync Show: True
End OnAfterRenderAsync Show: True
End SetParametersAsync Show: True

解决方案 #

方法1：加载状态控制渲染 #

添加IsLoaded标志，在异步读取LocalStorage完成前，不渲染核心内容（或显示加载占位），读取完成后再渲染最终状态：

修改Index.razor.cs：

public partial class Index
{
    private bool Show { get; set; }
    private bool IsLoaded { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Show = await LocalStorage.GetItemAsync<bool>(nameof(Show));
        IsLoaded = true;
    }

    private async Task HandleShowChanged(bool value)
    {
        Show = value;
        await LocalStorage.SetItemAsync(nameof(Show), value);
    }
}

修改Index.razor：

@page "/"

<MudToolBar>
    <MudSwitch T="bool" Checked="Show" CheckedChanged="HandleShowChanged" Disabled="@(!IsLoaded)" />
</MudToolBar>

@if (IsLoaded)
{
    @if (Show)
    {
        <h1>Show something</h1>
    }
    else
    {
        <h1>Nothing to show</h1>
    }
}
else
{
    <p>加载中...</p>
}

方法2：同步初始化（LocalStorage支持同步操作时） #

若使用的LocalStorage封装支持同步读取，可直接在同步生命周期方法中获取状态，避免异步等待导致的二次渲染：

public partial class Index
{
    private bool Show { get; set; }

    protected override void OnInitialized()
    {
        Show = LocalStorage.GetItem<bool>(nameof(Show));
    }

    private async Task HandleShowChanged(bool value)
    {
        Show = value;
        await LocalStorage.SetItemAsync(nameof(Show), value);
    }
}

原理说明 #

Blazor异步生命周期方法（如OnInitializedAsync）会先执行同步逻辑并触发第一次渲染，待异步操作完成后再触发第二次渲染。通过加载标志控制渲染时机，可让组件在异步数据准备完成后再展示最终状态，彻底消除状态切换的视觉闪烁。

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