Blazor运行时动态加载组件并保持组件状态的问题

核心问题原因 #

1. 手动创建的组件实例未被Blazor框架接管：你手动new Test1()创建的组件对象，并没有被Blazor的渲染系统管理。@<Test1 @ref=b />这种语法会让Blazor在渲染时重新创建一个新的组件实例，然后把这个新实例赋值给b变量，而非你之前手动创建的那个。这就是为什么ManualSet始终为0、状态无法保留的根本原因。
2. RenderFragment的渲染特性：每次切换activeIndex渲染不同的RenderFragment时，Blazor会重新执行该RenderFragment的渲染逻辑，若没有正确保留组件实例，就会重复创建新实例，导致count重置。

解决方案 #

要实现编译时未知组件的标签页状态保留，需要让Blazor框架正确复用组件实例，而非每次渲染都创建新实例。以下是可行的实现方式：

方案1：使用RenderTreeBuilder手动构建组件并绑定实例 #

通过RenderTreeBuilder创建RenderFragment时，直接关联预先配置好的组件实例，让Blazor复用该实例：

// 替换原有的getRandom方法和新增构建方法
RenderFragment CreateComponentFragment(IComponent component)
{
    return builder =>
    {
        builder.OpenComponent(0, component.GetType());
        builder.AddComponentReferenceCapture(1, inst => 
        {
            // 更新列表中的组件引用为框架创建的实例
            var index = comps.FindIndex(c => c == component);
            if (index != -1) comps[index] = inst;
        });
        builder.CloseComponent();
    };
}

(IComponent, RenderFragment) getRandom(int randomCount)
{
    IComponent component;
    switch (rnd.Next(0, 3))
    {
        case 0:
            component = new Test1 { ManualSet = randomCount };
            break;
        case 1:
            component = new Test2 { ManualSet = randomCount };
            break;
        case 2:
            component = new Test3 { ManualSet = randomCount };
            break;
        default:
            throw new Exception("Invalid component type");
    }
    var fragment = CreateComponentFragment(component);
    return (component, fragment);
}

方案2：使用通用组件容器管理实例与状态 #

创建一个通用容器组件，负责管理组件实例的生命周期和状态传递，确保实例唯一且可复用：

1. 创建ComponentContainer.razor：

@typeparam TComponent where TComponent : IComponent, new()

@if (_componentInstance != null)
{
    @ComponentRenderFragment
}

@code {
    private TComponent _componentInstance = new();
    private RenderFragment ComponentRenderFragment => builder =>
    {
        builder.OpenComponent<TComponent>(0);
        builder.AddAttribute(1, nameof(Test1.ManualSet), ManualSet);
        builder.AddComponentReferenceCapture(2, inst => _componentInstance = (TComponent)inst);
        builder.CloseComponent();
    };

    [Parameter]
    public int ManualSet { get; set; }

    // 提供外部获取组件实例的方法
    public TComponent GetComponentInstance() => _componentInstance;
}

2. 修改index.razor逻辑：

@page "/"
<PageTitle>Index</PageTitle>

<p role="status">Current count: @activeIndex</p>

<p><button class="btn btn-primary" @onclick="ChangeIndex">Click me</button></p>

<div>
    @frags[activeIndex]
</div>

@code {
    int activeIndex = 0;
    List<RenderFragment> frags = new();
    List<IComponent> comps = new();

    void ChangeIndex()
    {
        activeIndex = activeIndex < frags.Count - 1 ? activeIndex + 1 : 0;
    }

    Random rnd = new();

    RenderFragment CreateContainerFragment(int manualSet)
    {
        Type componentType = rnd.Next(0,3) switch
        {
            0 => typeof(Test1),
            1 => typeof(Test2),
            _ => typeof(Test3)
        };
        // 创建泛型容器的RenderFragment
        return builder =>
        {
            var containerType = typeof(ComponentContainer<>).MakeGenericType(componentType);
            builder.OpenComponent(0, containerType);
            builder.AddAttribute(1, nameof(ComponentContainer<Test1>.ManualSet), manualSet);
            builder.AddComponentReferenceCapture(2, inst =>
            {
                // 获取容器内的组件实例并保存
                var getInstanceMethod = containerType.GetMethod(nameof(ComponentContainer<Test1>.GetComponentInstance));
                var component = getInstanceMethod?.Invoke(inst, null);
                if (component != null) comps.Add((IComponent)component);
            });
            builder.CloseComponent();
        };
    }

    protected override void OnInitialized()
    {
        for(int i = 0;i < 10; i++)
        {
            frags.Add(CreateContainerFragment(i));
        }
    }
}

关键要点 #

• 组件实例由Blazor框架管理：永远不要手动new组件后直接期望Blazor复用它，必须通过RenderTreeBuilder或组件容器让框架创建并追踪实例。
• 状态保留的核心：确保每个标签对应的组件实例只被创建一次，切换标签时Blazor能找到并复用该实例，而非重新初始化。
• @ref的正确用法：@ref是在组件渲染完成后由Blazor赋值的，用于获取框架创建的实例，而非绑定你手动创建的对象。

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