深入浅出Blazor webassembly之理解RenderFragment

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