皮皮网

1.blazor组件生命周期
2.一套基于 Ant Design 和 Blazor 的源码开源企业级组件库
3.如何高效地查看开源项目源码？
4.webrtc使用netcore
5.微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor
6.如何用 Blazor 实现 Ant Design 组件库（二）

blazor组件生命周期

       翻译自： Component lifecycles

       blazor组件包含一组虚方法，我们可通过重写这些方法来影响应用行为。源码这些方法会在组件生命周期的源码不同阶段执行。以下图展示了生命周期钩子方法的源码执行流程：

       SetParametersAsync 方法在每次父组件渲染时执行。

       传递给组件的源码参数被包含在ParameterView结构体中。这是源码bootstrap4 源码根据传递到组件的状态对服务器进行异步调用的好时机。

       原文：Parameters that were passed into the component are contained in a ParameterView. This 源码is a good point at which to make asynchronous calls to a server (for example) based on the state passed into the component.

       在重写的SetParametersAsync中调用base.SetParametersAsync(parameters)时，组件的源码[Parameter]修饰属性会被赋值。

       此方法也适合为参数分配默认值，源码更多细节请参考 Optional route parameters。源码

       OnInitialized / OnInitializedAsync 方法在为组件的源码[Parameter]属性赋值后执行。与SetParametersAsync类似，源码但可以使用组件状态。源码

       这些方法仅在组件创建时执行一次。源码如果父组件稍后更改了组件的源码参数，则这些方法会被跳过。

       注意：当组件是一个@page时，且Blazor应用在新的URL下重新渲染此@page，Blazor会重用此@page。因为它是同一个对象，Blazor不会调用IDisposable.Dispose方法，也不会执行OnInitialized方法。

       这句话我就没有理解明白，我做了一个实验，一个@page组件有两个路由，一个是/page-one，另一个是/pageone，那么这两个路由来回跳转的话不单单不会执行OnInitialized，其他的方法也不会执行啊。

       OnParametersSet / OnParametersSetAsync 方法在组件的新实例中，在OnInitializedAsync之后立即执行。如果它是一个已存在的组件，因为父组件正在重新呈现，所以OnInitialized*方法会被跳过，而这个方法将在SetParametersAsync之后立即执行。

       StateHasChanged 方法会标记组件即将被渲染。

       当组件希望通知Blazor发生了可能导致呈现输出不同的更改时，将调用此方法。例如，在一个Clock组件中，我们可以设置一个循环的1秒计时器，然后执行StateHasChanged以重新呈现正确的时间。

       另一个用途是指导Blazor通过异步方法部分地执行重渲染。

       ShouldRender 方法可以通过返回false来阻止组件的RenderTree被重新计算。注意，在第一次创建和呈现组件时，不会执行此方法。

       例如，上学吧网站源码当我们知道我们的状态自上次渲染以来没有改变，或者只是以一种会导致相同输出被渲染的方式改变时，指示Blazor不要经过BuildRenderTree过程可以节省处理时间并改善用户体验。

       这个方法不会在组件第一次被渲染的时候执行

       BuildRenderTree 方法将应呈现给用户的内容放入内存中（虚拟DOM，即RenderTree）。

       上述代码中，向渲染树添加一个h1，内容为“People”。然后它将为people变量中的每个currentPerson局部变量创建一个ShowPersonDetails的新实例。

       如果我们的组件在稍后的时间重新渲染，在people中添加一个额外的项，那么ShowPersonDetails组件的一个新实例将被创建并添加到组件的RenderTree中。如果人的条目减少了，那么之前创建的一些ShowPersonDetails组件实例将从组件的RenderTree中被丢弃，如果它们实现了IDisposable, Dispose()将对它们执行。

       注意：为了更有效地执行渲染，当在一个循环的上下文中执行渲染时，任何时候都应该添加一个 @key 指令

       OnAfterRender / OnAfterRenderAsync 这最后两个方法在Blazor重新生成组件的RenderTree时执行。这可能是由于组件的父组件重新呈现，用户与组件交互（例如鼠标点击），或者组件执行它的StateHasChanged方法来调用重新呈现的结果。

       这些方法只有一个名为firstRender的参数。只有在当前组件上第一次调用该方法时，该参数才为true，此后它将始终为false。在需要附加组件连接（例如，通过JavaScript）的情况下，知道这是第一次呈现是很有用的。

       只有在OnAfterRender方法执行之后，才可以安全地使用通过@ref指令设置的对组件的引用。

       同样的，直到OnAfterRender方法已经执行firstRender设置为true，才可以安全地使用任何通过@ref指令引用的HTML元素集。

       Dispose 尽管这不是严格意义上的ComponentBase生命周期方法之一，但如果一个组件实现了IDisposable，那么一旦该组件从其父渲染树中移除，Blazor就会执行Dispose。为了实现IDisposable，我们需要在razor文件中添加@implements IDisposable。

       Awaiting within Async lifecycle methods/在异步的生命周期方法中等待

       值得注意的是，Blazor将尽可能快地触发渲染，而不是等待长时间运行的异步方法完成后才能呈现组件。

       这使得组件能够在执行后台任务（如从服务器检索数据）时为用户呈现内容。

       单个方法的等待行为SetParametersAsync

       注意：如果重写了该方法，基类的SetParametersAsync方法必须在方法中的任何await指令之前执行，否则将抛出InvalidOperationException。

       OnInitializedAsyncOnParametersSetAsyncOnAfterRenderAsync

       （记住上述逻辑的k线标价源码一个）简单的规则是SetParametersAsync是唯一不能通过等待任务挂起生命周期进程的方法（观察SetParametersAsync的源码会发现，这个方法中根本就没有await任何东西，所以。。。）。

       所有其他异步方法都可以挂起生命周期进程，直到执行退出该方法，而第一个await将导致通过BuildRenderTree进行渲染，以防止用户不得不等待查看更新。

       OnRenderAsync可能看起来有些异常，因为它在两种情况下（第一次await时和退出方法时都没有什么动作）都不执行进一步的操作。如果我们考虑到渲染是执行链的最终目标这一事实，那么我们可以将渲染视作是执行链的最终结果，而不是什么都不做。至于在await上渲染，如果需要，那么程序员必须通过调用StateHasChanged来显式地完成（这个方法中调用StateHasChanged，我实在想不出什么场景能够做这样的操作，关键是容易出现渲染无限循环），否则OnAfterRenderAsync中将导致一个无限循环。

       OnAfterRenderAsync这个方法在ComponentBase的源码中它直接了Task.CompletedTask

       异步方法和多个await

       在async方法中，Blazor执行的代码只会在第一次等待时执行。随后的await不会导致多个渲染。例如

       上述例子是原文中的，可能并不好懂，我们来写一个更好懂的：

       在上述代码中，如果我没有添加任何StateHasChanged()的话，那么在整个方法结束时页面上会输出_count的值是3，但是中间的变化过程会被忽略掉。

       如果我们想要在额外的点上呈现，那么我们必须在所有额外的await语句之前调用StateHasChanged。

       有关如何在同一组件上运行不同线程时安全工作的更多信息，请参阅多线程呈现一节。Multi-threaded rendering.

