Blazor组件的new使用方式与动态弹窗
- 2022 年 1 月 1 日
- 筆記
- .NET, Blazor, Blazor Tricks
1. 前言
在Blazor中的无状态组件文中，我提到了无状态组件中，有人提到这个没有diff，在渲染复杂model时，性能可能会更差。确实，这一点确实是会存在的。以上文的方式来实现无状态组件，确实只要属性发生变化，就会渲染。无状态组件是否渲染，更多的需要依靠父组件来判断。父组件不用更新，则无状态组件自然不会发生渲染。此外，有些需求，比如地图，要做的就是每次拖拽、缩放，整个地图中都要被渲染，这种纯粹用来进行数据展示的组件，使用无状态组件会更好。如果想要无状态组件不会每次都渲染，那就可以自己实现一个ShouldRender的函数。
2. 一定要实现IComponent接口吗？
在Blazor中的无状态组件中，我提到一个组件要想被成功被编译使用，需要满足两个条件：
- 实现
IComponent接口 - 具有一个如下声明的虚函数：
protected virtual void BuildRenderTree(RenderTreeBuilder builder);
那，如果我们把IComponent接口的实现声明给去掉（即仅删除: IComponent），能够使用吗？显然不能，VS编译器都会提示你错误找不到这个组件：
RZ10012 Found markup element with unexpected name ‘xx.DisplayCount’. If this is intended to be a component, add a @using directive for its namespace.
但是再想一下，vs会把所有的*.razor文件编译为一个类，那我们不是可以直接使用这个类，new一个组件吗？这是当然是没问题的。
3. 再谈Blazor组件的渲染
在Blazor中的无状态组件中，我谈到Blazor的渲染，实际上渲染的是组件内生成的RenderFragmentDOM树。当我们创建一个*.razor文件后，编译器会自动帮我们将组件中的DOM生成为RenderFragment。因此无论一个*.razor文件是否继承ComponmentBase类，异或是是否实现IComponent接口，只要满足上述的第二个条件——具有一个BuildRenderTree的虚函数——就一定能够将文件内所编辑的DOM转为RenderFragmentDOM树。在之前的文章中，无状态组件StatelessComponentBase基类的声明大致如下：
public class StatelessComponentBase : IComponent
{
private RenderFragment _renderFragment;
public StatelessComponentBase()
{
// 设置组件DOM树（的创建方式）
_renderFragment = BuildRenderTree;
}
...
}
说白了，无非是我们耍了个小聪明，利用编译器对*.razor的编译方式，自动生成了RenderFragment。可是，没人说_renderFragment一定是要私有的，我们完全可以这样：
public class StatelessComponentBase
{
public RenderFragment RenderFragment { get; private set; }
public StatelessComponentBase()
{
RenderFragment = BuildRenderTree;
}
...
}
这样子，我们就可以在组件外部获取到RenderFragmentDOM树。
4. New一个组件
在3中，我们已然将组件中的RenderFragment暴露到了外部，自然也就能够在new之后，通过实例来获取到它：
new Componment().RenderFragment
来看一个例子，是基于Counter页面修改的：
// DisplayCount组件
@inherits StatelessComponentBase
<h3>DisplayCount</h3>
<p role="status">Current count: @Count</p>
@code {
public int Count{ get; set; }
}
==================
// index页面
@page "/"
<PageTitle>Index</PageTitle>
<div>currentCount: @currentCount</div>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@renderFragment
@code {
RenderFragment? renderFragment = null;
private int currentCount = 1;
Components.DisplayCount displayCount = new Components.DisplayCount();
private void IncrementCount()
{
currentCount++;
displayCount.Count = currentCount;
}
public async override Task SetParametersAsync(ParameterView parameters)
{
displayCount.Count = currentCount;
renderFragment = displayCount.RenderFragment;
await base.SetParametersAsync(parameters);
}
}
代码运行无任何问题：
通过这种小技巧，即可实现Blazor的动态渲染。提到Blazor的动态渲染，有些人可能会讲到DynamicComponent。DynamicComponent通过接收组件的类型——Type，和组件的参数——Parameters，能够实现对组件进行动态渲染。这里提供了一个与DynamicComponent不同的思路。DynamicComponent需要将标签写在组件文件中，以实现挂载，而本文则是通过new一个组件来获取内部的RenderFragment来进行。插个题外话，DynamicComponent也没有继承ComponmentBase类，和之前我提出的无状态组件的结构是相似的。
5. 动态弹窗1
想一想在使用WinForm的时候，我们只需要new和show一下，就可以打开一个窗体。现在有空动态渲染，Blazor中的弹窗组件，new and show不再是梦想。
以上述方法而言，new一个组件后，必然需要在一个组件中进行挂载。没有挂载点，Blazor组件是无法在页面上呈现出来的。一想到挂载点，我们自然会想到创建一个全局容器来实现。当我们调用show的时候，在容器组件中将RenderFragment进行渲染即可。
Modal.razor：Modal的基类，为其添加了show和close的方法。因为Modal组件都是new出来的，需要挂载在Blazor中才能够渲染，这里通过Container中的静态属性ModalContainer来进行Modal的渲染。
@inherits StatelessComponentBase
@code {
public void Show()
{
Container.ModalContainer?.AddModal(this);
}
public void Close()
{
Container.ModalContainer?.RemoveModal(this);
}
}
Container.razor：全局容器，用于挂载Modal。
<div style="position: absolute; top:0; width: 100%; height: 100%; z-index: 9999; pointer-events: none;
display: flex; align-items:center; justify-content:center;">
@foreach(var modal in Modals)
{
<div @key="modal" style="border: 1px solid #efefef; border-radius: 4px;">
@modal.RenderFragment
</div>
}
</div>
@code {
/// <summary>
/// 由于需要在每个 new 的 Modal 中能够获取到container的实例，
/// 所以这里需要用个静态变量，在组件初始化的时候引用自身
/// </summary>
internal static Container? ModalContainer { get; private set; }
private List<Modal> Modals { get; init; } = new List<Modal>();
protected override Task OnInitializedAsync()
{
ModalContainer = this;
return base.OnInitializedAsync();
}
internal void AddModal(Modal modal)
{
if (!Modals.Contains(modal))
{
Modals.Add(modal);
StateHasChanged();
}
}
internal void RemoveModal(Modal modal)
{
if (Modals.Contains(modal))
{
Modals.Remove(modal);
StateHasChanged();
}
}
}
接下来，当我们需要添加一个Modal组件的时候，我们只需要继承Modal即可。
// Modal1.razor
@inherits Modal
<h3>Modal1</h3>
而在使用的时候，我们可以new and show即可：
@page "/modalDemo"
@using Instantiation.Components.DyModal1
<PageTitle>Modal Demo</PageTitle>
<button class="btn btn-primary" @onclick="()=>{modal1.Show();}">OpenModal1</button>
<button class="btn btn-primary" @onclick="()=>{modal1.Close();}">CloseModal1</button>
@code {
Modal modal1 = new Modal1();
}
效果如下：
请注意最后的部分，Modal2关闭再打开后，count的计数值是没有变化的，也就是说这种方式可以保留Modal内部的状态。但是，Modal中子组件与Modal根组件（例如Modal1.razor）有些交互无法使用，例如**EventCallback** 等。
这部分的代码详见：[Pages/ModalDemo.razor](BlazorTricks/ModalDemo2.razor at main · zxyao145/BlazorTricks (github.com))。
6. 动态弹窗2
当然，使用DynamicComponent也是可以实现的，这样你就不必使用new and show，可以直接使用泛型Add<T>()来实现，而且可以直接使用ComponentBase，不必将RenderFragment暴露出来。
Container2.razor：同样需要定义一个全局的容器：
<div style="position: absolute; top:0; width: 100%; height: 100%; z-index: 9999; pointer-events: none;
display: flex; align-items:center; justify-content:center;">
@foreach(var modal in Modals)
{
<div @key="modal" style="border: 1px solid #efefef; border-radius: 4px; pointer-events: all;">
<DynamicComponent Type="modal" />
</div>
}
</div>
@code {
/// <summary>
/// 由于需要在每个 new 的 Modal 中能够获取到container的实例，
/// 所以这里需要用个静态变量，在组件初始化的时候引用自身
/// </summary>
internal static Container2? ModalContainer { get; private set; }
private List<Type> Modals { get; init; } = new List<Type>();
protected override Task OnInitializedAsync()
{
ModalContainer = this;
return base.OnInitializedAsync();
}
internal void AddModal<T>()
{
var type = typeof(T);
if (!Modals.Contains(type))
{
Modals.Add(type);
StateHasChanged();
}
}
internal void RemoveModal<T>()
{
var type = typeof(T);
if (Modals.Contains(type))
{
Modals.Remove(type);
StateHasChanged();
}
}
}
Modal3.razor：具体的弹窗Modal，注意，不必写任何继承
<h3>Modal3</h3>
@currentCount
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
StateHasChanged();
}
}
使用：
@page "/modalDemo2"
@using Instantiation.Components.DyModal2
<PageTitle>Modal Demo2</PageTitle>
<button class="btn btn-primary" @onclick="()=>{Container2.ModalContainer?.AddModal<Modal3>();}">Open DynamicComponentModalIns</button>
<button class="btn btn-primary" @onclick="()=>{Container2.ModalContainer?.RemoveModal<Modal3>();}">Close DynamicComponentModalIns</button>
效果如下：
请注意，这种方式Modal关闭再打开后，count的计数值是重新归位了0，也就是说这种方式无法保留Modal内部的状态。
这部分的代码详见：[Pages/ModalDemo2.razor](BlazorTricks/ModalDemo2.razor at main · zxyao145/BlazorTricks (github.com))。
7. 总结
本文讲述Blazor如何通过new实例化的方式进行使用，继而引起了动态弹窗的使用。动态弹窗本文写了两种方式，一是之前提到的new and show，需要较多的编码，另外一种是利用Blazor内置的组件DynamicComponent。两种方式各有缺点。第一种可以保留内部的状态，但是Modal的跟组件与子组件的交互将有部分功能缺失（不限制于Modal的子孙组件）;第二种可以可以保留组件的一切功能，但是Modal在关闭后再次打开无法保留之前内部的状态（其实这部分是可以解决的，提示：DynamicComponent的Render方法）。
示例代码：BlazorTricks/02-Instantiation at main · zxyao145/BlazorTricks (github.com)
