Blazor组件重新渲染问题：修改元素亮度后UI无更新

问题背景 #

开发元素周期表Web应用，需求是点击顶部元素族时，非该族元素降低亮度。调试发现Brightness属性已成功修改，但UI没有任何变化，需解决如何让PeriodicTableView.razor根据新的Brightness值重新渲染的问题。

现有实现代码 #

HeaderView.razor

[Parameter, EditorRequired] public List<ElementDataModel> ElementDataModels { get; set; } = default!;

public void OnFamilyClick(Family family)
{
    foreach(var elementDataModel in ElementDataModels)
    {
        elementDataModel.Brightness = elementDataModel.Family.Equals(family) ? 100 : 60;
    }
}

PeriodicTableView.razor

public List<ElementDataModel> ElementDataModels { get; set; } = new();

protected override void OnInitialized()
{
    foreach (var element in Element.All)
    {
        ElementDataModels.Add(new ElementDataModel(element));
    }
}

元素亮度绑定组件

<div style="filter: brightness(@($"{DataModel.Brightness}%"))">
@code{
    [Parameter, EditorRequired] public ElementDataModel DataModel { get; set; } = default!;
}

ElementDataModel类定义

public class ElementDataModel 
{
    public ElementDataModel(Element initialValue)
    {
        Brightness = 100;
        AtomicMass = initialValue.AtomicMass;
        Electronegativity = initialValue.Electronegativity;
        IonizationEnergy = initialValue.IonizationEnergy;
        Symbol = initialValue.Symbol;
        Name = initialValue.Name;
        ElectronConfiguration = initialValue.ElectronConfiguration;
        AtomicNumber = initialValue.AtomicNumber;
        OxidationStates = initialValue.OxidationStates;
        Family = initialValue.Family;
        Row = initialValue.Row;
        Column = initialValue.Column;
    }

    public int Brightness { get; set; }
    public double AtomicMass { get; }
    public double? Electronegativity { get; }
    public double? IonizationEnergy { get; }
    public string Symbol { get; }
    public string Name { get; }
    public ElectronConfiguration ElectronConfiguration { get; }
    public int AtomicNumber { get; }
    public List<int> OxidationStates { get; }
    public Family Family { get; }
    public int Row { get; }
    public int Column { get; }
}

问题原因 #

1. ElementDataModel未实现属性变更通知：Blazor无法自动感知普通类的属性变化，ElementDataModel没有实现INotifyPropertyChanged接口，导致Brightness更新后，绑定的UI组件收不到变更通知。
2. 未触发组件状态更新：HeaderView作为子组件修改父组件传递的列表对象属性后，没有触发组件状态更新逻辑，Blazor不会主动重新渲染组件。

解决方案 #

方案一：让ElementDataModel实现INotifyPropertyChanged #

给ElementDataModel添加属性变更通知逻辑，属性更新时主动通知UI组件：

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

public class ElementDataModel : INotifyPropertyChanged
{
    public ElementDataModel(Element initialValue)
    {
        Brightness = 100;
        AtomicMass = initialValue.AtomicMass;
        Electronegativity = initialValue.Electronegativity;
        IonizationEnergy = initialValue.IonizationEnergy;
        Symbol = initialValue.Symbol;
        Name = initialValue.Name;
        ElectronConfiguration = initialValue.ElectronConfiguration;
        AtomicNumber = initialValue.AtomicNumber;
        OxidationStates = initialValue.OxidationStates;
        Family = initialValue.Family;
        Row = initialValue.Row;
        Column = initialValue.Column;
    }

    private int _brightness;
    public int Brightness 
    { 
        get => _brightness; 
        set
        {
            if (_brightness != value)
            {
                _brightness = value;
                OnPropertyChanged();
            }
        }
    }

    public double AtomicMass { get; }
    public double? Electronegativity { get; }
    public double? IonizationEnergy { get; }
    public string Symbol { get; }
    public string Name { get; }
    public ElectronConfiguration ElectronConfiguration { get; }
    public int AtomicNumber { get; }
    public List<int> OxidationStates { get; }
    public Family Family { get; }
    public int Row { get; }
    public int Column { get; }

    public event PropertyChangedEventHandler? PropertyChanged;

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

方案二：手动触发组件状态更新 #

如果不想修改ElementDataModel，可以通过以下两种方式触发组件渲染：

方式A：在HeaderView中调用StateHasChanged()

修改HeaderView.razor的OnFamilyClick方法，直接通知当前组件重新渲染：

public void OnFamilyClick(Family family)
{
    foreach(var elementDataModel in ElementDataModels)
    {
        elementDataModel.Brightness = elementDataModel.Family.Equals(family) ? 100 : 60;
    }
    StateHasChanged(); // 触发组件重新渲染
}

方式B：通过回调通知父组件刷新

在HeaderView.razor中添加回调参数，让父组件处理渲染逻辑：

[Parameter, EditorRequired] public List<ElementDataModel> ElementDataModels { get; set; } = default!;
[Parameter] public Action? OnFamilyUpdated { get; set; }

public void OnFamilyClick(Family family)
{
    foreach(var elementDataModel in ElementDataModels)
    {
        elementDataModel.Brightness = elementDataModel.Family.Equals(family) ? 100 : 60;
    }
    OnFamilyUpdated?.Invoke(); // 通知父组件更新
}

在PeriodicTableView.razor中使用HeaderView时传入回调：

<HeaderView ElementDataModels="ElementDataModels" OnFamilyUpdated="StateHasChanged" />

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