一套基于 Ant Design 和 Blazor 的开源企业级组件库

       Ant Design Blazor是一套开源的、基于Ant Design和Blazor的企业级组件库，采用MIT License，旨在为开发者提供免费且具有Ant Design风格的组件选择。

       Blazor是一种以.NET和Razor为基础的新兴Web框架，它利用最新的Web技术和.NET框架的优势，通过C#编写Web应用，大幅提升了开发效率与用户体验，同时提高了代码的可维护性。

       对于使用Ant Design风格的开发者，Ant Design Blazor是一个理想的选择。它结合了Blazor的现代Web开发功能和Ant Design的视觉设计，提供了丰富的组件库。

       如果你对Blazor和Ant Design风格感兴趣，小白码农源码Ant Design Blazor组件库是值得一试的。通过访问项目源码地址，你可以深入了解各个组件的功能和用法。

       该项目已收录于C#/.NET/.NET Core优秀项目和框架精选中。关注此精选页面，可以让你随时获取C#、.NET和.NET Core领域的最新动态与最佳实践，优化开发过程。

       如果你发现了优秀的项目或框架，欢迎积极参与，通过提交PR推荐或自荐，帮助提升这些项目和框架的可见度，共同促进社区的发展。

如何高效地查看开源项目源码？

       在探索开源项目的世界里，Blazor开发者们常被源码的迷宫所吸引。看似神秘，实则有迹可循。正确地解读源码不仅能解决难题，还能提升技能。以下是几个关键步骤，助你高效开启源码探索之旅：

入门指南：带着问题的指南针，避免无目的的翻阅。明确你要寻找的答案，然后有针对性地搜索。

常见误区：忽视Visual Studio的强大工具，直接在线浏览或简单文本编辑？这可是大错特错。学会利用五大神器：转到定义、实现、查找引用、调用堆栈和解决方案搜索，它们能带你穿越代码丛林。

