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

  • 相关阅读:
    javaScript面向对象继承方法经典实现
    javascript面向对象之Javascript 继承
    js面向对象 多种创建对象方法小结
    JavaScript 三种创建对象的方法
    正常上线的流程
    java.lang.NoClassDefFoundError: javax/servlet/ServletInputStream
    org/eclipse/jetty/util/component/Container$Listener
    java.io.IOException: Cannot find any registered HttpDestinationFactory from the Bus.
    java.lang.NoClassDefFoundError: javax/wsdl/extensions/ElementExtensible
    java.lang.ClassNotFoundException: org.objectweb.asm.ClassWriter
  • 原文地址:https://www.cnblogs.com/harrychinese/p/blazor_RenderFragment.html
Copyright © 2011-2022 走看看