Blazor元件的new使用方式與動態彈窗

半野發表於2022-01-01

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的動態渲染。提到Blazor的動態渲染,有些人可能會講到DynamicComponentDynamicComponent通過接收元件的型別——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在關閉後再次開啟無法保留之前內部的狀態(其實這部分是可以解決的,提示:DynamicComponentRender方法)。

示例程式碼:BlazorTricks/02-Instantiation at main · zxyao145/BlazorTricks (github.com)

相關文章