实例演示：假设你对路由机制好奇，从Program.cs文件开始，通过命名空间和关键词，就像猎人追踪猎物一样，找到你的组件所在。

       源码阅读不仅仅是浏览，更是一场策略游戏。不是每个人都需要深入研究，但掌握方法可以让你事半功倍。比如，当你在解决方案管理器中搜索"Router"，入口点就清晰可见。

       深入探索：

逻辑推理：通过功能推断，如OnAfterRenderAsync可能与路由有关，用F调试来验证你的假设。

细节洞察：逐行分析代码，lucence 落盘源码查找可能的处理组件的逻辑。Handler可能是路由处理的关键，通过构造方法找到线索。

揭示真相：发现目标，关注路由模板，它是通过RouteAttribute在组件类型上标注的。

       提升技巧：

       大胆猜测，然后验证

       换位思考，理解命名背后的逻辑

       英语阅读能力的提升不容忽视

       多用F调试，少依赖全局搜索，它能提供更精确的信息

       特殊情况下，全局搜索也能派上用场，但请确保它不是首选

       虽然初次探索可能略显困难，但随着经验的积累，你会发现大部分问题都能通过这种方法解决。即使是简单的示例，也能揭示源码阅读的价值。面对复杂项目，虽然过程繁琐，但比起漫无目的地搜索，这种方法无疑更具效率和深度。

       记住，每个开发者都有自己的学习曲线，掌握这些技巧，你也能在开源世界中游刃有余。祝你在开源项目源码的探索中收获满满！

webrtc使用netcore

       WebRTC 是一种实现浏览器对等通信的技术，需要在前端和后端实现。而 .NET Core 是用于开发跨平台应用程序的框架。如果要将 WebRTC 应用到 .NET Core 中，需要进行以下工作：

       1. 在后端实现 WebSocket 协议：WebRTC 需要通过 WebSocket 进行信令传输，可以使用 ASP.NET Core SignalR 框架来实现 WebSocket。

       2. 实现 STUN 和 TURN 服务：WebRTC 中需要使用 STUN 和 TURN 服务来穿透 NAT 和防火墙，可以使用 C# 等语言开发 STUN 或 TURN 服务器。

       3. 使用 WebRTC 通信协议：WebRTC 基于 RTP/RTCP 协议进行音视频流传输，在 .NET Core 上也需要实现该协议。

       4. 使用 WebRTC 库：为了简化 WebRTC 的开发，可以使用第三方 WebRTC 库，例如 Google 的 libwebrtc。这些库提供了 API 接口和示例代码，便于在后端实现 WebRTC 功能。

       éœ€è¦æ³¨æ„çš„是，WebRTC 在前端和后端都涉及到很多的技术细节，需要丰富的经验和技能才能进行开发。因此，如果您没有相关的经验和技能，建议寻找专业的技术团队或咨询服务来帮助您完成 WebRTC 在 .NET Core 中的开发。

微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor

       微软官方为广大开发者带来了开源且免费的Blazor UI组件库 - Fluent UI Blazor，它为构建现代化Web应用程序提供了强大的支持。

       Fluent UI Blazor是一款基于Blazor技术的组件库，集成了Fluent UI的设计风格。它有助于开发者利用C#和Razor语法快速开发出高效、灵活的单页应用程序（SPA），尤其对于C#程序员来说，它简化了Web应用的开发过程，降低了学习成本，提高了开发效率。

       通过Blazor的C#编译能力，开发者可以使用C#直接操控HTML DOM，而非JavaScript，实现了更直观的编程体验。要了解更多组件演示和在线使用指南，可访问fluentui-blazor.net。

       项目源代码地址包含CheckboxInputFileNumber、fieldRadioDate & TimeButtonDialogWizard等实用组件，你可以亲自探索并参与到项目中，为其发展贡献力量。同时，该项目已被收录到C#/.NET/.NET Core优秀项目精选中，关注这个精选列表，可以随时掌握最新动态和最佳实践，提升开发水平。

       优秀项目和框架的发掘和分享是大家共同的责任，如果你发现其他优秀项目，欢迎提交PR，让我们一起为社区贡献更多价值。一起来挖掘和推广这些优秀的项目，共同推动技术进步。

