Blazor非静态组件如何监听被JS修改的静态类静态字符串变更？

该方案完全规避了轮询的性能损耗和通知延迟，是当前场景下的最优选择，核心逻辑是在静态字符串更新时主动推送通知到订阅的组件。

具体实现步骤： #

1. 调整静态类结构，新增变更事件和安全的更新入口，禁止外部直接修改静态字符串字段：

public static class SharedData
{
    // 私有字段，禁止外部直接修改
    private static string _customString = string.Empty;
    // 静态变更事件，所有需要感知变更的组件均可订阅
    public static event Action<string>? OnStringChanged;

    // 供JS互操作调用的更新方法，加[JSInvokable]标记暴露给JS
    [JSInvokable]
    public static void UpdateString(string newValue)
    {
        // 只有值真实发生变化才触发事件，避免无效通知
        if (_customString != newValue)
        {
            _customString = newValue;
            OnStringChanged?.Invoke(newValue);
        }
    }

    // 公开只读属性，供外部读取当前值
    public static string CurrentString => _customString;
}

2. 修改JS侧的逻辑，原逻辑修改完字符串后，通过Blazor JS互操作调用上面的UpdateString方法更新C#侧的静态值，不要尝试直接修改C#内存中的静态变量：

// JS侧逻辑示例，修改完值后调用C#方法
const modifiedStr = "你修改后的字符串值";
DotNet.invokeMethodAsync('你的程序集名称', 'UpdateString', modifiedStr);

3. 在继承自ComponentBase的Blazor组件中订阅事件，收到变更后触发UI刷新：

public class YourComponent : ComponentBase, IDisposable
{
    protected override void OnInitialized()
    {
        base.OnInitialized();
        // 组件初始化时订阅变更事件
        SharedData.OnStringChanged += HandleStringChange;
    }

    private void HandleStringChange(string newValue)
    {
        // 这里可以写你处理新值的逻辑，完成后触发UI刷新
        InvokeAsync(StateHasChanged);
    }

    // 组件销毁时必须取消订阅，避免静态事件持有组件引用导致内存泄漏
    public void Dispose()
    {
        SharedData.OnStringChanged -= HandleStringChange;
    }
}

除了定时器轮询和上述最优方案外，还有以下可行方案可以根据你的实际场景选择：

• 单例状态服务方案：将原静态类改造为实现INotifyPropertyChanged接口的单例服务，注册到Blazor的DI容器中，组件中注入该服务后监听PropertyChanged事件即可感知变更。该方案相比静态类的可测试性更强，适合有单元测试需求的项目。
• 浏览器自定义事件方案：如果JS侧逻辑改动成本较高，无法调用C#互操作方法，可以在JS修改完值后抛出一个浏览器自定义事件，Blazor组件监听该DOM事件，收到事件后再读取静态字符串的值做后续处理。
• 级联参数方案：如果需要感知该值变更的组件都属于同一个父组件的子节点，可以将该字符串放到父组件中作为状态，用级联参数的方式向下传递，父组件值更新时所有子组件会自动收到新值并触发刷新，适合组件层级不深、使用范围集中的场景。

你原本想到的定时器轮询方案存在明显缺陷，生产环境不建议使用：

• 存在固定的通知延迟，实时性取决于定时器间隔，间隔太小会占用大量CPU资源，间隔太大实时性不足
• 会产生大量无效的轮询检测逻辑，造成不必要的性能损耗

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