Blazor如何强制所有子组件刷新？含StateHasChanged()调用相关问题

一、父组件未修改参数时，强制子组件刷新 #

如果父组件没有更新子组件的绑定参数，但需要触发子组件重新渲染，可采用以下几种实用方案：

1. 给子组件添加显式刷新方法 #

在子组件中定义公开方法，内部调用StateHasChanged()，父组件通过@ref引用子组件实例后直接调用该方法：

子组件代码：

@code {
    public void ForceRefresh()
    {
        StateHasChanged();
    }
}

父组件调用：

<MyChildComponent @ref="_childRef" />
<button @onclick="() => _childRef?.ForceRefresh()">刷新子组件</button>

@code {
    private MyChildComponent? _childRef;
}

2. 使用依赖注入的状态容器 #

创建全局状态容器，子组件订阅状态变化事件，父组件触发事件时，所有订阅的子组件自动刷新，适合批量刷新多个子组件的场景：

状态容器代码：

public class RefreshService
{
    public event Action? OnRefreshRequested;
    public void RequestRefresh() => OnRefreshRequested?.Invoke();
}

注册服务（Program.cs）：

builder.Services.AddScoped<RefreshService>();

子组件订阅：

@inject RefreshService RefreshService
@implements IDisposable

@code {
    protected override void OnInitialized()
    {
        RefreshService.OnRefreshRequested += HandleRefresh;
    }

    private void HandleRefresh()
    {
        StateHasChanged();
    }

    public void Dispose()
    {
        RefreshService.OnRefreshRequested -= HandleRefresh;
    }
}

父组件触发刷新：

@inject RefreshService RefreshService

<button @onclick="() => RefreshService.RequestRefresh()">刷新所有子组件</button>

3. 动态修改子组件的Key参数 #

Blazor会根据Key值判断是否重新渲染，只要Key变化，即使其他参数不变，组件也会被销毁重建（等效于强制刷新）：

父组件代码：

<MyChildComponent Key="@_refreshKey" />
<button @onclick="() => _refreshKey++">刷新子组件</button>

@code {
    private int _refreshKey;
}

二、调用StateHasChanged()后让父组件及所有子组件刷新 #

默认情况下，StateHasChanged()只会触发当前组件及其子组件的重新渲染，若要确保所有层级子组件都刷新，可结合以下方式：

1. 手动遍历子组件触发StateHasChanged() #

父组件持有子组件引用集合，逐个调用它们的StateHasChanged()：

@foreach (var item in Items)
{
    <MyChildComponent @ref="_childRefs.Add" />
}
<button @onclick="RefreshAll">刷新所有组件</button>

@code {
    private List<MyChildComponent> _childRefs = new();
    private List<string> Items = new() { "Item1", "Item2", "Item3" };

    private void RefreshAll()
    {
        StateHasChanged(); // 刷新父组件
        foreach (var child in _childRefs)
        {
            child.StateHasChanged(); // 逐个刷新子组件
        }
    }
}

2. 结合状态容器实现全局刷新 #

复用上述RefreshService，让父组件也订阅刷新事件，调用RequestRefresh()时，父组件和所有子组件都会触发StateHasChanged()：

父组件订阅：

@inject RefreshService RefreshService
@implements IDisposable

@code {
    protected override void OnInitialized()
    {
        RefreshService.OnRefreshRequested += HandleRefresh;
    }

    private void HandleRefresh()
    {
        StateHasChanged();
    }

    public void Dispose()
    {
        RefreshService.OnRefreshRequested -= HandleRefresh;
    }
}

3. 禁用Blazor的渲染优化（不推荐） #

Blazor默认会跳过参数未变化的子组件渲染，若强制关闭该优化，可在子组件中重写ShouldRender()方法返回true：

@code {
    protected override bool ShouldRender()
    {
        return true; // 每次都渲染，即使参数未变
    }
}

注意：此方式会增加不必要的渲染开销，仅在特殊场景下使用。

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