Blazor调用StateHasChanged致子组件全量重渲染而非差异更新

问题原因 #

1. 级联值的变更检测逻辑：你的CurrentFormState是引用类型，Blazor对引用类型的级联值默认采用引用相等性检查。当你修改CurrentFormState.State属性时，对象引用并未改变，因此CascadingValue不会自动通知子组件更新，你不得不手动调用StateHasChanged()触发父组件渲染。
2. RenderFragment的执行特性：你通过@ChildContent(EditContext!)调用RenderFragment委托，每次父组件渲染时，这个委托都会被重新执行，生成全新的子组件实例树——这就是为什么子组件的OnAfterRenderAsync中firstRender会变为true，相当于子组件被完全销毁后重建，而非就地更新。
3. @key的无效性：给EditForm加@key无法解决问题，因为触发重建的根源是父组件渲染时重新执行了ChildContent委托，而非EditForm本身的实例变更。

解决办法 #

方案1：让FormStateContext实现INotifyPropertyChanged

让级联值的内部属性变更能被Blazor检测到，无需手动调用StateHasChanged()，避免父组件不必要的渲染：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class FormStateContext : INotifyPropertyChanged
{
    private FormState _state;
    public FormState State
    {
        get => _state;
        set
        {
            if (_state != value)
            {
                _state = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    private void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

修改SetState方法，移除手动触发渲染的代码：

private void SetState(FormState s)
{
    CurrentFormState.State = s;
    // 移除 StateHasChanged();
}

此时CascadingValue会监听FormStateContext的属性变更，自动通知子组件更新，父组件不会触发全量渲染，子组件也不会被重建。

方案2：每次更新时创建新的FormStateContext实例

通过改变级联值的引用，让CascadingValue自动触发更新，同时避免手动调用StateHasChanged()：

private FormStateContext CurrentFormState { get; set; } = new();

private void SetState(FormState s)
{
    // 创建新实例，改变引用
    CurrentFormState = new FormStateContext { State = s };
    // 无需手动调用StateHasChanged，Blazor会检测到属性变更自动渲染
}

这种方式下，CascadingValue的引用发生变化，会通知子组件更新，父组件的渲染只会触发CascadingValue相关的子组件更新，而非全量重建子树（因为ChildContent的执行仅在父组件初始渲染或EditContext变更时触发，这里EditContext没变化，所以子组件实例会保留）。

方案3：拆分级联值为值类型

如果FormState是枚举（值类型），可以直接将其作为级联值传递，而非包装在引用类型中：

<CascadingValue Value="@CurrentFormState" Name="FormState" >
    @ChildContent(EditContext!)
</CascadingValue>

private FormState CurrentFormState { get; set; } = FormState.Idle;

private void SetState(FormState s)
{
    CurrentFormState = s;
    // Blazor会检测到值类型属性变更，自动触发渲染，且仅更新依赖该级联值的子组件
}

值类型的变更会被Blazor自动检测，无需手动调用StateHasChanged()，也不会导致子树全量重建。

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