为何StateHasChanged()对子组件无效，修改Value却能触发重渲染？

一、为什么两段代码的重渲染效果不同？ #

1. 第一段代码触发全量重渲染的原因 #

你第一段代码重新创建了List<EventPageViewModel>集合，并且每个元素都是新的EventPageViewModel实例——哪怕是浅拷贝，实例的引用地址和原来的eventOn完全不同。

Blazor的组件渲染逻辑是：当父组件给子组件传递的参数（比如你的Value=）引用发生变化时，会判定子组件需要更新，自动触发子组件的重渲染。因为所有卡片的Value参数都换成了新引用，所以所有子组件都会跟着重渲染。

2. 第二段代码仅触发点击卡片重渲染的原因 #

第二段代码只是遍历现有EventData里的实例，调用RefreshUser修改实例内部的状态（比如关注状态），但EventData本身的引用没变化，每个modelOn的引用也没变。

调用StateHasChanged()确实会触发当前父组件的重渲染，但Blazor是差分渲染：父组件重渲染时会逐个检查子组件的参数，发现子组件的Value还是原来的引用，就会判定“参数没变化，不需要重渲染这个子组件”。

那为什么点击的卡片会重渲染？因为点击事件是在该子组件内部触发的，子组件自身的事件处理逻辑已经触发了它自己的StateHasChanged()，所以只有它会更新，其他卡片因为参数没变化、自身也没触发状态更新，就不会重渲染。

你之前的理解是对的：StateHasChanged()不会强制所有子组件无条件重渲染，它只是启动当前组件的渲染流程，最终子组件是否重渲染，要看参数或自身状态有没有变化。

二、除了创建新实例，还有哪些方法强制子组件重渲染？ #

1. 让ViewModel实现INotifyPropertyChanged #

给EventPageViewModel实现INotifyPropertyChanged接口，当内部属性（比如关注状态）变化时触发PropertyChanged事件。然后在子组件里订阅这个事件，收到事件后调用StateHasChanged()。这样只要ViewModel内部状态变了，子组件就能自动感知并更新，不需要改变ViewModel的引用。

示例代码（ViewModel部分）：

public class EventPageViewModel : INotifyPropertyChanged
{
    private bool _isFollowed;
    public bool IsFollowed
    {
        get => _isFollowed;
        set
        {
            if (_isFollowed != value)
            {
                _isFollowed = value;
                OnPropertyChanged(nameof(IsFollowed));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public void RefreshUser(User user)
    {
        IsFollowed = user.FollowedEvents.Contains(this.Id);
    }
}

子组件（.razor文件）：

@implements IDisposable

<div>
    <button @onclick="ToggleFollow">@(ViewModel.IsFollowed ? "已关注" : "关注")</button>
</div>

@code {
    [Parameter] public EventPageViewModel ViewModel { get; set; }
    [Inject] public User User { get; set; }

    protected override void OnInitialized()
    {
        ViewModel.PropertyChanged += ViewModel_PropertyChanged;
    }

    private void ViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        StateHasChanged();
    }

    private void ToggleFollow()
    {
        // 处理关注逻辑
        ViewModel.RefreshUser(User);
    }

    public void Dispose()
    {
        ViewModel.PropertyChanged -= ViewModel_PropertyChanged;
    }
}

2. 添加“触发重渲染”的参数 #

在父组件里维护一个用于触发重渲染的参数，比如int RenderTrigger，每次需要全量更新时，给RenderTrigger加1，然后把这个参数传递给所有子组件。因为参数值变化了，Blazor会判定子组件需要更新，触发重渲染。

父组件示例：

@foreach (var model in EventData)
{
    <EventCard ViewModel="model" RenderTrigger="@RenderTrigger" />
}

@code {
    private int RenderTrigger;
    private List<EventPageViewModel> EventData;
    [Inject] public User User { get; set; }

    private void RefreshAllCards()
    {
        foreach (var model in EventData)
        {
            model.RefreshUser(User);
        }
        RenderTrigger++; // 更新触发参数，自动触发父组件重渲染
    }
}

子组件接收参数：

[Parameter] public EventPageViewModel ViewModel { get; set; }
[Parameter] public int RenderTrigger { get; set; }

// 无需额外逻辑，RenderTrigger变化时子组件自动重渲染

3. 使用@key强制组件重建 #

给子组件加上@key参数，当key的值变化时，Blazor会销毁旧的子组件实例，创建新的实例，相当于强制重渲染。不过这个方法开销较大，适合不需要保留子组件状态的场景。

父组件示例：

@foreach (var model in EventData)
{
    <EventCard ViewModel="model" @key="@model.RenderKey" />
}

@code {
    private List<EventPageViewModel> EventData;
    [Inject] public User User { get; set; }

    private void RefreshAllCards()
    {
        foreach (var model in EventData)
        {
            model.RefreshUser(User);
            model.RenderKey = Guid.NewGuid(); // 更新key值
        }
        StateHasChanged();
    }
}

子组件：

[Parameter] public EventPageViewModel ViewModel { get; set; }

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