如何原子性更新Blazor组件两个参数避免重复渲染

开发接收SelectedPage、SelectedPageElement两个参数的Foo组件时，连续赋值触发两次重复渲染的问题，可通过以下三种方案实现两个参数同步更新、全部更新完成后仅触发一次重渲染： #

方案1：复合参数封装（无版本兼容问题，最推荐） #

两个强关联的参数不要分开传递，封装成单个模型参数传入，从数据结构层面保证状态更新的原子性，从根源避免中间状态触发的重渲染。

• 定义统一的状态模型

// 可选用record、class或者struct实现，优先用不可变record保证状态可追溯
public sealed record PageSelectionContext
{
    public Page? CurrentPage { get; init; }
    public ElementReference? CurrentPageElement { get; init; }
}

• 父组件用单个状态变量持有该模型

// 父组件字段初始化
private PageSelectionContext _pageContext = new();

• 调整组件传参方式

<!-- 父组件模板中替换原有双参数绑定 -->
<Foo SelectionContext="@_pageContext" />

同时修改Foo组件的参数定义：

// Foo组件代码段
[Parameter, EditorRequired]
public PageSelectionContext SelectionContext { get; set; } = default!;

• 更新状态时一次性替换整个状态对象

// 原有的双参数赋值替换为以下逻辑
_pageContext = _pageContext with
{
    CurrentPage = nextPage,
    CurrentPageElement = null
};
// 仅在非UI事件触发的场景（比如后台任务、定时器回调）下需要手动调用StateHasChanged
StateHasChanged();

这种方式完全不会出现单参数更新的中间状态，组件只会收到一次完整的参数变更，仅触发一次重渲染。 #

方案2：利用Blazor原生批量更新机制（.NET 5+ 适用） #

Blazor渲染器默认会对同步执行的UI事件回调、生命周期方法内的状态变更做批量合并，如果两次赋值触发了两次渲染，通常是两个赋值逻辑被异步操作拆分，或是在非UI同步上下文执行导致的，可按如下规则调整：

• 保证两个赋值操作在同一个同步代码块中完成，中间不要插入await调用、不要在赋值间隙手动调用StateHasChanged
• 如果是在定时器、后台线程等非UI触发的逻辑中执行更新，所有赋值完成后仅调用一次StateHasChanged即可

// 错误写法：会触发两次渲染
SelectedPage = nextPage;
await Task.Delay(10); // await会让出执行线程，渲染器会先渲染第一次参数变更
SelectedPageElement = null;

// 正确写法：同步完成所有赋值，仅触发一次渲染
SelectedPage = nextPage;
SelectedPageElement = null;
// 非UI上下文下仅在所有赋值完成后调用一次StateHasChanged
StateHasChanged();

方案3：组件内部做参数缓冲（无法修改参数结构时使用） #

如果不能调整Foo组件的参数定义，可以重写Foo组件的渲染判断逻辑，对传入的参数做缓冲校验，只有当两个参数都完成有效更新后才允许触发渲染：

// Foo组件内部代码
private Page? _lastRenderedPage;
private ElementReference? _lastRenderedElement;

protected override bool ShouldRender()
{
    // 检测参数和上次渲染结果是否存在差异
    bool pageChanged = _lastRenderedPage != SelectedPage;
    bool elementChanged = _lastRenderedElement != SelectedPageElement;
    
    if (!pageChanged && !elementChanged)
    {
        return false;
    }

    // 增加自定义校验：比如检测到处于批量更新中间状态时跳过渲染
    if (/* 自定义批量更新标记，更新前设为true，全部更新完成设为false */ false)
    {
        return false;
    }

    // 校验通过，记录本次渲染的参数值，允许渲染
    _lastRenderedPage = SelectedPage;
    _lastRenderedElement = SelectedPageElement;
    return true;
}

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