关于 author-component
用于编写 Blazor C# 组件的开发 Skill,提供参数、渲染、异步操作和释放资源方面的规则与模式。
主要功能
- 01参数与事件处理约定
- 02加载、空、已加载和错误状态
- 03RenderFragment 与泛型组件
- 04单文件与代码隐藏指导
- 05异步与防抖模式
- 06异步资源释放实践
适用场景
- 01构建单向数据流组件
- 02处理异步更新与取消
- 03按逻辑规模选择组件文件结构
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ dotnet/ skills --skill author-component安装后在 Claude Code 中输入/author-component确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/async-programming-rules.mdbreaking-down-components.mdcomponent-disposal.md详细介绍
编写 Blazor 组件
核心规则
- 数据通过
[Parameter]向下传递。事件通过EventCallback<T>向上传递(绝不使用Action/Func)。 - 绝不修改
[Parameter]属性。在OnParametersSet中将其复制到私有字段。 - 使用
[Parameter] public T Prop { get; set; }— 绝不使用required或init(会触发 BL0007)。 - 对必需参数使用
[EditorRequired]。 - 处理所有状态:加载中、空、已加载、错误 — 每种状态都使用
@if/@else。 - 在循环的重复元素上使用
@key,以提高差异比对效率。 - 集合参数使用
IReadOnlyList<T>(而不是IEnumerable<T>)。
RenderFragment 与泛型
[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter] public RenderFragment<TItem>? RowTemplate { get; set; } // generic template
对泛型组件使用 @typeparam TItem。
文件模式
- 单文件: 当逻辑少于约 50 行时,使用带
@code块的.razor。 - 代码隐藏: 当逻辑超过约 50 行时,使用
.razor+.razor.cs和partial class。
释放
当组件拥有订阅、计时器或 CTS 时,实现 IAsyncDisposable(而不是 IDisposable)。
在 DisposeAsync 中:取消订阅(-=)、取消 CTS、释放资源。绝不调用 StateHasChanged。
异步模式
- 对每个异步操作都使用
await。绝不使用.Result、.Wait()、Task.Run、ContinueWith、Thread.Start。 - 防抖: 使用
Task.Delay+CancellationTokenSource。取消旧 CTS,创建新的 CTS,等待延迟,然后执行操作。绝不使用System.Threading.Timer或System.Timers.Timer。 - 轮询: 在
OnInitializedAsync中使用带await Task.Delay(interval, token)的循环 — 这样会留在同步上下文中。 - 外部事件(
Action<T>):使用async void处理程序 +await InvokeAsync(() => { state++; StateHasChanged(); })+catch→DispatchExceptionAsync。绝不使用_ = InvokeAsync(...)。 - 在
DisposeAsync中取消 CTS。不要捕获ObjectDisposedException— 使用 CTS 取消。
禁止事项
[Parameter]上使用required/init— 会导致运行时故障- 修改
[Parameter]— 在OnParametersSet中复制到私有字段 - 用
Action/Func处理事件 — 使用EventCallback<T> - 使用
Task.Run/.Result/.Wait()/Timer 实现防抖 — 会导致死锁或逃逸到线程池 - 内联
style属性 — 使用 CSS 类或data-*属性 catch { throw; }— 使用when守卫,或让异常继续传播- 过度设计:未被要求的 ARIA、包装
div、无障碍功能 _ = InvokeAsync(...)— 会吞掉异常;使用async void+DispatchExceptionAsync
评论
支持 Markdown