Blazor 组件架构编写规范基于 dotnet-blazor 插件 author-component 技能的参数、事件、异步与释放实战指南【免费下载链接】skillsRepository for skills to assist AI coding agents with .NET and C#项目地址: https://gitcode.com/GitHub_Trending/skills17/skills本篇技术指南以skills17/skills仓库中 author-component 技能 为核心系统讲解如何编写架构正确的 Blazor 组件.razor文件包括[Parameter]与EventCallbackT的数据流向约定、RenderFragment插槽与泛型模板、组件生命周期与IAsyncDisposable释放模式、以及不脱离同步上下文的异步编程纪律。读完本文你将掌握一套可落地、可评审、可被测试验证的 Blazor 组件编写规范并了解该技能在仓库中的测试覆盖方式见 author-component 评测用例。一、核心规则数据向下流事件向上流作者组件的第一条铁律是单向数据流数据通过[Parameter]向下传递给子组件事件通过EventCallbackT向上通知父组件绝不要使用Action/Func作为事件参数类型。其余核心规则摘自 SKILL.md永不修改[Parameter]属性需要变更时在OnParametersSet中复制到私有字段再对该字段操作参数声明写法固定[Parameter] public T Prop { get; set; }禁止使用required或init访问器——它们会在运行时触发 BL0007 诊断错误必填参数使用[EditorRequired]标记让调用方在 IDE 中得到提示覆盖全部状态loading加载中、empty空、loaded已加载、error出错四种状态都要有对应的if/else分支循环中的重复元素加key让 diff 算法高效复用元素、避免不必要的重渲染集合参数使用IReadOnlyListT而非IEnumerableT——后者可能被延迟求值多次遍历导致性能与一致性问题。这些规则在仓库的评测用例中被逐一验证tests/dotnet-blazor/author-component/eval.yaml的 rubric 明确要求 Uses a private field for mutable state — does not mutate[Parameter]properties将可变状态放入私有字段不修改[Parameter]以及 Parameters are public auto-properties with{ get; set; }。二、RenderFragment 插槽与泛型组件RenderFragment是 Blazor 的“渲染委托”用于向组件传入一段可渲染的标记是实现模板化templated组件的核心机制[Parameter] public RenderFragment? ChildContent { get; set; } // 子内容插槽 [Parameter] public RenderFragmentTItem? RowTemplate { get; set; } // 泛型行模板ChildContent是约定俗成的默认插槽父组件写在标签内部的内容会渲染到这里RenderFragmentTItem是泛型模板接收一个TItem类型的上下文在模板中用context访问适合做表格行、列表项等自定义渲染需要让组件适用于任意类型时配合typeparam TItem声明泛型组件。泛型数据表组件示例typeparam TItem table theadHeaderTemplate/thead tbody foreach (var item in Items) { tr keyitem onclick() OnRowClick.InvokeAsync(item) RowTemplate(item) /tr } /tbody /table code { [Parameter, EditorRequired] public IReadOnlyListTItem Items { get; set; } []; [Parameter] public RenderFragment? HeaderTemplate { get; set; } [Parameter] public RenderFragmentTItem? RowTemplate { get; set; } [Parameter] public EventCallbackTItem OnRowClick { get; set; } }评测用例Author a generic data table component对此的验收标准是使用typeparamRowTemplate必须是RenderFragmentTItem而非普通RenderFragment或委托HeaderTemplate/EmptyTemplate为非泛型RenderFragment行循环中使用key点击事件用EventCallbackTItemItems参数类型为IReadOnlyListTItem参见 eval.yaml。三、文件组织模式单文件与 code-behind根据逻辑复杂度选择文件组织方式SKILL.md单文件模式.razor文件内直接使用code块适用于逻辑约50 行以内的组件标记与逻辑同处一屏阅读最直观code-behind 模式.razor.razor.cs成对出现.razor.cs中使用partial class承载逻辑适用于逻辑超过约 50 行的组件让标记与业务逻辑分离、便于单元测试。code-behind 的最小形态// SortableList.razor.cs public partial class SortableListTItem { private ListTItem localItems []; [Parameter, EditorRequired] public IReadOnlyListTItem Items { get; set; } []; [Parameter] public RenderFragmentTItem? ItemTemplate { get; set; } [Parameter] public EventCallbackIReadOnlyListTItem OnOrderChanged { get; set; } protected override void OnParametersSet() { // 复制参数到私有字段绝不直接修改 [Parameter] localItems Items.ToList(); } }评测用例Author a sortable list with code-behind pattern明确要求.razor负责标记、.razor.cs用partial class承载逻辑不得修改传入的[Parameter] Items而是在OnParametersSet中复制到私有字段后操作参见 eval.yaml。四、异步模式始终待在同步上下文上Blazor 的同步上下文sync context保证组件在单个线程上执行因此所有异步规则都源于这一点。完整规则见 async-programming-rules.md。4.1 逐条 await禁止原语所有异步操作都要await被丢弃的 Task 会静默丢失异常。以下原语在组件中全面禁用禁用写法原因Thread.Start/new Thread逃出同步上下文Task.Run卸载到线程池StateHasChanged会抛InvalidOperationException.Result/.Wait()阻塞同步上下文导致电路circuit死锁Task.ContinueWith延续可能在同步上下文之外运行ChannelT/BlockingCollectionT/ 并发集合同步上下文已保证单线程访问纯属多余开销// 错误Task.Run 逃出同步上下文StateHasChanged 抛异常 _ Task.Run(async () { var result await OrderService.SubmitAsync(order); StateHasChanged(); // InvalidOperationException! }); // 正确留在同步上下文上 private async Task ProcessOrder() { var result await OrderService.SubmitAsync(order); message result.Message; }同步上下文既已保证组件内单线程普通DictionaryK,V、ListT、QueueT就是安全的无需为组件内部状态引入并发集合。4.2 StateHasChanged 的使用纪律框架会在生命周期方法和事件处理器完成后自动重渲染日常无需手动调用StateHasChanged。只在两类场景调用场景一多次 await 之间的中间状态更新private async Task ProcessSteps() { status Step 1...; await Step1Async(); status Step 2...; StateHasChanged(); // 中间更新 await Step2Async(); }场景二外部事件计时器、C# 事件、WebSocket通过InvokeAsync派发private async void OnExternalEvent(object? sender, EventArgs e) { try { await InvokeAsync(() { count; StateHasChanged(); }); } catch (Exception ex) { await DispatchExceptionAsync(ex); } }InvokeAsync负责把代码调度回同步上下文从裸线程直接调用StateHasChanged会抛InvalidOperationException。外部事件处理器是 Blazor 中唯一适合async void的位置且必须await InvokeAsync并把错误路由到DispatchExceptionAsync这会激活错误边界并像生命周期异常一样记录日志。4.3 防抖DebounceTask.Delay CancellationTokenSource输入搜索框等场景需要“停止输入 300ms 后才触发搜索”规范做法是Task.Delay配合CancellationTokenSource新输入到来时取消旧的 CTS、创建新的 CTS然后等待延迟并执行实际工作。禁止使用System.Threading.Timer或System.Timers.Timer做防抖——它们逃出同步上下文且无法与组件生命周期自然对齐。private CancellationTokenSource? debounceCts; private void OnSearchInput(ChangeEventArgs e) { query e.Value?.ToString() ?? ; debounceCts?.Cancel(); debounceCts new CancellationTokenSource(); _ DebounceSearchAsync(debounceCts.Token); } private async Task DebounceSearchAsync(CancellationToken token) { try { await Task.Delay(300, token); results await ProductService.SearchAsync(query, token); } catch (OperationCanceledException) { // 被新的输入或组件释放取消——预期行为无需处理 } }评测用例Author a>protected override async Task OnInitializedAsync() { try { while (!cts.IsCancellationRequested) { unreadCount await NotificationService.GetUnreadCountAsync(cts.Token); await Task.Delay(TimeSpan.FromSeconds(30), cts.Token); } } catch (OperationCanceledException) { // 组件已释放停止轮询 } }对应的评测用例Author a real-time notification badge component允许 Polls usingTask.Delayin a loop orPeriodicTimer见 eval.yaml。4.5 长任务的替代方案需要让渲染器先绘制再继续用await Task.Yield()代替Task.Run大列表分块处理每处理 100 项StateHasChanged()await Task.Yield()一次保持 UI 响应不可分割的长查询用Task.WhenAny(queryTask, Task.Delay(1000))循环实现进度提示同步上下文无法改为 async 的 void 接口采用“fire-and-forget 内部 try/catch DispatchExceptionAsync”模式并在完成时手动StateHasChanged()框架不知道该 fire-and-forget 任务的存在不会自动重渲染。五、组件释放优先 IAsyncDisposable当组件拥有事件订阅、计时器、CancellationTokenSource或 JS interop 引用IJSObjectReference、DotNetObjectReferenceT时必须实现IAsyncDisposable而非IDisposable——它返回ValueTask同步与异步清理都适用。完整规则见 component-disposal.md。在DisposeAsync中完成三件事退订事件-——订阅在长生命周期对象上会泄漏组件本身取消 CTS——让所有在途异步操作优雅终止释放资源——计时器、JS 模块等。implements IAsyncDisposable inject NavigationManager Navigation code { private CancellationTokenSource cts new(); protected override void OnInitialized() Navigation.LocationChanged HandleLocationChanged; private void HandleLocationChanged(object? sender, LocationChangedEventArgs e) { } public ValueTask DisposeAsync() { Navigation.LocationChanged - HandleLocationChanged; cts.Cancel(); cts.Dispose(); return ValueTask.CompletedTask; } }关键纪律不要在DisposeAsync中调用StateHasChanged——渲染器正在拆解对生命周期方法中创建的字段做空检查——DisposeAsync可能先于OnInitializedAsync完成执行释放 JS 引用时捕获JSDisconnectedException——电路可能已断开不要捕获ObjectDisposedException来兜底——正确做法是用 CTS 取消让异步代码收到OperationCanceledException。评测用例的验收点包括 ImplementsIAsyncDisposableand cancels/disposes resources inDisposeAsync 以及 Cancels CTS inDisposeAsyncto stop polling见 eval.yaml 与 L201。六、组件拆分何时拆、怎么拆组件过大时按以下三种模式拆分完整示例见 breaking-down-components.md6.1 兄弟组件拆分Sibling Decomposition当组件内有两个互不共享状态与处理器的独立区块时各自提取为兄弟组件再由父组件组合!-- Card.razor组合兄弟组件 -- div classcard CardTitle TitleTitle OnPinOnPin / CardBody DescriptionDescription OnExpandOnExpand / /div6.2 列表项提取List-Item Extraction复杂的列表项模板提取为独立组件并在foreach循环中使用keyul classtask-list foreach (var task in Tasks) { TaskItem keytask.Id Tasktask OnToggleHandleToggle OnDeleteHandleDelete / } /ul6.3 级联上下文Cascading Context避免参数沿中间组件逐层钻取parameter drilling。让父组件级联自身或级联一个上下文对象子组件用[CascadingParameter]接收!-- TabSet.razor级联自身 -- CascadingValue Valuethis IsFixedtrue ul classnav nav-tabsChildContent/ul /CascadingValue当级联引用永不改变时标记IsFixedtrue避免不必要的重渲染应用级值主题、认证信息通过 DI 注册builder.Services.AddCascadingValue(sp new ThemeInfo { ... })。七、禁止清单Donts速查将 SKILL.md 的负面清单整理为可评审的检查项禁止原因/替代方案[Parameter]上用required/init运行时失败BL0007修改[Parameter]应在OnParametersSet复制到私有字段事件用Action/Func统一使用EventCallbackT防抖用Task.Run/.Result/.Wait()/ Timer死锁或逃出线程池内联style属性使用 CSS 类或data-*属性catch { throw; }用when守卫或直接让异常传播过度设计gold-plating未被要求的 ARIA、包裹 div、无障碍特性不要加_ InvokeAsync(...)吞掉异常改用async voidDispatchExceptionAsync八、适用范围与相邻技能边界该技能在 dotnet-blazor 插件版本 0.1.1描述为 Skills for Blazor development: component authoring, interactivity, and web application patterns中定位清晰其description明确划定了适用边界见 SKILL.md 头部 frontmatter适用编写不涉及 JS interop 的新组件、参数与EventCallback、RenderFragment插槽、生命周期OnInitializedAsync、OnParametersSet、异步模式、IAsyncDisposable、CancellationToken、CSS 隔离、code-behind不适用请转向同一插件下的相邻技能新建项目create-blazor-project、JS interop 与浏览器 APIuse-js-interop、表单与验证collect-user-input、预渲染问题support-prerendering、HTTP 数据获取模式fetch-and-send-data、无关组件间的状态协调coordinate-components。九、如何用仓库验证你的组件仓库为每种技能都配套了端到端评测。tests/dotnet-blazor/author-component/eval.yaml提供了 5 个评测刺激stimuli与对应验收项可直接当作“组件正确性的检查清单”使用数据加载搜索组件ProductSearch防抖搜索、四态覆盖、EventCallbackProduct通知父级、IAsyncDisposableCancellationToken、参数不改写多步向导CheckoutWizard / ShippingStep / PaymentStep父组件持有状态经[Parameter]下发、子组件经EventCallback上报、步骤拆分为独立组件文件、每次校验用新的 CTS 取消旧校验泛型数据表DataTabletypeparam、RenderFragmentTItem行模板、可覆盖的空状态模板、key高效 diff实时通知徽标NotificationBadge事件订阅 退订、InvokeAsync调度、30 秒轮询兜底、DispatchExceptionAsync错误路由可排序列表SortableListcode-behind 模式、partial class、参数复制到私有字段、EventCallback上报重排结果。把这五类用例与本文的规则对照即可对任何新增.razor组件进行系统性代码评审——这既是 author-component 技能的训练目标也是团队评审 Blazor 组件的可复用基线。【免费下载链接】skillsRepository for skills to assist AI coding agents with .NET and C#项目地址: https://gitcode.com/GitHub_Trending/skills17/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Blazor 组件架构编写规范：基于 dotnet-blazor 插件 author-component 技能的参数、事件、异步与释放实战指南
Blazor 组件架构编写规范基于 dotnet-blazor 插件 author-component 技能的参数、事件、异步与释放实战指南【免费下载链接】skillsRepository for skills to assist AI coding agents with .NET and C#项目地址: https://gitcode.com/GitHub_Trending/skills17/skills本篇技术指南以skills17/skills仓库中 author-component 技能 为核心系统讲解如何编写架构正确的 Blazor 组件.razor文件包括[Parameter]与EventCallbackT的数据流向约定、RenderFragment插槽与泛型模板、组件生命周期与IAsyncDisposable释放模式、以及不脱离同步上下文的异步编程纪律。读完本文你将掌握一套可落地、可评审、可被测试验证的 Blazor 组件编写规范并了解该技能在仓库中的测试覆盖方式见 author-component 评测用例。一、核心规则数据向下流事件向上流作者组件的第一条铁律是单向数据流数据通过[Parameter]向下传递给子组件事件通过EventCallbackT向上通知父组件绝不要使用Action/Func作为事件参数类型。其余核心规则摘自 SKILL.md永不修改[Parameter]属性需要变更时在OnParametersSet中复制到私有字段再对该字段操作参数声明写法固定[Parameter] public T Prop { get; set; }禁止使用required或init访问器——它们会在运行时触发 BL0007 诊断错误必填参数使用[EditorRequired]标记让调用方在 IDE 中得到提示覆盖全部状态loading加载中、empty空、loaded已加载、error出错四种状态都要有对应的if/else分支循环中的重复元素加key让 diff 算法高效复用元素、避免不必要的重渲染集合参数使用IReadOnlyListT而非IEnumerableT——后者可能被延迟求值多次遍历导致性能与一致性问题。这些规则在仓库的评测用例中被逐一验证tests/dotnet-blazor/author-component/eval.yaml的 rubric 明确要求 Uses a private field for mutable state — does not mutate[Parameter]properties将可变状态放入私有字段不修改[Parameter]以及 Parameters are public auto-properties with{ get; set; }。二、RenderFragment 插槽与泛型组件RenderFragment是 Blazor 的“渲染委托”用于向组件传入一段可渲染的标记是实现模板化templated组件的核心机制[Parameter] public RenderFragment? ChildContent { get; set; } // 子内容插槽 [Parameter] public RenderFragmentTItem? RowTemplate { get; set; } // 泛型行模板ChildContent是约定俗成的默认插槽父组件写在标签内部的内容会渲染到这里RenderFragmentTItem是泛型模板接收一个TItem类型的上下文在模板中用context访问适合做表格行、列表项等自定义渲染需要让组件适用于任意类型时配合typeparam TItem声明泛型组件。泛型数据表组件示例typeparam TItem table theadHeaderTemplate/thead tbody foreach (var item in Items) { tr keyitem onclick() OnRowClick.InvokeAsync(item) RowTemplate(item) /tr } /tbody /table code { [Parameter, EditorRequired] public IReadOnlyListTItem Items { get; set; } []; [Parameter] public RenderFragment? HeaderTemplate { get; set; } [Parameter] public RenderFragmentTItem? RowTemplate { get; set; } [Parameter] public EventCallbackTItem OnRowClick { get; set; } }评测用例Author a generic data table component对此的验收标准是使用typeparamRowTemplate必须是RenderFragmentTItem而非普通RenderFragment或委托HeaderTemplate/EmptyTemplate为非泛型RenderFragment行循环中使用key点击事件用EventCallbackTItemItems参数类型为IReadOnlyListTItem参见 eval.yaml。三、文件组织模式单文件与 code-behind根据逻辑复杂度选择文件组织方式SKILL.md单文件模式.razor文件内直接使用code块适用于逻辑约50 行以内的组件标记与逻辑同处一屏阅读最直观code-behind 模式.razor.razor.cs成对出现.razor.cs中使用partial class承载逻辑适用于逻辑超过约 50 行的组件让标记与业务逻辑分离、便于单元测试。code-behind 的最小形态// SortableList.razor.cs public partial class SortableListTItem { private ListTItem localItems []; [Parameter, EditorRequired] public IReadOnlyListTItem Items { get; set; } []; [Parameter] public RenderFragmentTItem? ItemTemplate { get; set; } [Parameter] public EventCallbackIReadOnlyListTItem OnOrderChanged { get; set; } protected override void OnParametersSet() { // 复制参数到私有字段绝不直接修改 [Parameter] localItems Items.ToList(); } }评测用例Author a sortable list with code-behind pattern明确要求.razor负责标记、.razor.cs用partial class承载逻辑不得修改传入的[Parameter] Items而是在OnParametersSet中复制到私有字段后操作参见 eval.yaml。四、异步模式始终待在同步上下文上Blazor 的同步上下文sync context保证组件在单个线程上执行因此所有异步规则都源于这一点。完整规则见 async-programming-rules.md。4.1 逐条 await禁止原语所有异步操作都要await被丢弃的 Task 会静默丢失异常。以下原语在组件中全面禁用禁用写法原因Thread.Start/new Thread逃出同步上下文Task.Run卸载到线程池StateHasChanged会抛InvalidOperationException.Result/.Wait()阻塞同步上下文导致电路circuit死锁Task.ContinueWith延续可能在同步上下文之外运行ChannelT/BlockingCollectionT/ 并发集合同步上下文已保证单线程访问纯属多余开销// 错误Task.Run 逃出同步上下文StateHasChanged 抛异常 _ Task.Run(async () { var result await OrderService.SubmitAsync(order); StateHasChanged(); // InvalidOperationException! }); // 正确留在同步上下文上 private async Task ProcessOrder() { var result await OrderService.SubmitAsync(order); message result.Message; }同步上下文既已保证组件内单线程普通DictionaryK,V、ListT、QueueT就是安全的无需为组件内部状态引入并发集合。4.2 StateHasChanged 的使用纪律框架会在生命周期方法和事件处理器完成后自动重渲染日常无需手动调用StateHasChanged。只在两类场景调用场景一多次 await 之间的中间状态更新private async Task ProcessSteps() { status Step 1...; await Step1Async(); status Step 2...; StateHasChanged(); // 中间更新 await Step2Async(); }场景二外部事件计时器、C# 事件、WebSocket通过InvokeAsync派发private async void OnExternalEvent(object? sender, EventArgs e) { try { await InvokeAsync(() { count; StateHasChanged(); }); } catch (Exception ex) { await DispatchExceptionAsync(ex); } }InvokeAsync负责把代码调度回同步上下文从裸线程直接调用StateHasChanged会抛InvalidOperationException。外部事件处理器是 Blazor 中唯一适合async void的位置且必须await InvokeAsync并把错误路由到DispatchExceptionAsync这会激活错误边界并像生命周期异常一样记录日志。4.3 防抖DebounceTask.Delay CancellationTokenSource输入搜索框等场景需要“停止输入 300ms 后才触发搜索”规范做法是Task.Delay配合CancellationTokenSource新输入到来时取消旧的 CTS、创建新的 CTS然后等待延迟并执行实际工作。禁止使用System.Threading.Timer或System.Timers.Timer做防抖——它们逃出同步上下文且无法与组件生命周期自然对齐。private CancellationTokenSource? debounceCts; private void OnSearchInput(ChangeEventArgs e) { query e.Value?.ToString() ?? ; debounceCts?.Cancel(); debounceCts new CancellationTokenSource(); _ DebounceSearchAsync(debounceCts.Token); } private async Task DebounceSearchAsync(CancellationToken token) { try { await Task.Delay(300, token); results await ProductService.SearchAsync(query, token); } catch (OperationCanceledException) { // 被新的输入或组件释放取消——预期行为无需处理 } }评测用例Author a>protected override async Task OnInitializedAsync() { try { while (!cts.IsCancellationRequested) { unreadCount await NotificationService.GetUnreadCountAsync(cts.Token); await Task.Delay(TimeSpan.FromSeconds(30), cts.Token); } } catch (OperationCanceledException) { // 组件已释放停止轮询 } }对应的评测用例Author a real-time notification badge component允许 Polls usingTask.Delayin a loop orPeriodicTimer见 eval.yaml。4.5 长任务的替代方案需要让渲染器先绘制再继续用await Task.Yield()代替Task.Run大列表分块处理每处理 100 项StateHasChanged()await Task.Yield()一次保持 UI 响应不可分割的长查询用Task.WhenAny(queryTask, Task.Delay(1000))循环实现进度提示同步上下文无法改为 async 的 void 接口采用“fire-and-forget 内部 try/catch DispatchExceptionAsync”模式并在完成时手动StateHasChanged()框架不知道该 fire-and-forget 任务的存在不会自动重渲染。五、组件释放优先 IAsyncDisposable当组件拥有事件订阅、计时器、CancellationTokenSource或 JS interop 引用IJSObjectReference、DotNetObjectReferenceT时必须实现IAsyncDisposable而非IDisposable——它返回ValueTask同步与异步清理都适用。完整规则见 component-disposal.md。在DisposeAsync中完成三件事退订事件-——订阅在长生命周期对象上会泄漏组件本身取消 CTS——让所有在途异步操作优雅终止释放资源——计时器、JS 模块等。implements IAsyncDisposable inject NavigationManager Navigation code { private CancellationTokenSource cts new(); protected override void OnInitialized() Navigation.LocationChanged HandleLocationChanged; private void HandleLocationChanged(object? sender, LocationChangedEventArgs e) { } public ValueTask DisposeAsync() { Navigation.LocationChanged - HandleLocationChanged; cts.Cancel(); cts.Dispose(); return ValueTask.CompletedTask; } }关键纪律不要在DisposeAsync中调用StateHasChanged——渲染器正在拆解对生命周期方法中创建的字段做空检查——DisposeAsync可能先于OnInitializedAsync完成执行释放 JS 引用时捕获JSDisconnectedException——电路可能已断开不要捕获ObjectDisposedException来兜底——正确做法是用 CTS 取消让异步代码收到OperationCanceledException。评测用例的验收点包括 ImplementsIAsyncDisposableand cancels/disposes resources inDisposeAsync 以及 Cancels CTS inDisposeAsyncto stop polling见 eval.yaml 与 L201。六、组件拆分何时拆、怎么拆组件过大时按以下三种模式拆分完整示例见 breaking-down-components.md6.1 兄弟组件拆分Sibling Decomposition当组件内有两个互不共享状态与处理器的独立区块时各自提取为兄弟组件再由父组件组合!-- Card.razor组合兄弟组件 -- div classcard CardTitle TitleTitle OnPinOnPin / CardBody DescriptionDescription OnExpandOnExpand / /div6.2 列表项提取List-Item Extraction复杂的列表项模板提取为独立组件并在foreach循环中使用keyul classtask-list foreach (var task in Tasks) { TaskItem keytask.Id Tasktask OnToggleHandleToggle OnDeleteHandleDelete / } /ul6.3 级联上下文Cascading Context避免参数沿中间组件逐层钻取parameter drilling。让父组件级联自身或级联一个上下文对象子组件用[CascadingParameter]接收!-- TabSet.razor级联自身 -- CascadingValue Valuethis IsFixedtrue ul classnav nav-tabsChildContent/ul /CascadingValue当级联引用永不改变时标记IsFixedtrue避免不必要的重渲染应用级值主题、认证信息通过 DI 注册builder.Services.AddCascadingValue(sp new ThemeInfo { ... })。七、禁止清单Donts速查将 SKILL.md 的负面清单整理为可评审的检查项禁止原因/替代方案[Parameter]上用required/init运行时失败BL0007修改[Parameter]应在OnParametersSet复制到私有字段事件用Action/Func统一使用EventCallbackT防抖用Task.Run/.Result/.Wait()/ Timer死锁或逃出线程池内联style属性使用 CSS 类或data-*属性catch { throw; }用when守卫或直接让异常传播过度设计gold-plating未被要求的 ARIA、包裹 div、无障碍特性不要加_ InvokeAsync(...)吞掉异常改用async voidDispatchExceptionAsync八、适用范围与相邻技能边界该技能在 dotnet-blazor 插件版本 0.1.1描述为 Skills for Blazor development: component authoring, interactivity, and web application patterns中定位清晰其description明确划定了适用边界见 SKILL.md 头部 frontmatter适用编写不涉及 JS interop 的新组件、参数与EventCallback、RenderFragment插槽、生命周期OnInitializedAsync、OnParametersSet、异步模式、IAsyncDisposable、CancellationToken、CSS 隔离、code-behind不适用请转向同一插件下的相邻技能新建项目create-blazor-project、JS interop 与浏览器 APIuse-js-interop、表单与验证collect-user-input、预渲染问题support-prerendering、HTTP 数据获取模式fetch-and-send-data、无关组件间的状态协调coordinate-components。九、如何用仓库验证你的组件仓库为每种技能都配套了端到端评测。tests/dotnet-blazor/author-component/eval.yaml提供了 5 个评测刺激stimuli与对应验收项可直接当作“组件正确性的检查清单”使用数据加载搜索组件ProductSearch防抖搜索、四态覆盖、EventCallbackProduct通知父级、IAsyncDisposableCancellationToken、参数不改写多步向导CheckoutWizard / ShippingStep / PaymentStep父组件持有状态经[Parameter]下发、子组件经EventCallback上报、步骤拆分为独立组件文件、每次校验用新的 CTS 取消旧校验泛型数据表DataTabletypeparam、RenderFragmentTItem行模板、可覆盖的空状态模板、key高效 diff实时通知徽标NotificationBadge事件订阅 退订、InvokeAsync调度、30 秒轮询兜底、DispatchExceptionAsync错误路由可排序列表SortableListcode-behind 模式、partial class、参数复制到私有字段、EventCallback上报重排结果。把这五类用例与本文的规则对照即可对任何新增.razor组件进行系统性代码评审——这既是 author-component 技能的训练目标也是团队评审 Blazor 组件的可复用基线。【免费下载链接】skillsRepository for skills to assist AI coding agents with .NET and C#项目地址: https://gitcode.com/GitHub_Trending/skills17/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考