如何用 Blazor 实现 Ant Design 组件库（二）

       前言

       在前两周，我们探讨了如何将 Ant Design 组件库与 Blazor 框架结合使用，得到了许多朋友的支持与参与。在直播中，我们介绍了 AntBlazor 项目的概览，并分享了 Blazor 框架的基础知识。通过直播，我们展示了如何利用 Blazor 实现二维码多端登录，但这次直播没有深入细节，时间长达4小时。直播录播地址为：bilibili.com/video/BV1u...，同时，您也可以在钉钉群中观看回放。

       在清明假期的最后一天，我们将再次进行直播，但时长将更合理，不会占用大家太多时间。请在观看直播前准备好您的问题。直播将在钉钉群和B站同时进行，并提供录播。

       本篇内容将着重讨论开发 Blazor 项目的价值以及 AntBlazor 项目带来的益处。

       Blazor 项目是否值得投入？

       Blazor 是一个新颖的框架，目前仍处于 WebAssembly 的预览阶段，将于5月日的 Build 大会发布正式版。因此，许多人在推广 AntBlazor 项目时提出了质疑：现在投入精力开发组件库是否值得？是否会像 Webform 一样只有微软自己使用，最终被放弃？是否应该等到成熟后再了解？

       需要了解的是，Blazor 是一个全能框架，具备了如路由、依赖注入、状态管理、国际化/本地化、权限控制、GC、调试工具等组件，这些在已有前端框架中几乎是全功能的。尽管在生态上仍存在发展空间，但其潜力巨大。作为受欢迎的开源项目，自然会吸引开发者丰富其生态，特别是在前端领域，生态发展更容易。

       围绕现有核心组件，我们可以通过实践为 Blazor 生态做出补充。AntBlazor 项目正是致力于丰富 Blazor 生态的开源项目之一。

       开发 Blazor 项目的价值

       AntBlazor 项目不仅为开源实践提供了一个平台，还帮助开发者学习 Blazor 及其他技能。项目自 Blazor WebAssembly 3.1 preview 阶段创建，实验性开发组件和基于 WebAssembly 的文档项目。随着每个 preview 版本的发布，项目尽量集成最新特性。

       除了官方发布的特性，项目还创造性地增强其“前端气息”，运用 Blazor 进行更多实践。

       路由组件优化

       路由组件是最基础的组件，官方实现基本功能如路由表和导航。通过分析源码，我们对路由组件进行了改进，具体分析将在后续的文章中提供。

       多语言支持

       当前版本尚未集成官方的全球化/本地化功能，项目中实现了多语言服务，动态切换语言。这一过程也加深了我们对状态刷新的理解，后续直播中将分享更多细节。

       文档构建改进

       项目使用 Blazor WebAssembly 构建静态文档站点。为了兼顾 .NET 项目与开放性，源文件放置在项目目录外，通过 MSBuild Tasks 进行文件拷贝和 Node.js 调用。最近，我们正在用 .NET Core 开发一个 CLI 工具，用于生成文档所需的元数据，以减少对 Node.js 的依赖。

       持续优化 CI 流程

       优化 CI 流程，让开发者更容易参与项目，集中精力于组件开发。通过优化，我们提升了项目的可持续发展能力，获得了丰富的 Github Actions 使用经验和 shell 脚本技巧。

       总结

       通过实践，我们不仅学习了更多技能，也培养了更通用的能力。每一项有意义的改进都成为丰富 Blazor 生态的重要元素。AntBlazor 项目的成功展示了 Blazor 能够促进开源的 .NET 技能，使开发者能够利用 .NET 进行前端开发。

       欢迎关注 Blazor，参与 AntBlazor 项目，加入 Blazor 中文社区。如果您对 Blazor 感兴趣，或者想为开源项目贡献自己的力量，请加入我们，共同推动 Blazor 生态的发展。

