zoukankan      html  css  js  c++  java
  • 深入浅出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

  • 相关阅读:
    初识 MyBatis
    基于模板匹配的车牌识别
    完整java开发中JDBC连接数据库代码和步骤
    MyBatis 动态SQL
    最大子序列和问题
    二分搜索,欧几里德算法
    链表单链表
    UVA 12293 Box Game
    hdu 4565 so easy
    Bootstrap Table的使用 Cryst
  • 原文地址:https://www.cnblogs.com/harrychinese/p/blazor_RenderFragment.html
Copyright © 2011-2022 走看看