Razor 的DOM可以使用html直接寫, 也可以使用 RenderFragment C#委托方法寫.

RenderFragment C#代理方法會(huì)由 Blazor Renderer 引擎自動(dòng)調(diào)用, 我們不應(yīng)該主動(dòng)調(diào)用,  可將它們認(rèn)為作為  html snippet用于razor 的 html中.

對(duì)于SPA的整個(gè)頁(yè)面, Blazor Renderer會(huì)維護(hù)一個(gè) RenderTree, 可以將整個(gè)DOM tree想象成一個(gè) RenderTree, Renderer引擎會(huì)采用 diff 算法來(lái)檢查DOM是否需要更新, 如果檢查到某個(gè)節(jié)點(diǎn)需要更新, Renderer 引擎調(diào)用我們的 RenderFragment 委托, 并將 RenderTreeBuilder 作為委托入?yún)? 完成重繪工作.

========================================

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 其實(shí)還支持 inline 寫法, 即在 C# 代碼塊中直接寫html.

Inline 寫法的要求是委托形參名必需是 __builder , 前面兩個(gè)下劃線,  否則編譯會(huì)報(bào)錯(cuò).

@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