Blazor —— 探索razor組件背後的祕密，你絕對想象不到

前言

一般情況下，我們可以使用 .razor 文件來編寫組件，但是它背後的祕密你們知道嗎？如果不用 .razor 的文件，我們又如何可以編寫組件呢？

ComponentBase

這是組件的基類，只要是組件，就必須繼承這個類。但是我們在編寫 razor 組件的時候，並沒有刻意的繼承這個類，那是怎麼回事呢？我們一起來了解一下其中的奧祕吧。

我編寫了一個簡單的組件，叫 BigButton：

<button class="btn btn-warning btn-lg" @onclick="Click">
    @Text
</button>

@code{

    [Parameter] public string Text { get; set; }

    [Parameter] public EventCallback OnClick { get; set; }

    public async Task Click()
    {
        await OnClick.InvokeAsync(null);
        Text = "按鈕被點擊了呢";
        StateHasChanged();
    }
}

編譯通過後，打開你項目所在的文件夾，找到【obj】文件夾

進入後，選擇【Debug】，這是你項目生成環境的名字，如果是 Release 環境，則進入【Release】。

這裏有2個文件夾，根據你項目使用的運行時框架，選擇進入。
在 VS 中雙擊你的啓動項目，進入到 csproj 的編輯模式，

在 TargetFramework 節點中就是你的運行時框架版本，我現在用的是 netcoreapp3.1

然後選擇【Razor】文件夾

進去後，你就會發現這裏面的文件夾和文件結構，與你項目的結構是一樣的。

然後去找到你的組件名稱，一般是以 組件名稱.razor.g.cs 命名。

這個時候你使用 VS 打開看看。

雖然一看就是機器生成的代碼，但是你發現，這些代碼其實就是你 razor 頁面的代碼。但是仔細看清楚，該組件是繼承了 ComponentBase 基類。

RenderTreeBuilder

翻譯過來就是渲染樹構造器。這是渲染組件的核心類。

在 ComponentBase 有一個虛方法 protected virtual void BuildRenderTree(RenderTreeBuilder builder); 這個方法就是使用代碼的方式渲染 razor 組件的內容。

回到剛纔打開的 BigButton.razor.g.cs 類文件中，我們發現在代碼中渲染組件正是這個方法：

等價於：

自己動手使用代碼編寫一個按鈕：

public class MyButton : ComponentBase
{
    [Parameter] public string ChildContent { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "button");
        builder.AddAttribute(1, "class", "btn btn-primary");
        builder.AddContent(2, ChildContent);
        builder.CloseElement();
    }
}

編譯過後，我們就可以使用組件了：

總結

你現在知道了 razor 文件在編譯後的祕密，也開始知道如何使用代碼的方式編寫組件，但是如果只使用代碼的方式去編寫一個比較複雜的組件，你可以做到嗎？下一篇教會你如何正確地使用 RenderTreeBuilder 渲染組件。