Blazor中的无状态组件

声明:本文将RenderFragment称之为组件DOM树或者是组件DOM节点,将*.razor称之为组件。

1. 什么是无状态组件

如果了解React,那就应该清楚,React中存在着一种组件,它只接收属性,并进行渲染,没有自己的状态,也没有所谓的生命周期。写法大致如下:

var component = (props: IPerson)=>{return <div>{prop.name}: {prop.age}</div>;
}

无状态组件非常适用于仅做数据的展示的DOM树最底层——或者说是最下层——组件。

2. Blazor的无状态组件形式

Blazor也可以生命无状态组件,最常见的用法大概如下:

...@code {RenderFragment<Person> DisplayPerson = props => @<div class="person-info"><span class="author">@props.Name</span>: <span class="text">@props.Age</span></div>;
}

其实,RenderFragment就是Blazor在UI中真正需要渲染的组件DOM树。Blazor的渲染并不是直接渲染组件,而是渲染的组件编译生成的RenderFragment,执行渲染的入口,就是在renderHandle.Render(renderFragment)函数。而renderHandle则只是对renderer进行的一层封装,内部逻辑为:renderer.AddToRenderQueue(_componentId, renderFragment);_renderHandle内部私有的_renderer,对于WebAssembly来说,具体就是指WebAssemblyRenderer,它将会在webAssemblyHost.RunAsync()进行创建。

以上方式,固然能够声明一个Blazor的无状态组件,但是这种标签式的写法是有限制的,只能写在*.razor文件的@code代码块中。如果写在*.cs文件中就比较复杂,形式大概如下:

RenderFragment<Person> DisplayPerson = props => (__builder2) =>{__builder2.OpenElement(7, "div");__builder2.AddAttribute(8, "class", "person-info");__builder2.OpenElement(9, "span");__builder2.AddAttribute(10, "class", "author");__builder2.AddContent(11, props.Name);__builder2.CloseElement();__builder2.AddContent(12, ": ");__builder2.OpenElement(13, "span");__builder2.AddAttribute(14, "class", "text");__builder2.AddContent(15, props.Age);__builder2.CloseElement();__builder2.CloseElement();};

这段代码是.NET自动生成的,如果你使用.NET6,需要使用一下命令:

dotnet build /p:EmitCompilerGeneratedFiles=true

或者,在项目文件中加入一下配置:

<PropertyGroup><EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles></PropertyGroup>

然后就能在

"obj\Debug\net6.0\generated\Microsoft.NET.Sdk.Razor.SourceGenerators\Microsoft.NET.Sdk.Razor.SourceGenerators.RazorSourceGenerator"文件夹下看到文件的生成(.NET5 应该是在 "obj/Debug/net6.0/RazorDeclaration")。

事实上,这和React是类似的,JSX也是ReactReact.createElement()的语法糖。但是,不管怎么样,语法糖就是香,而且能够直观看到HTML的DOM的大致样式(因为看不到组件的DOM)。那么,有没有一种更加优雅的方式,能够实现无状态组件,减少组件的生命周期的调用?答案是有的。

3. 面向接口编程的Blazor

当我们创建一个*.razor Blazor组件的时候,组件会默认继承抽象类ComponentBase,Blazor组件所谓的生命周期方法OnInitializedOnAfterRender等等,都是定义在这个抽象类中的。但是,Blazor在进行渲染的时候,组件的基类是ComponentBase并不是强制要求的,只需要实现IComponent接口即可。关于这一点,我并没有找到具体的源码在哪,只是从Blazor挂载的根节点的源码中看到的:

/// <summary>
/// Defines a mapping between a root <see cref="IComponent"/> and a DOM element selector.
/// </summary>
public readonly struct RootComponentMapping
{/// <summary>/// Creates a new instance of <see cref="RootComponentMapping"/> with the provided <paramref name="componentType"/>/// and <paramref name="selector"/>./// </summary>
+    /// <param name="componentType">The component type. Must implement <see cref="IComponent"/>.</param>/// <param name="selector">The DOM element selector or component registration id for the component.</param>public RootComponentMapping([DynamicallyAccessedMembers(Component)] Type componentType, string selector){if (componentType is null){throw new ArgumentNullException(nameof(componentType));}+        if (!typeof(IComponent).IsAssignableFrom(componentType)){throw new ArgumentException($"The type '{componentType.Name}' must implement {nameof(IComponent)} to be used as a root component.",nameof(componentType));}// ...}
}

那么,是不在只要Blazor的组件实现了IComponent接口即可?答案是:不是的。因为除了要实现IComponent接口,还有一个隐形的要求是需要有一个虚函数BuildRenderTree

protected virtual void BuildRenderTree(RenderTreeBuilder builder);

