在实际项目中，总是可以遇到“组件”。它不是基本组件，但会经常重用它。开发MASA auth时，还包装了几个组件。有一个组件（GroupBox）简单地定义了CSS样式和接口包装，以及具有组件的某些内部逻辑的组件（ColorGroup）。本文将演示如何封装一个下面显示的ColorGroup组件，将MitemGroup转换为ColorGroup，然后单击“选择预设的颜色值”。
Masa Blazor提供丰富的组件（仍在增加），并且长度仅限于我经常使用的某些组件
BlazorComponent是一个基础组件框架，仅提供无需样式定义的功能逻辑。Masa Blazor是实现材料设计样式标准的悬崖基础知识。如下图所示，您可以根据蚂蚁设计风格的标准实现一组Ant Design Blazor（尽管您已经拥有它，如果您想这样做，可以完全实施）。
首先确保已安装了MASA模板（避免手动参考MASA爆炸）。
创建一个简单的MASA Blazor Server应用程序：
Glazor组件包装非常简单。您不需要像Vue一样注册。创建了一个新的XXX.RAZOR组件来实现XXX组件的封装。稍微复杂的是，需要组件的内部逻辑，并且对用户的定义定义（不同的使用方案）（不同的使用方案）接口（参数），即增加xxx.razor.cs和xxx.razor.css根据需求文件。
找到所需的组件来组装对熟悉各种组件函数的前提的预期影响。在这里，我使用mitemgroup，mcard和mbutton来实现colorGroup的效果。MiteMgroup.MiteMgroup确实具有颜色分组，并提供了每个激活功能。MASK是一个掩码。在未选择颜色之前层以达到模糊效应。
您还可以选择具有对比度颜色的圆形框架徽标的状态。相关CSS参考：https：//www.dailytoolz.com/css-border-radius-tenerator/
创建一个新的ColorGroup.Razor文件，代码如下：
修改index.blazor文件以添加colorGroup以使用代码，masa.blazor.custom.shaased.presets是一种自定义组件路径，即，名称空间：
运行代码，请参阅三种不同的颜色类型：
Masa Blazor是Vueetify的大发。除M-Color-Group外，所有类都是Vuetify提供的类样式。
您可以通过第一部分看到包装组件的组件面（接口），但是此面是“死”。根据不同的使用情况，它不能显示出不同的效果。对于ColorGroupDefine所显示的颜色值。在jlazor中，参数通过[参数]特征声明，叙事代码中的死亡值通过参数通过参数。MitemGroup的classGroup属性。在同一时间，添加组件的lial（组件逻辑），然后单击不同的颜色按钮以更新该值。
创建一个新的colorgroup.razor.cs文件，添加以下代码：
可以看出上面的代码，值参数具有与之相对应的Valuechangechangecemechangechangegangechangecephangecephangecephangecephangecephang。目的是能够在组件之外接收值的值。通过调用ValueChanged.invokeasync通知，该组件的外部价值已更新。
应该注意的是，应尽可能减少参数的定义。太多的参数将增加组件的开销。reduce参数传输并可以自定义参数类（本文的示例是单独定义多个参数）。
同时，在colorgroup.razor文件中更新代码，循环颜色属性显示子元素，并添加mbutton的点击以更新值：
目前，ColorGroup的代码已更改为以下代码。您可以灵活地指定颜色组数据以及ColorGroup的类和样式：
在第一部分的末尾，除m彩色组外的所有类都是Vuetify提供的类样式，M-color group？new colorgroup.razor.css file，colorgroup.razor.css文件中的CSS将仅限于colorgroup.razor component.componty.ine的其他组件。增加colorgroup.razor.css，但只想感觉包装组件的现有样式足以阅读，并且该类仅用于外部用途，以促进CSS样式的重写，并且不能定义任何定义。
有关更多隔离风格，请参阅官方文档。
到目前为止，可以说自定义的colorGroup组件已经足够了，但是还不够。由于表格是单个的，如果要在颜色选择按钮之后添加文本或图片？这引入了另一个概念：插槽。插槽（插槽）（插槽）是VUE中的名称，Vuetify组件提供了许多插槽，例如文本输入框中的前后凹槽以及输入框外的前后凹槽（默认）。Masa Blazor还意识到了插槽功能，这使我们更容易定义和扩展组件。
Blazor更愿意为C＃开发人员调用模板或内容，并通过RenderFragment实现插槽的效果。如果您的组件需要定义子元素，以捕获子续签的内容，则需要定义一个称为育儿类型的组件参数。
将渲染属性属性添加到colorGroup.razor.cs文件中以定义每一端的附加插槽，并定义字符串参数以接收当前的颜色值。
渲染范围定义一个参数组件，默认情况下使用参数值。更多内容是指官方文档
colorGroup.Razor文件定义插槽位置
最终效果如下：
在确保功能和美丽的同时，组件还必须确保性能。以下仅列出了一些更常规的优化方法。
合理地重写应剥夺方法以避免重新出现高成本。构成官方网站代码自己体验它，也就是说，当满足某些条件时，它将得到重新施加：
减少不必要的状态法呼叫。默认情况下，组件从componentbase继承。调用组件的事件处理程序后，自动调用了stateHaschanged。对于某些事件处理程序可能无法修改组件状态的状态，该应用程序可以使用iHandleeventInterface来控制大火事件的行为。示例代码，请参阅官方文档。
首先，我们必须了解组件的生命周期，尤其是onitializatization（在组件接收到setParameterSasync中的初始参数之后），onparametersset（接收呼叫更改时）和onfterrender（组件完成后）。上述方法执行两次或更高（render-mode =“ serverperendered”）。组件初始化的逻辑在每个生命周期方法中合理地分布。最常见的是AnfterRender方法。当Firstrender为True时，JS或加载数据：
派生的生命周期：
重复重复呈现的逻辑作为呈现范围，可以将其重复使用以无需每个组件的数量而重复使用逻辑。缺点是重复使用呈现效果段缺乏组件边界，并且不能分别刷新。
创建lambda表达式过多地托付了大火，可能会导致性能差，例如为每个按钮组的委员会分配佣金。表达式可以委托给行动以减少开销的分配。
组件实现IDisposable或iAsyncdisposable接口，从UI删除时将发布非固定资源和事件取消操作。
组件不需要同时实现IDISPOSABLE和IASYNCDISPOSPOS。如果两者都已实现，则该框架只是异步负载。
更多内容参考：https：//docs.microsoft.com/zh-cn/aspnet/core/blazor/performance？view = aspnetcore-6.0＃define- RenderFragments-code
这里只有一个非常简单的颜色组示例是一个非常简单的示例。当然，您还可以使此组件“复杂”。实际上，该组件的包装不像想象的那样复杂。除了标准组件）。
示例项目，更多内容是指MASA Blazor预设组件的实现。
masa.buildingblocks：https：//github.com/masastack/masa.buildingblocks
masa.contrib：https：//github.com/masastack/masa.contrib
masa.utils：https：//github.com/masastack/masa.utils
masa.eshop：https：//github.com/masalabs/masa.eshop
masa.blazor：https：//github.com/blazorcomponent/masa.blazor
如果您对我们的MASA框架感兴趣，无论是代码贡献，使用和提及问题，请与我们联系