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 渲染组件。