blazor组件是以.razor为扩展名的razor文件,编译为继承componentbase的类,支持生命周期、参数绑定与状态刷新;需遵循命名规范、单根元素、@page路由声明及[parameter]标记传参规则。

Blazor组件本质是 .razor 文件
Blazor 组件不是类库或控件容器,而是以 .razor 为扩展名的文件,由 Razor 语法(HTML + C#)组成。它会被编译成一个继承自 ComponentBase 的类,因此天然支持生命周期方法、参数绑定和状态刷新。
创建时直接在 Pages 或 Shared 目录下新建 .razor 文件即可,无需手动注册或导出——只要路径可访问、命名符合 C# 标识符规则,就能被 @page 或 @rendermode 引用。
- 文件名首字母大写(如
Counter.razor),否则组件标签名会不合法(<counter></counter>不被识别) - 组件内不能有多个根 HTML 元素(除非用
<div> 或 <code><section></section>包裹),否则编译报错Found multiple root elements - 若需路由访问,顶部必须加
@page "/counter";若仅作复用子组件,可省略 - 必需参数加
[Parameter],可选参数加[Parameter]+ 默认值(如public string Title { get; set; } = "无标题";) - 支持
EventCallback<t></t>类型参数接收事件回调,比如[Parameter] public EventCallback<string> OnClick { get; set; }</string> - 不要在
[Parameter]属性的 setter 中写业务逻辑——它可能被多次调用,且不保证执行顺序;改用OnParametersSet生命周期方法 - 父组件用
<cascadingvalue value="@theme">...</cascadingvalue>提供值 - 子组件用
[CascadingParameter] public Theme Theme { get; set; }接收(类型必须匹配) - 若需响应值变更,推荐封装成
CascadingValue<t></t>并配合INotifyPropertyChanged实现 - 避免滥用:每个
CascadingParameter都增加组件耦合度,调试时容易丢失数据流向 - JS 函数必须全局声明(挂载到
window),且命名避开保留字(如init、load) - 使用
@ref获取元素引用时,要在OnAfterRender中检查firstRender,确保只在首次渲染后操作 DOM - 服务注入(如
@inject HttpClient Http)在组件中完全可用,但注意 Blazor Server 下HttpClient实例是共享的,别手动Dispose
@code 块里定义参数要用 [Parameter] 特性
Blazor 不通过构造函数传参,而是靠属性 + [Parameter] 标记实现父组件向子组件传值。这个特性告诉框架:“这个属性的值将由外部决定,且可能随渲染更新”。
常见错误是把参数写成普通属性:public string Title { get; set; } = "默认"; —— 这样父组件传 Title="新标题" 完全无效,因为没标记为参数,也不会触发重新渲染。
组件间通信:父子用 Parameter/EventCallback,跨层级用 CascadingParameter
父子通信最轻量也最常用,但一旦涉及多层嵌套(比如 Layout → Page → Card → Button),逐层透传参数就变得脆弱。这时 CascadingParameter 是更稳定的方案。
本文档主要讲述的是Sencha touch 开发指南;主要介绍如何使用Sencha Touch为手持设备进行应用开发,主要是针对iPhone这样的高端手机,我们会通过一个详细的例子来介绍整个开发的流程。 Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app,用户界面组件和数据管理全部基于HTML5和CSS3的web标准,全面兼容Android和Apple iOS。希望本文档会给有需要的朋友带来帮助;感兴趣的
它像 React 的 Context,让某个值“穿透”中间所有组件,直达任意后代。注意它不是响应式广播机制——值变化后,后代组件不会自动重渲染,除非你手动调用 StateHasChanged() 或配合 NotifyPropertyChanged 模式。
组件复用要注意 render mode 和 JS 互操作边界
Blazor Server 和 WebAssembly 在组件行为上差异不大,但启用 InteractiveServer 或 InteractiveWebAssembly 后,组件才真正具备交互能力。如果一个组件只用于静态展示(比如 Markdown 渲染器),用 @rendermode Static 能显著减少网络传输和服务器压力。
另一个关键点是 JS 互操作:组件内调用 IJSRuntime 必须确保 JS 已加载、且生命周期匹配。比如在 OnInitializedAsync 里调用 InvokeVoidAsync("focusInput"),但 DOM 元素尚未挂载,就会静默失败。
组件越小、职责越单一,越容易测试和复用;但过度拆分会导致大量 Parameter 传递和生命周期协调成本。实际开发中,优先从页面级功能块开始抽象,而不是一上来就切碎成原子组件。









