Blazor是微软推出的基于C#和.NET的前端开发框架，Razor组件是Blazor应用的基本构建块，每个组件都是一个可复用的UI单元，包含HTML标记和对应的C#逻辑。通过组件化开发，我们可以将复杂的页面拆分成多个独立的小模块，降低代码耦合度，提升复用性。
Razor组件的基础结构
一个标准的Razor组件文件以.razor为后缀，文件内容由两部分组成：顶部的Razor标记（HTML+ Razor语法）和底部的@code代码块（C#逻辑）。下面是一个最简单的Razor组件示例：
<!-- 组件文件名：HelloWorld.razor -->
<h3>Hello World 组件</h3>
<p>当前时间：@CurrentTime</p>
@code {
// 定义组件内部的属性
private DateTime CurrentTime { get; set; } = DateTime.Now;
}
创建Razor组件的两种常用方式
1. 手动创建.razor文件
在Blazor项目的Pages或者Components文件夹下，右键新建项，选择Razor组件模板，或者直接新建文本文件修改后缀为.razor。按照上面的基础结构编写内容即可，组件的类名默认和文件名一致，比如文件名为UserCard.razor，组件的类名就是UserCard。
2. 使用Visual Studio快捷创建
在Visual Studio中，右键目标文件夹，选择添加-新建项，在搜索框输入Razor组件，选择对应模板后输入组件名称，点击添加即可自动生成基础结构的组件文件，无需手动编写基础框架。
Razor组件的参数传递
组件之间往往需要传递数据，我们可以通过[Parameter]特性定义组件的公开参数，父组件在使用子组件时可以通过属性赋值的方式传递数据。
首先定义一个接收用户信息的子组件UserInfo.razor：
<div class="user-card">
<p>用户名：@UserName</p>
<p>年龄：@UserAge</p>
</div>
@code {
// 定义接收父组件传递的参数
[Parameter]
public string UserName { get; set; }
[Parameter]
public int UserAge { get; set; }
}
然后在父组件中使用这个子组件并传递参数：
<!-- 父组件中使用UserInfo组件 --> <UserInfo UserName="张三" UserAge="25" />
Razor组件的生命周期
Razor组件有一套完整的生命周期方法，开发者可以在不同阶段执行对应的逻辑，常用的生命周期方法如下：
- OnInitialized / OnInitializedAsync：组件初始化时执行，适合做数据初始化的操作，异步方法对应Async版本。
- OnParametersSet / OnParametersSetAsync：当组件的参数被设置或者更新时执行，适合处理参数变化后的逻辑。
- OnAfterRender / OnAfterRenderAsync：组件渲染完成之后执行，适合操作DOM的相关逻辑。
下面是一个使用生命周期方法的示例组件：
<p>组件初始化次数：@InitCount</p>
@code {
private int InitCount { get; set; } = 0;
protected override void OnInitialized()
{
// 组件初始化时执行，计数加1
InitCount++;
base.OnInitialized();
}
}
组件的事件回调
子组件如果需要向父组件传递事件或者数据，可以使用EventCallback类型定义回调参数，父组件可以绑定对应的处理方法。
首先定义带事件回调的子组件Counter.razor：
<button @onclick="HandleClick">点击次数：@Count</button>
@code {
private int Count { get; set; } = 0;
// 定义事件回调参数
[Parameter]
public EventCallback<int> OnCountChanged { get; set; }
private async Task HandleClick()
{
Count++;
// 触发回调，将当前计数传递给父组件
if (OnCountChanged.HasDelegate)
{
await OnCountChanged.InvokeAsync(Count);
}
}
}
父组件中使用并绑定回调：
<p>父组件接收到的计数：@ParentCount</p>
<Counter OnCountChanged="UpdateCount" />
@code {
private int ParentCount { get; set; } = 0;
private void UpdateCount(int count)
{
ParentCount = count;
}
}
组件的复用与嵌套
Razor组件支持任意层级的嵌套，我们可以将通用组件封装到独立的文件夹中，在多个页面中复用。比如封装一个通用的按钮组件PrimaryButton.razor：
<button class="primary-btn" @onclick="OnClick">
@ChildContent
</button>
@code {
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public EventCallback OnClick { get; set; }
}
这个组件可以接收子内容作为按钮文本，同时支持绑定点击事件，在任意其他组件中都可以直接引入使用，大幅减少重复代码。