这是因为,Blazor在编译后文件中,会默认重写这个函数,并在该函数中创建一个具体DOM渲染节点RenderFragmentRenderFragment是一个委托,其声明如下:

public delegate void RenderFragment(RenderTreeBuilder builder)

BuildRenderTree的作用就相当于是给这个委托赋值。

4. 自定义StatelessComponentBase

既然只要组件类实现IComponent接口即可,那么我们可以实现一个StatelessComponentBase : IComponent,只要我们以后创建的组件继承这个基类,即可实现无状态组件。IComponent接口的声明非常简单,其大致作用见注释。

public interface IComponent
{/// <summary>/// 用于挂载RenderHandle,以便组件能够进行渲染/// </summary>/// <param name="renderHandle"></param>void Attach(RenderHandle renderHandle);/// <summary>/// 用于设置组件的参数(Parameter)/// </summary>/// <param name="parameters"></param>/// <returns></returns>Task SetParametersAsync(ParameterView parameters);
}

没有生命周期的无状态组件基类:

public class StatelessComponentBase : IComponent
{private RenderHandle _renderHandle;private RenderFragment renderFragment;public StatelessComponentBase(){// 设置组件DOM树(的创建方式)renderFragment = BuildRenderTree;}public void Attach(RenderHandle renderHandle){_renderHandle = renderHandle;}public Task SetParametersAsync(ParameterView parameters){// 绑定props参数到具体的组件(为[Parameter]设置值)parameters.SetParameterProperties(this);// 渲染组件_renderHandle.Render(renderFragment);return Task.CompletedTask;}protected virtual void BuildRenderTree(RenderTreeBuilder builder){}
}

StatelessComponentBaseSetParametersAsync中,通过parameters.SetParameterProperties(this);为子组件进行中的组件参数进行赋值(这是ParameterView类中自带的),然后即执行_renderHandle.Render(renderFragment),将组件的DOM内容渲染到HTML中。

继承自StatelessComponentBase的组件,没有生命周期、无法主动刷新、无法响应事件(需要继承IHandleEvent),并且在每次接收组件参数([Parameter])的时候都会更新UI,无论组件参数是否发生变化。无状态组件既然有这么多不足,我们为什么还需要使用它呢?主要原因是:没有生命周期的方法和状态,无状态组件在理论上应具有更好的性能。

5. 使用StatelessComponentBase

Blazor模板默认带了个Counter.razor组件,现在,我们将count展示的部分抽离为一个单独DisplayCount无状态组件,其形式如下:

@inherits StatelessComponentBase<h3>DisplayCount</h3>
<p role="status">Current count: @Count</p>@code {[Parameter]public int Count{ get; set; }
}

counter的形式如下:

@page "/counter"<PageTitle>Counter</PageTitle><h1>Counter</h1>+ <Stateless.Components.DisplayCount Count=@currentCount />
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {private int currentCount = 0;private void IncrementCount(){currentCount++;}
}

6. 性能测试

StatelessComponentBase添加一个生命周期函数AfterRender,并在渲染后调用,则现在其结构如下(注意SetParametersAsync现在是个虚函数):

public class StatelessComponentBase : IComponent
{private RenderHandle _renderHandle;private RenderFragment renderFragment;public StatelessComponentBase(){// 设置组件DOM树(的创建方式)renderFragment = BuildRenderTree;}public void Attach(RenderHandle renderHandle){_renderHandle = renderHandle;}+    public virtual Task SetParametersAsync(ParameterView parameters){// 绑定props参数到具体的组件(为[Parameter]设置值)parameters.SetParameterProperties(this);// 渲染组件_renderHandle.Render(renderFragment);
+        AfterRender();return Task.CompletedTask;}protected virtual void BuildRenderTree(RenderTreeBuilder builder){}protected virtual void AfterRender(){}
}

修改无状态组件DisplayCount如下:

@inherits StatelessComponentBase<h3>DisplayCount</h3>
<p role="status">Current count: @Count</p>@code {[Parameter]public int Count{ get; set; }long start;public override Task SetParametersAsync(ParameterView parameters){start = DateTime.Now.Ticks;return base.SetParametersAsync(parameters);}protected override void AfterRender(){long end = DateTime.Now.Ticks;Console.WriteLine($"Stateless DisplayCount: {(end - start) / 1000}");base.AfterRender();}
}

创建有状态组件DisplayCountFull

<h3>DisplayCountFull</h3>
<p role="status">Current count: @Count</p>@code {[Parameter]public int Count { get; set; }long start;public override Task SetParametersAsync(ParameterView parameters){start = DateTime.Now.Ticks;return base.SetParametersAsync(parameters);}protected override void OnAfterRender(bool firstRender){long end = DateTime.Now.Ticks;Console.WriteLine($"DisplayCountFull: {(end - start) / 1000}");base.OnAfterRender(firstRender);}
}

两者的区别在于继承的父类、生命周期函数和输出的日志不同。

有趣的是,DisplayCountDisplayCountFull组件的位置的更换,在第一次渲染的时候,会得到两个完全不一样的结果,哪个在前,哪个的耗时更短,但是DisplayCount在前的时候,两者整体耗时之和是最小的。关于这点,我还没有找到原因是什么。但是无论那种情况,之后随着count的变化,DisplayCount的耗时是小于DisplayCountFull的。

ce6fc5bac7f0d530148d2f66c2fa57a6.png628ab4e66d9619a27b37836a8497801a.png

7. 总结

本文粗略的探究了Blazor的组件的本质——组件仅仅是对RenderFragment组件DOM树的包装和语法糖。通过声明RenderFragment变量,即可进行无状态的Blazor的组件渲染。此外,组件不需要继承ComponentBase类,只需要实现IComponent接口并具备一个protected virtual void BuildRenderTree(RenderTreeBuilder builder)抽象函数即可。

同时,本文提出了Blazor的无状态组件的实现方式没,相较于直接声明RenderFragment更加优雅。尽管无状态组件有很多缺点:

