如何避免Blazor中嵌套Tab组件的重复渲染与重新初始化

我在Blazor中实现了自定义Tabs组件，现在需要解决标签切换时的重复渲染问题——要求切换标签时，标签页内的组件不会重新初始化（即不调用Dispose和OnInitialized方法）。

现有组件代码 #

TabPage.razor.cs #

partial class TabPage
{
    [CascadingParameter]
    public Tabs Tabs { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

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

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

    [Parameter]
    public bool Enabled { get; set; } = true;

    protected override void OnInitialized()
    {
        if(Tabs is null)
        {
            throw new ArgumentNullException(nameof(Tabs), "TabPage必须嵌套在Tabs组件内");
        }

        base.OnInitialized();
        if (!Tabs.Tabs.Any())
            Tabs.ActiveTab = this;
        Tabs.AddPage(this);
    }
}

TabPage.razor #

@if(Tabs.ActiveTab == this)
{
    @ChildContent
}

Tabs.razor.cs #

partial class Tabs
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public EventCallback<TabPage> OnTabChanged { get; set; }

    public TabPage ActiveTab { get; set; }

    public List<TabPage> Tabs = new List<TabPage>();

    internal void AddPage(TabPage tabPage)
    {
        Tabs.Add(tabPage);
        if(Tabs.Count() == 1)
        {
            ActiveTab = tabPage;
        }
        StateHasChanged();
    }

    private async Task activateTabAsync(TabPage tab) 
    { 
        if(tab.Enabled)
        {
            ActiveTab = tab;
            await OnTabChanged.InvokeAsync(tab);
        }
    }

    private string setStyleTab(TabPage tab)
    {
        if (ActiveTab.Value == tab.Value)
            return "show active";
        else
            return "";
    }
}

Tabs.razor #

<CascadingValue Value="this">
    <ul class="nav nav-tabs">
        @foreach(TabPage tab in Tabs)
        {
            <li class="nav-item">
                <button class="nav-link @setStyleTab(tab)" @onclick=@(async() => await activateTabAsync(tab))>
                    @tab.Text
                </button>
            </li>
        }
    </ul>
    <div class="tab-content">
        <div class="tab-pane show active">
            @ChildContent
        </div>
    </div>
</CascadingValue>

原使用示例 #

<Tabs OnTabChanged="@OnSelectedTabChanged">
   <TabPage Text="存储详情1" Value="details1">
      // 内容1
   </TabPage>
   <TabPage Text="存储详情2" Value="details2">
      // 内容2
   </TabPage>
</Tabs>

@code {
   protected override async Task OnInitializedAsync()
   {
      await base.OnInitializedAsync();
   }   
   private Task OnSelectedTabChanged(TabPage selectedTab)
   {
      SelectedTab = selectedTab.Value;
      return Task.CompletedTask;
   }
}

尝试过的修改方案（未解决问题） #

我尝试用RenderFragment缓存内容，但关联_storageDetailsContent2的StorageDetailsTable组件依然会调用Dispose和OnInitialized方法：

@implements IDisposable

<Tabs OnTabChanged="@OnSelectedTabChanged">
   <TabPage Text="存储详情1" Value="details1">
      // 内容1
   </TabPage>
   <TabPage Text="存储详情2" Value="details2">
      @_storageDetailsContent2
   </TabPage>
</Tabs>

@code {
   private RenderFragment? _storageDetailsContent2 = null;
   protected override async Task OnInitializedAsync()
   {
      await base.OnInitializedAsync();
   }   
   private Task OnSelectedTabChanged(TabPage selectedTab)
   {
      SelectedTab = selectedTab.Value;

      if (SelectedTab == "details2" && _storageDetailsContent2 == null)
            _storageDetailsContent2 = StorageDetailsFragment ;

      return Task.CompletedTask;
   }
   public void Dispose()
   {
       _storageDetailsContent2 = null;
   }

   protected RenderFragment StorageDetailsFragment => (RenderTreeBuilder builder) =>
   {
      builder.OpenComponent<StorageDetailsTable>(0);
      builder.CloseComponent();
   };
}

解决方案 #

问题核心是非活跃标签页的ChildContent被完全从DOM移除，导致组件销毁；切换时又重新渲染初始化。解决思路是保留所有标签页的DOM元素，仅通过CSS控制显示/隐藏，而非条件渲染。

修改TabPage.razor #

将条件渲染改为CSS控制显示状态：

<div class="@GetTabPaneClass()">
    @ChildContent
</div>

@code {
    private string GetTabPaneClass()
    {
        return Tabs.ActiveTab == this ? "tab-pane show active" : "tab-pane";
    }
}

修改Tabs.razor #

移除硬编码的tab-pane容器，直接渲染所有TabPage内容：

<CascadingValue Value="this">
    <ul class="nav nav-tabs">
        @foreach(TabPage tab in Tabs)
        {
            <li class="nav-item">
                <button class="nav-link @setStyleTab(tab)" @onclick=@(async() => await activateTabAsync(tab))>
                    @tab.Text
                </button>
            </li>
        }
    </ul>
    <div class="tab-content">
        @ChildContent
    </div>
</CascadingValue>

关键说明 #

• 所有TabPage内容会常驻DOM，仅通过tab-pane类的show active控制显示/隐藏，组件不会被销毁，因此不会触发Dispose和重新初始化OnInitialized。
• 若担心初始加载性能，可结合延迟加载：首次切换到标签页时再填充内容，但需保持DOM占位元素存在，避免组件销毁。

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