Blazor中如何触发刷新或数据获取逻辑？寻求更优方案

针对组件复用场景下（比如路由参数id变化时）的数据加载逻辑与渲染周期强绑定的问题，这里有几种更简洁的解决方案：

1. 重写SetParametersAsync精准监听参数变化 #

直接在参数更新的入口做新旧值对比，无需维护额外状态变量：

@page "/data/{id:int}"

<h1>Data of @Id</h1>
<p>Data: @_data</p>
<p><NavLink href="@($"data/{Id+1}")">Next</NavLink></p>

@code {
    [Parameter]
    public int Id { get; set; }

    private string _data = "";

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        var oldId = Id;
        await base.SetParametersAsync(parameters);
        
        if (Id != oldId)
        {
            _data = await LoadAndSetData(Id);
        }
    }

    private async Task<string> LoadAndSetData(int id)
    {
        await Task.Delay(2000);
        return $"Demo data for ID {id}";
    }
}

这种方式直接在参数更新的源头判断变化，逻辑清晰，适用于所有类型的组件。

2. 订阅路由参数变化（页面组件专属） #

对于路由驱动的页面组件，可以直接监听导航变化事件，完全脱离组件渲染周期：

@page "/data/{id:int}"
@inject NavigationManager NavigationManager
@implements IDisposable

<h1>Data of @_currentId</h1>
<p>Data: @_data</p>
<p><NavLink href="@($"data/{_currentId+1}")">Next</NavLink></p>

@code {
    private int _currentId;
    private string _data = "";
    private IDisposable? _navigationSubscription;

    protected override void OnInitialized()
    {
        _currentId = GetCurrentRouteId();
        _navigationSubscription = NavigationManager.LocationChanged += OnLocationChanged;
    }

    private async void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        var newId = GetCurrentRouteId();
        if (newId != _currentId)
        {
            _currentId = newId;
            _data = await LoadAndSetData(_currentId);
            StateHasChanged();
        }
    }

    private int GetCurrentRouteId()
    {
        var uri = new Uri(NavigationManager.Uri);
        var segments = uri.AbsolutePath.Split('/');
        return segments.Length >= 3 && int.TryParse(segments[2], out var id) ? id : 0;
    }

    private async Task<string> LoadAndSetData(int id)
    {
        await Task.Delay(2000);
        return $"Demo data for ID {id}";
    }

    public void Dispose()
    {
        _navigationSubscription?.Dispose();
    }
}

这种方式把数据加载逻辑完全从渲染周期中剥离，只在路由参数实际变化时执行，适合对逻辑解耦要求较高的场景。

3. .NET 7+ 简化参数变更处理 #

从.NET 7开始，你可以利用更便捷的方式封装参数变更判断，让OnParametersSetAsync逻辑更简洁：

@page "/data/{id:int}"

<h1>Data of @Id</h1>
<p>Data: @_data</p>
<p><NavLink href="@($"data/{Id+1}")">Next</NavLink></p>

@code {
    [Parameter]
    public int Id { get; set; }

    private string _data = "";
    private int _lastLoadedId;

    protected override async Task OnParametersSetAsync()
    {
        if (Id != _lastLoadedId)
        {
            _data = await LoadAndSetData(Id);
            _lastLoadedId = Id;
        }
    }

    private async Task<string> LoadAndSetData(int id)
    {
        await Task.Delay(2000);
        return $"Demo data for ID {id}";
    }
}

这个写法保留了原有的生命周期方法，但通过极简的状态对比，避免了无意义的重复数据加载，同时代码可读性更高。

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