  1. 没有生命周期

  2. 无法主动刷新

  3. 无法响应事件(需要继承IHandleEvent),

  4. 每次接收组件参数([Parameter])的时候都会更新UI,无论组件参数是否发生变化。

但是通过对无状态组件的性能进行粗略测试,发现由于无状态组件没有生命周期的方法和状态,总体上具有更好的性能。此外,相较于重写生命周期的组件,更加直观。无状态组件更加适用于纯进行数据数据展示的组件。

以上仅为本人的拙见,如有错误,敬请谅解和纠正。https://github.com/zxyao145/BlazorTricks/tree/main/01-Stateless

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/293637.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一次性撤稿70篇!中国学者论文再现大规模撤稿 | 附全名单

全世界只有3.14 % 的人关注了爆炸吧知识2021年1月20日&#xff0c;英国皇家化学学会&#xff08;Royal Society of Chemistry&#xff0c;简称RSC&#xff09;表示&#xff0c;他们正在考虑撤回68篇可能出自“论文工厂”的文章&#xff0c;但当时并没有公布这68篇文章的详情。近…

git代码库的使用

代码库/使用指南 http://learn.zone.jd.com/cmsuser/index.htm 在win7系统下使用TortoiseGit(乌龟git)简单操作GitOSC http://my.oschina.net/longxuu/blog/141699转载于:https://www.cnblogs.com/mssql8/p/3773995.html

二叉树前序、中序、后序遍历相互求法

今天来总结下二叉树前序、中序、后序遍历相互求法&#xff0c;即如果知道两个的遍历&#xff0c;如何求第三种遍历方法&#xff0c;比较笨的方法是画出来二叉树&#xff0c;然后根据各种遍历不同的特性来求&#xff0c;也可以编程求出&#xff0c;下面我们分别说明。 首先&…

搭建SVN服务

SVN版本管理工具管理着随时间改变的各种数据像普通文件服务器或者ftp服务器&#xff0c;但是&#xff0c;SVN会备份并记录每个文件每一次的修改记录Subversion官网&#xff1a;http://subversion.tigris.org/http://subversion.apache.org/svn客户端&#xff1a; http://tortoi…

linux awk命令总结

1. 除去重复项, 这个不多说, 只给出代码&#xff1a; awk !a[$0] file(s) awk !($0 in a){a[$0];print} file(s) 另一种&#xff1a;http://bbs.chinaunix.net/thread-1859344-1-1.html 2. 计算总数&#xff08;sum&#xff09;&#xff0c;如&#xff1a…

ubuntu环境下如何安装jdk,安装eclipse,安装android studio总结

1 安装jdk总结: 先下载ubuntu的jdk,然后解压,放入文件夹,然后在profile里面配置,关键命令如下 sudo gedit /etc/profile 然后加入以下配置 export JAVA_HOME=/usr/local/java/jdk1.6.0_30 export JRE_HOME=/usr/local/java/jdk1.6.0_30/jre export CLASSPATH=.:$JAVA_HOM…

MegaCli 监控Raid状态

MegaCli是一款管理维护硬件RAID软件&#xff0c;可以通过它来了解当前 raid卡的所有信息&#xff0c;包括 raid卡的型号&#xff0c;raid的阵列类型&#xff0c;raid 上各磁盘状态&#xff0c;等等。通常&#xff0c;我们对硬盘当前的状态不太好确定&#xff0c;一般通过机房人…

巧用ActionFilter的AOP特性,为返回的数据增加返回码和消息

背景对于处理接口返回值统一加密&#xff0c;过滤&#xff0c;特定值统一处理&#xff0c;统一返回等多种需求&#xff0c;net的拦截器前置拦截比较常用&#xff0c;例如&#xff1a;登录校验&#xff0c;参数格式校验等等。接下来介绍filter。filter过滤器实现filter的ActionF…

研究表明,胸大无脑是不存在的......

1 求车主心里阴影面积▼2 不管成不成功大叔是你坚实的后盾▼3 小岳岳的“全球分鹏”▼4 胸大无脑是不存在的&#xff01;▼美国芝加哥大学曾对1200名女性进行实验&#xff0c;胸部丰满女性在智商测试中的平均得分反而比胸部扁平的女性高出了10分。5 你也是个逻辑鬼才▼6 想…

每日一小练——按字典顺序列出全部子集

上得厅堂&#xff0c;下得厨房&#xff0c;写得代码&#xff0c;翻得围墙&#xff0c;欢迎来到睿不可挡的每日一小练&#xff01; 题目&#xff1a;按字典顺序列出全部子集 内容&#xff1a; 请写一个程序用字典顺序把一个{1,2,3,4,...,n}集合的全部子集找出来。 解答&#xff…

CSS 特殊性、继承与层叠

一、特殊性规则 选择器的特殊性由选择器本身的组件确定&#xff1b;特殊性由四个部分组成&#xff0c;其初始值为0&#xff0c;0&#xff0c;0&#xff0c;0。 1. 对于选择器中的每一个id&#xff0c;记0&#xff0c;1&#xff0c;0&#xff0c;0&#xff1b; 2. 对于选择…

Android 之6.0 双向通话自动录音

可以先参考下这篇博客&#xff0c;讲得比较详细 http://www.jizhuomi.com/android/example/354.html 然后我看到这篇博客很叼&#xff0c;其它的文章质量也非常不错&#xff0c;http://blog.csdn.net/gyhgx/article/details/51669892 项目中需要实现基于Android 6.0 的双向通…

void 类型的指针

void指针是空类型的指针&#xff0c;也称为无类型的指针&#xff0c;它不指向任何类型&#xff0c;即它仅仅是个地址。因此void指针不能进行指针运算&#xff0c;也不能取其所指向的数据的值 只有将void指针跟其他类型的指针相关联&#xff0c;才能使用他&#xff0c;可以将其他…

sas数据导入终极汇总-之二

从FTP读入数据read raw data via FTP in SAS?SAS has the ability to read raw data directly from FTP servers. Normally, you would use FTP to download the data to your local computer and then use SAS to read the data stored on your local computer. SAS allows y…

解读WPF中的Xaml

1.Overview这篇文章主要分享从源代码角度解读wpf中xaml。由于源码查看起来错综复杂“随便找一个对象按下F12就是一个新的世界”&#xff0c;看源码的感觉就是在盗梦空间里来回穿梭&#xff1b;所以也是耗费很长的时间去阅读源码然后根据自己的理解编写文章和贴出部分关键源码。…

用心疗眼

训练眼睛的核心绝招——用心&#xff01;——致所有要求具体方法的网友不断有人找我&#xff0c;说自己多少度近视&#xff0c;该如何去训练。针对这样的问题&#xff0c;我总不知如何来回答&#xff0c;因为不同的人应该用不同的训练方法&#xff0c;我所提出的&#xff0c;只…

ubuntu之Unable to lock the administration directory(/var/lib/dpkg/), are you root?13 Permission denie

apt-get install subversion E: 无法打开锁文件 /var/lib/dpkg/lock - open (13 Permission denied) E: Unable to lock the administration directory (/var/lib/dpkg/), are you root?Permission denied 出现这个提示就说明你没有足够的权力去读写这个文件夹的内容,你需要取…

.NET 也有 Husky 了

熟悉前端开发的同学应该知道&#xff0c;前端工程化工作流中有一个很常用的工具&#xff1a;Husky。Husky 方便我们在项目中添加 git hooks&#xff0c;比如配合 lint-staged 在代码提交前进行自动检查编码规范&#xff0c;再比如配合 commitlint 对提交时填写的 message 内容进…

POJ3751 时间日期格式转换【日期计算】

时间日期格式转换Time Limit: 1000MS Memory Limit: 65536KTotal Submissions: 8306 Accepted: 3829Description 世界各地有多种格式来表示日期和时间。对于日期的常用格式&#xff0c;在中国常采用格式的是“年年年年/月月/日日”或写为英语缩略表示的”yyyy/mm/dd”&#xff…