再学Blazor——组件建造者
使用 RenderTreeBuilder 创建组件是 Blazor 的一种高级方案。前几篇文中有这样创建组件的示例 builder.Component<MyComponent>().Build(); ，本文主要介绍该高级方案的具体实现，我们采用测试驱动开发（TDD）方法，大致思路如下：
- 从测试示例入手
- 扩展一个RenderTreeBuilder类的泛型扩展方法，泛型类型为组件类型
- 创建组件建造者类（ComponentBuilder）提供方法来构建组件
- 通过组件的属性选择器来设置组件参数
- 构建时能返回组件的对象实例
1. 示例
首页我们从一个我们预想的高级方案示例入手，然后逐渐分析并实现我们预想的方案。下面是预想的示例代码：
class MyComponent : ComponentBase
{
private MyTest test; //MyTest组件的对象实例
//覆写构建呈现树方法
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
builder.Component<MyTest>()
.Set(c => c.Title, "Hello") //设置MyTest组件Title参数
.Build(value => test = value); //建造组件并给MyTest实例赋值
}
}
2. 扩展方法
下面实现builder.Component<MyTest>()这行代码，这是RenderTreeBuilder的一个扩展方法，该方法返回组件建造者类（ComponentBuilder）。
public static class Extension
{
//泛型T是Blazor组件类型
public static ComponentBuilder<T> Component<T>(this RenderTreeBuilder builder) where T : notnull, IComponent
{
//返回一个组件建造者类对象，将builder传递给建造者
//其内部方法需要通过builder来构建组件
return new ComponentBuilder<T>(builder);
}
}
3. 建造者类
接下来实现组件建造者类（ComponentBuilder），该类是手动构建组件的核心代码，提供设置组件参数以及构建方法。
public class ComponentBuilder<T> where T : IComponent
{
//手动构建呈现器
private readonly RenderTreeBuilder builder;
//组件参数字典，设置组件参数时，先存入字典，在构建时批量添加
internal readonly Dictionary<string, object> Parameters = new(StringComparer.Ordinal);
//构造函数
internal ComponentBuilder(RenderTreeBuilder builder)
{
this.builder = builder;
}
//添加组件参数方法，name为组件参数名称，value为组件参数值
//提供Add方法可以添加非组件定义的属性，例如html属性
public ComponentBuilder<T> Add(string name, object value)
{
Parameters[name] = value; //将参数存入字典
return this; //返回this对象，可以流式操作
}
//设置组件参数方法，selector为组件参数属性选择器表达式，value为组件参数值
//使用选择器有如下优点：
// - 当组件属性名称更改时，可自动替换
// - 通过表达式 c => c. 可以直接调出组件定义的属性，方便阅读
// - 可通过TValue直接限定属性的类型，开发时即可编译检查
public ComponentBuilder<T> Set<TValue>(Expression<Func<T, TValue>> selector, TValue value)
{
var property = TypeHelper.Property(selector); //通过属性选择器表达式获取组件参数属性
return Add(property.Name, value); //添加组件参数
}
//组件构建方法，action为返回组件对象实例的委托，默认为空不返回实例
public void Build(Action<T> action = null)
{
builder.OpenComponent<T>(0); //开始附加组件
if (Parameters.Count > 0)
builder.AddMultipleAttributes(1, Parameters); //批量添加组件参数
if (action != null)
builder.AddComponentReferenceCapture(2, value => action.Invoke((T)value)); //返回组件对象实例
builder.CloseComponent(); //结束附加组件
}
}
4. 属性选择器
为什么要用属性选择器，组件建造者类中已经提到，下面介绍如何通过属性选择器表达式来获取组件类型的属性对象。
public class TypeHelper
{
//通过属性选择器表达式来获取指定类型的属性
public static PropertyInfo Property<T, TValue>(Expression<Func<T, TValue>> selector)
{
if (selector is null)
throw new ArgumentNullException(nameof(selector));
if (selector.Body is not MemberExpression expression || expression.Member is not PropertyInfo propInfoCandidate)
throw new ArgumentException($"The parameter selector '{selector}' does not resolve to a public property on the type '{typeof(T)}'.", nameof(selector));
var type = typeof(T);
var propertyInfo = propInfoCandidate.DeclaringType != type
? type.GetProperty(propInfoCandidate.Name, propInfoCandidate.PropertyType)
: propInfoCandidate;
if (propertyInfo is null)
throw new ArgumentException($"The parameter selector '{selector}' does not resolve to a public property on the type '{typeof(T)}'.", nameof(selector));
return propertyInfo;
}
}
5. 总结
以上就是组件建造者的完整实现过程，代码不长，但这些功能足以完成手动构建Blazor组件的需求。
