.NET 8 Blazor服务端项目：跨客户端共享动态组件状态方案咨询

问题根源 #

你当前的实现核心问题在于：RenderFragment只是组件的渲染指令委托，并非已实例化的组件对象。每次客户端加载页面或Blazor触发重渲染时，都会执行RenderFragment中的代码创建全新的组件实例，导致组件内的_counter等状态被重新初始化。此外，要实现跨所有客户端的状态同步，状态不能存储在组件实例（每个客户端/渲染周期都可能重建），必须放在全局共享的容器中。

可行解决方案 #

核心思路是将插件状态与组件实例完全分离，使用全局单例的状态容器存储共享状态，让所有客户端的插件组件绑定到同一状态源，并通过状态变更通知实现跨客户端实时刷新。

步骤1：创建全局状态容器（单例） #

实现一个单例服务，统一管理所有插件的状态，并提供状态变更通知机制：

public class PluginStateContainer
{
    // 用字典存储不同插件的状态，key为插件唯一标识
    private readonly Dictionary<string, object> _pluginStates = new(StringComparer.OrdinalIgnoreCase);

    // 获取指定插件的状态
    public T GetState<T>(string pluginId)
    {
        _pluginStates.TryGetValue(pluginId, out var state);
        return state is T typedState ? typedState : default;
    }

    // 更新指定插件的状态并触发通知
    public void SetState(string pluginId, object state)
    {
        _pluginStates[pluginId] = state;
        StateChanged?.Invoke();
    }

    // 状态变更事件，用于通知所有客户端刷新UI
    public event Action StateChanged;
}

在Program.cs中注册为单例服务：

builder.Services.AddSingleton<PluginStateContainer>();

步骤2：修改插件组件，绑定全局状态 #

调整插件代码，让组件依赖全局状态容器，不再将状态存在组件实例中：

<p>
  Counter: @_counter
</p>

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

@code {
    // 注入全局状态容器
    [Inject]
    private PluginStateContainer StateContainer { get; set; } = null!;

    // 插件唯一标识，确保所有客户端的同类型插件绑定同一状态
    private readonly string _pluginId = "TestPluginCounter";

    // 通过状态容器读写共享状态
    private int _counter
    {
        get => StateContainer.GetState<int>(_pluginId);
        set => StateContainer.SetState(_pluginId, value);
    }

    private void btnIncrement()
    {
        _counter++;
    }
}

步骤3：调整动态加载逻辑 #

无需缓存组件实例，只需缓存组件类型和对应的唯一标识，RenderFragment仅负责渲染组件（依赖注入会自动注入单例状态容器）：

public void btnAddPlugin()
{
    string dllFile = @"PluginExampleComponent.dll";
    var assembly = Assembly.LoadFrom(dllFile);
    var types = assembly.GetTypes();

    foreach (var type in types)
    {
        if (typeof(IPluginTemplate).IsAssignableFrom(type))
        {
            // 生成RenderFragment，Blazor会自动处理依赖注入
            RenderFragment renderFragment = (builder) =>
            {
                builder.OpenComponent(0, type);
                builder.CloseComponent();
            };

            var pluginManagerItem = new PluginManagerItem()
            {
                RenderFragment = renderFragment,
                PluginId = "TestPluginCounter" // 关联到状态容器的唯一标识
            };

            _pluginManager.AddSkill(pluginManagerItem);
        }
    }
}

步骤4：在插件展示页订阅状态变更 #

确保页面能收到状态变更通知并自动刷新UI：

@page "/ViewPlugins"
@inject PluginStateContainer StateContainer
@implements IDisposable

<PageTitle>Plugins</PageTitle>

<div class="container">
    @foreach (var plugin in _pluginManager.Plugins)
    {
        @plugin.RenderFragment
    }
</div>

@code {
    protected override void OnInitialized()
    {
        // 订阅状态变更事件，触发UI刷新
        StateContainer.StateChanged += StateHasChanged;
    }

    public void Dispose()
    {
        // 取消订阅，避免内存泄漏
        StateContainer.StateChanged -= StateHasChanged;
    }
}

关键说明 #

1. 状态全局化：所有客户端的插件组件共享同一单例状态容器，修改状态时所有客户端都会同步更新。
2. 渲染与状态分离：RenderFragment仅负责描述组件的渲染方式，状态完全由全局容器管理，避免组件实例重建导致的状态丢失。
3. 实时同步：通过StateChanged事件触发所有客户端的UI刷新，确保状态变更即时同步。

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