使用 SortableJS 组件的 Blazor 可排序列表

       作者：Burke Holland 排版：Alan Wang

       在 Web 应用程序中，一个常见功能部分是可排序列表。Blazor 开发者们可能怀念 SortableJS 这个强大的 JavaScript 库。为了填充这个空白，Burke Holland 开发了一个名为 Blazor Sortable 的组件，将其开源在 GitHub 上，供开发者使用。

       Blazor Sortable 是一个社区组件，不是 Microsoft 的官方组件，但它提供了一种将 SortableJS 的功能集成到 Blazor 应用中的方法。Fluent UI 团队正在努力在未来版本的 Blazor 中集成可排序组件。

       访问演示页面：[提供演示链接]

       Burke 和 Jon Galloway，通过“Burke Learns Blazor”直播在 Twitch 和 .NET YouTube 上，共同致力于重建 theurlist.com 应用程序。如果您愿意加入他们的行列，提供帮助，将会非常欢迎。

       在 Blazor 中构建可排序列表组件的需求促使 Burke 开发了 Blazor Sortable。SortableJS 提供了丰富的功能，包括排序、列表之间的排序、项目克隆、过滤、自定义动画、腰部支持等。

       Blazor Sortable 包含了源代码和演示，用户只需要下载 Shared/SortableList.razor、Shared/SortableList.razor.css 和 Shared/SortableList.razor.js 文件。SortableList 组件是一个通用组件，需要提供项目列表和定义如何呈现列表中每个项目的模板。

       为了使列表变得可排序，只需处理 OnUpdate 事件并自定义排序逻辑。每当列表排序时，OnUpdate 事件会传递包含已移动项目旧索引和新索引的元组，通过 SortList 方法解构元组并移动列表中的项目。

       Blazor Sortable 支持多种功能，如列表之间的排序、克隆项目、过滤项目等。Burke 提供了一个示例，展示了如何在两个列表之间进行排序。

       在设置 SortableList 的样式时，您可以覆盖默认样式以适应特定需求。默认样式会隐藏“ghost”元素，产生拖动间隙。您可以修改 SortableItemTemplate 子项内的样式，但必须使用“::deep”修饰符确保样式生效。

       HTML5 的原生拖放支持在某些方面有局限性，无法提供理想的排序体验。因此，Blazor Sortable 选择使用 SortableJS 的 JavaScript 解决方案。如果您希望重新启用 HTML5 支持，只需在 SortableList.razor.razor.js 文件中删除 forceFallback: true 属性。

       Blazor Sortable 是一个开源社区项目，欢迎开发者探索其功能并提供反馈。Burke 鼓励大家使用 Blazor Sortable 来创建具有高级排序功能的 Blazor 应用程序。您可以通过 GitHub 页面查看 Blazor Sortable 并分享您的想法。

.netcommunitytoolkit从8.0.0版本开源,新增了哪些亮

       在.NET 8中，开发者将体验到一系列性能提升，包括动态配置文件引导优化(PGO)代码生成器的引入，该功能可根据实际使用情况优化代码，显著提高性能，最高可达%。支持AVX-指令集，允许对位数据向量执行并行操作，提升数据处理速度。原始类型，如数字及其他类型，实现了新的可格式化和可解析接口，无需转码开销即可直接格式化和解析为UTF-8。

       .NET Aspire是一个用于构建云原生应用的堆栈，集成遥测、弹性、配置和运行状况检查等功能，提供从第一天到第一百天轻松管理云原生应用的基础依赖。访问预览版本了解更多。

       .NET 8容器增强功能简化容器使用体验，每个.NET映像包含非root用户，通过单行配置提高安全性。非root的.NET SDK工具可以发布容器映像，映像大小更小，部署更快。选择安全强化的Chiseled Ubuntu映像变体，减少攻击面。

       原生AOT（按需编译）让开发者无需等待JIT（即时）编译器在运行时编译代码，仅部署应用程序所需的代码，使应用程序能够在不允许使用JIT编译器的受限环境中运行。

       人工智能功能让.NET应用程序融入生成式人工智能和大型语言模型，通过.NET SDK中的开箱即用AI功能和与多种工具的无缝集成轻松利用AI。系统库和示例模板为开发人员提供了轻松入门的途径，包括客户聊天机器人、增强检索、Azure AI服务开发等应用。

       Blazor为.NET开发者提供了全栈Web应用程序构建能力，同时使用服务器和客户端处理Web UI需求，通过优化页面加载时间、提升可扩展性和用户体验，实现Blazor Server和Blazor WebAssembly之间的自动切换，增强身份验证、授权和身份管理功能。

       .NET MAUI提供单一项目系统和代码库构建跨平台应用，支持WinUI、Mac Catalyst、iOS和Android，本机AOT（实验性）支持针对类似iOS的平台。Visual Studio Code扩展为开发人员提供跨平台应用程序所需工具，支持最新版本的iOS和Android。

       C# 简化语法以提高开发效率，允许在任何类和结构中创建主构造函数，无需样板代码初始化字段和属性，支持简洁的数组、跨度和其他集合类型创建，提供默认lambda参数，内联数组用于性能优化。

       .NET 8引入反射改进，提供函数指针元数据访问，支持函数指针与类型信息的集成，减少源代码更改，支持AOT Web应用的配置绑定生成器，针对Android应用的AOT编译减小应用大小，代码分析工具验证正确使用.NET库API。

       新功能包括时间抽象、UTF8改进、加密支持SHA-3哈希基元、基于流的ZipFile方法等，提供更高效、灵活的开发体验。