AntDesign Blazor 表格组件 OnChange 事件触发机制解析

问题现象

在使用 AntDesign Blazor 的 Table 组件时，开发者发现 OnChange 事件在页面刷新时会触发两次，而在正常点击操作时只触发一次。这导致在使用 DbContext 进行数据库查询时出现并发操作错误。

根本原因分析

经过深入排查，发现这个问题与 Blazor 的预渲染(Prerendering)机制密切相关。当使用 ServerPrerendered 渲染模式时：

1. 服务器端会先执行一次预渲染，此时 Table 组件的 OnChange 事件会被触发第一次
2. 客户端 Blazor 实例启动后，会再次执行一次渲染，触发第二次 OnChange 事件

这种双重触发机制是 Blazor 预渲染特性的设计行为，目的是为了：

• 提高首屏加载速度
• 改善 SEO 效果
• 提供更好的用户体验

解决方案

针对这个问题，开发者可以选择以下几种解决方案：

方案一：禁用预渲染

将渲染模式从 ServerPrerendered 改为 Server：

<component type="typeof(App)" render-mode="Server" />

这种方案简单直接，但会失去预渲染带来的好处。

方案二：优化数据加载逻辑

在 OnChange 事件处理中增加判断逻辑，避免重复加载：

private bool _isFirstLoad = true;

async Task OnChange(QueryModel<PositionDto> query)
{
    if(_isFirstLoad)
    {
        _isFirstLoad = false;
        return;
    }
    // 正常的数据加载逻辑
}

方案三：使用状态管理

利用 Blazor 的状态管理机制，在预渲染阶段和客户端阶段共享相同的数据，避免重复查询。

最佳实践建议

1. 如果应用不需要 SEO 优化，建议直接使用 Server 渲染模式
2. 对于需要预渲染的场景，应该在数据访问层做好并发控制
3. 考虑使用 DbContext 工厂模式来创建独立的上下文实例
4. 在关键操作中加入日志记录，便于问题排查

技术深度解析

Blazor 的预渲染机制实际上会经历以下阶段：

1. 静态 HTML 生成阶段（触发第一次 OnChange）
2. 交互式组件初始化阶段（触发第二次 OnChange）
3. 状态同步阶段

理解这一机制对于开发复杂的 Blazor 应用至关重要，特别是在处理数据敏感型组件时。AntDesign Blazor 的 Table 组件作为数据驱动的核心组件，其行为与 Blazor 的渲染生命周期紧密相关。

通过合理配置和编码实践，开发者可以充分利用预渲染的优势，同时避免由此带来的副作用。