Blazor 怎么使用 RenderTreeBuilder 手动构建UI

RenderTreeBuilder 是 Blazor 中用于手动构建渲染树的底层 API，需在 BuildRenderTree 中同步调用，通过 OpenElement/OpenComponent/AddAttribute 等方法生成轻量中间表示，严格配对且序号递增，适用于虚拟滚动等高性能场景，但非常规开发首选。

Blazor 中手动使用 RenderTreeBuilder 构建 UI 是一种底层、高性能的渲染方式，适用于需要动态生成组件结构、封装可复用渲染逻辑或实现自定义渲染器（如虚拟滚动、条件模板、DSL 渲染）等场景。它绕过 Razor 编译，直接操作渲染树节点，但需注意：这不是日常开发首选，多数情况应优先用 Razor 语法 + 参数化组件。

理解 RenderTreeBuilder 的核心机制

RenderTreeBuilder 不是“创建 DOM”，而是构建一个轻量级的、Blazor 运行时可理解的中间表示（render tree），最终由框架 diff 并更新真实 DOM。它的调用必须在 BuildRenderTree 方法中进行（组件类中重写该方法），且每次调用都代表一次完整的渲染快照——不能增量追加，每次都要重建整个子树。

关键点：

• 每个元素/组件/文本都通过 OpenElement / OpenComponent / AddContent 等方法“写入”构建器
• 必须严格配对：OpenElement 后需 CloseElement，OpenComponent 后需 CloseComponent
• 属性通过 AddAttribute 添加（支持事件回调、绑定、普通 HTML 属性）
• 子内容（如 @childContent）需用 AddChildContent 注册委托，再在委托内继续调用 builder

基础示例：手动渲染一个带样式的按钮

以下是一个继承自 ComponentBase 的组件，完全不用 Razor 文件，纯 C# 构建 UI：

public class ManualButton : ComponentBase
{
    [Parameter] public string Text { get; set; } = "Click me";
    [Parameter] public EventCallback OnClick { get; set; }
<pre class="brush:php;toolbar:false;">protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    var seq = 0;
    builder.OpenElement(seq++, "button");
    builder.AddAttribute(seq++, "class", "btn btn-primary");
    builder.AddAttribute(seq++, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, () => OnClick.InvokeAsync()));
    builder.AddContent(seq++, Text);
    builder.CloseElement();
}

登录后复制

}

注意：seq 是唯一性序号，用于 diff 优化，必须递增且不重复；事件回调必须用 EventCallback.Factory.Create 包装。

标签： html go 常见问题 c#