Blazor子组件参数修改与组件继承等技术问题咨询

现有代码结构 #

public partial class MyComponentBase<T> : ComponentBase
{
   [Parameter]
   public int SelectedId {get;set;}

   public T Data{get;set;}
}

public class Dto1
{
   public int Property1{get;set;}
   public string Property2{get;set;}
}

public class Dto2 : Dto1
{
   public string Property3{get;set;}
}

//razor.cs file
public partial class MyChildBaseComponent<T> : MyComponentBase<T> where T:Dto1
{
    @typeparam T

    <MudNumericField @bind-Value="Data.Property1"  Variant="Variant.Outlined"/>
    <MudTextField @bind-Value="Data.Property2"  Variant="Variant.Outlined"/>
}

//cs.file
public partial class MyChildBaseComponent<T> : MyComponentBase<T> where T:Dto1
{
   [Parameter]
   public Service<T> DbService{get;set;}
}

public partial class MyChildDerivedComponent : MyChildComponentBase<Dto2>
{
   //to get the base template
   @code{
     base.BuildRenderTree(__builder);
  }

  <MudTextField @bind-Value="Data.Property3"  Variant="Variant.Outlined"/>
}

//this is the .cs part
public partial class MyChildComponent : MyComponentBase<Dto1>
{
   protected override async Task OnInitializedAsync()
   {
      //initialize data from database
      Data= await DbService.GetData(SelectedId);
   }
}

//this is the parent component
public partial class MyParentComponent : ComponentBase
{
    @inject Service<Dto2> DbService


    <MyChildDerivedComponent @ref="myChild" SelectedId="SelectedId" DbService="DbService"/>
    <MudButton OnClick="SaveInDatabase" Variant="Variant.Filled" Color="Color.Primary">
       Save
    </MudButton>


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

      private async Task SaveInDatabase()
      {
          //I need to change some child's Data parameters properties
          Data.Property3="Test";
          //save in db, this is an example
          await DbService.Insert(Data);
      }
 }

问题解答 #

1. 获取基组件模板时，使用BuildRenderTree方法是否合适，还是采用RenderFragment或其他更优方式？ #

直接调用base.BuildRenderTree(__builder)不是Blazor推荐的实践，它会绕过组件正常的渲染生命周期，容易引发渲染不一致、状态不同步的问题。

更优的方案是使用组件组合+RenderFragment来复用基组件UI：

• 在基组件中定义RenderFragment类型的参数，预留可扩展的内容区域
• 派生组件通过填充这个RenderFragment来添加自定义UI

示例修改：

// MyChildBaseComponent.razor
@typeparam T where T : Dto1

<MudNumericField @bind-Value="Data.Property1" Variant="Variant.Outlined"/>
<MudTextField @bind-Value="Data.Property2" Variant="Variant.Outlined"/>
@ChildContent

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
}

派生组件使用方式：

// MyChildDerivedComponent.razor
@inherits MyChildComponentBase<Dto2>

<ChildContent>
    <MudTextField @bind-Value="Data.Property3" Variant="Variant.Outlined"/>
</ChildContent>

这种方式完全符合Blazor的渲染机制，保证了UI复用的同时维持了组件的独立性。

2. 当前子组件内部初始化Data的方式是否合理？是否需要在父组件中创建本地Data属性并传递给子组件？使用级联参数是否会产生同样的参数修改警告？除@ref外，父组件修改子组件属性还有哪些合规方式？ #

• 子组件内部初始化Data不合理：Blazor遵循单向数据流原则，组件的参数（包括继承来的Data）应由父组件控制，子组件直接修改参数会破坏状态的可预测性，导致组件渲染异常。
• 正确做法：父组件维护Data并通过双向绑定传递：父组件作为状态的拥有者，负责初始化和更新Data，子组件仅负责展示和通过回调通知父组件修改状态。

示例：

// MyParentComponent.razor
<MyChildDerivedComponent @bind-Data="localData" SelectedId="SelectedId" DbService="DbService"/>
<MudButton OnClick="SaveInDatabase" Variant="Variant.Filled" Color="Color.Primary">
   Save
</MudButton>

@code{
    [Parameter] public int SelectedId {get;set;}
    private Dto2 localData;

    protected override async Task OnInitializedAsync()
    {
        localData = await DbService.GetData(SelectedId);
    }

    private async Task SaveInDatabase()
    {
        localData.Property3 = "Test";
        await DbService.Insert(localData);
    }
}

基组件需要支持双向绑定：

// MyComponentBase.cs
[Parameter] public T Data { get; set; }
[Parameter] public EventCallback<T> DataChanged { get; set; }

• 级联参数的问题：级联参数本质也是父组件提供的状态，子组件直接修改同样会触发参数修改警告，同样违反单向数据流原则。
• 父组件修改子组件属性的合规方式：
  • 双向绑定：通过@bind-XXX让父组件控制核心状态，子组件通过回调触发更新
  • 回调方法：子组件暴露回调参数，父组件传入处理逻辑，子组件调用时触发父组件的状态修改
  • 状态容器：使用全局/局部状态容器共享状态，父子组件通过容器读写状态，避免直接操作组件实例

3. 当前的组件继承实现是否正确？ #

现有继承存在多处问题：

1. MyChildComponent继承了MyComponentBase<Dto1>，但没有复用MyChildBaseComponent的UI逻辑，可能是代码笔误（应继承MyChildBaseComponent<Dto1>）。
2. MyChildDerivedComponent直接调用base.BuildRenderTree(__builder)不符合Blazor渲染规范，如问题1所述。
3. 组件继承在Blazor中应谨慎使用：继承会提高组件耦合度，降低可维护性，优先选择组件组合的方式复用UI和逻辑。如果必须使用继承，要确保基组件的参数、方法设计清晰，派生组件仅做功能扩展，不修改基组件核心逻辑。

4. 无法理解直接通过@ref修改组件属性与双向绑定修改参数的区别，因当前使用引用类型参数未发现副作用，是否存在认知误区？ #

核心区别

1. 数据流与控制权：
   • 双向绑定遵循单向数据流，父组件是状态的唯一拥有者，子组件通过回调通知父组件更新，组件渲染会自动同步，状态变化可预测。
   • @ref直接修改子组件内部属性，绕过了Blazor的参数更新机制，破坏了数据流的单向性，子组件状态脱离父组件控制。
2. 生命周期触发：
   • 双向绑定更新时，子组件会触发OnParametersSetAsync等生命周期方法，能正确处理状态变化。
   • 直接修改@ref属性不会触发任何生命周期方法，可能导致UI不更新或状态不一致。

认知误区

虽然引用类型修改内部属性不会触发参数警告（因为参数是引用本身，未改变引用地址），但这种做法依然存在风险：

• 子组件可能依赖Data的初始化逻辑，父组件直接修改属性会导致子组件状态与预期不符。
• 当父组件重新渲染时，子组件的Data可能被父组件的参数覆盖，导致父组件的修改丢失。
• 违反组件封装性：子组件的内部状态应由自身控制，或通过明确的接口（如回调、双向绑定）与父组件交互。

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