在 Blazor 中，通过 @ref 调用子组件方法（如 Show()/Hide()）时，若未显式触发重渲染，绑定的条件类（如 @(Display ? "show" : "")）不会自动更新——需手动调用 StateHasChanged()。
在 blazor 中，通过 `@ref` 调用子组件方法（如 `show()`/`hide()`）时，若未显式触发重渲染，绑定的条件类（如 `@(display ? "show" : "")`）不会自动更新——需手动调用 `statehaschanged()`。
Blazor 的渲染机制基于“状态变更检测”，但该检测仅在组件生命周期事件（如用户交互、异步任务完成）或父组件重新渲染时自动触发。当你通过 @ref 直接调用子组件的公开方法（例如
✅ 正确做法是在 Show() 和 Hide() 方法中显式调用 StateHasChanged()，强制组件立即重新执行 BuildRenderTree 并更新 DOM：
<!-- Spinner.razor -->
<div class="loading-indicator @(Display ? "show" : "")">
<div class="d-flex justify-content-center">
<div class="spinner-border loading-indicator-spinner text-light" role="status"></div>
</div>
</div>
@code {
public bool Display { get; private set; }
public void Show()
{
Display = true;
StateHasChanged(); // ✅ 关键：通知框架状态已变，需重渲染
}
public void Hide()
{
Display = false;
StateHasChanged(); // ✅ 同样适用于隐藏逻辑
}
}⚠️ 注意事项：
- StateHasChanged() 仅影响当前组件，不递归触发父或子组件更新；
- 若 Display 是 public set 属性，外部直接赋值（如 spinnerRef.Display = true;）仍不会触发渲染——必须配合 StateHasChanged() 或通过封装方法调用；
- 替代方案：使用 @if (Display) { ... } 也能实现条件渲染，但同样需 StateHasChanged() 配合 @ref 调用，否则无效果；
- 在 .NET 8+ 中，若启用 InteractiveServer 或 WebAssembly 模式，该原则依然适用；StateHasChanged() 是跨模式通用的底层保障机制。
? 总结：Blazor 中“数据变了但 UI 没更新”，首要排查是否遗漏 StateHasChanged() —— 尤其在 @ref 主动调用场景下，它不是可选项，而是必要步骤。
立即学习“前端免费学习笔记（深入）”；
