Blazor组件的new使用方式与动态弹窗

2023-10-19 13:42:22

1. 前言

在Blazor中的无状态组件文中，我提到了无状态组件中，有人提到这个没有diff，在渲染复杂model时，性能可能会更差。确实，这一点确实是会存在的。以上文的方式来实现无状态组件，确实只要属性发生变化，就会渲染。无状态组件是否渲染，更多的需要依靠父组件来判断。父组件不用更新，则无状态组件自然不会发生渲染。此外，有些需求，比如地图，要做的就是每次拖拽、缩放，整个地图中都要被渲染，这种纯粹用来进行数据展示的组件，使用无状态组件会更好。如果想要无状态组件不会每次都渲染，那就可以自己实现一个ShouldRender的函数。

2. 一定要实现IComponent接口吗？

在Blazor中的无状态组件中，我提到一个组件要想被成功被编译使用，需要满足两个条件：

  1. 实现IComponent接口
  2. 具有一个如下声明的虚函数：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组件的new使用方式与动态弹窗

通过这种小技巧，即可实现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();
}

效果如下：

Blazor组件的new使用方式与动态弹窗

请注意最后的部分，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>

效果如下：

Blazor组件的new使用方式与动态弹窗

请注意，这种方式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)

上一篇：使用DynamicComponent创建一个OneContainer


下一篇：NET6 Razor学习