Razor 的DOM可以使用html直接写, 也可以使用 RenderFragment C#委托方法写.
RenderFragment C#代理方法会由 Blazor Renderer 引擎自动调用, 我们不应该主动调用, 可将它们认为作为 html snippet用于razor 的 html中.
对于SPA的整个页面, Blazor Renderer会维护一个 RenderTree, 可以将整个DOM tree想象成一个 RenderTree, Renderer引擎会采用 diff 算法来检查DOM是否需要更新, 如果检查到某个节点需要更新, Renderer 引擎调用我们的 RenderFragment 委托, 并将 RenderTreeBuilder 作为委托入参, 完成重绘工作.
========================================
Html 写法与等效的RenderFragment 写法
========================================
@page "/hello" <div> hello world </div>
@page "/hello2"
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Rendering
@HelloContent2
@code{
protected RenderFragment HelloContent2=(RenderTreeBuilder builder)=>{
builder.OpenElement(0,"div");
builder.AddContent(1, "hello world");
builder.CloseElement();
};
}
========================================
Inline RenderFragment 写法
========================================
普通的RenderFragment 写法繁琐, Blazor 其实还支持 inline 写法, 即在 C# 代码块中直接写html.
Inline 写法的要求是委托形参名必需是 __builder , 前面两个下划线, 否则编译会报错.
@page "/hello3" @using Microsoft.AspNetCore.Components @using Microsoft.AspNetCore.Components.Rendering @HelloContent3 @code{ protected RenderFragment HelloContent3=(RenderTreeBuilder __builder)=>{ <div> hello world </div> }; }
========================================
支持泛型的 RenderFragment 写法
=======================================
@page "/hello4" @using Microsoft.AspNetCore.Components @using Microsoft.AspNetCore.Components.Rendering @HelloContent4("world") @code{ protected RenderFragment<string> HelloContent4 =(message)=> (RenderTreeBuilder builder)=>{ builder.OpenElement(0,"div"); builder.AddContent(1, "hello "+message); builder.CloseElement(); }; }
========================================
参考
========================================
https://shauncurtis.github.io/articles/Blazor-Components.html