什么是 React(虚拟)代码组件?
Power Apps 组件框架目前仅支持 standard 代码组件(标准 html 控件类型)。控件在其初始化生命周期方法中分配了一个 HtmlDivElement,并将其 UX/UI 挂载到直接在 DOM 上工作的已分配 Div 中。另一方面,React 是一个用于构建前端用户界面的开源 JavaScript 库,它使用虚拟 DOM.React(虚拟)控件提供了一种针对在代码组件中使用 React 库而优化的新模式,以获得最大的性能优势,并通过将控件的 React 根附加到平台 React 树来更好地与 React 模式保持一致。 借助此功能,虚拟代码组件可以提高性能,这与某些第一方控件相当。
如何创建 React(虚拟)组件?
微软已将新的可选参数添加到 Power Apps 组件 (PAC) CLI。命令的新 () 参数。如果将此参数的值设置为 ,则会创建一个简单的 Hello World 虚拟控件。此控件将在其控件清单中将控件类型指定为虚拟,以及 React 和 Fluent 平台库资源声明。用户可以使用测试工具在本地快速试用此控件,而无需创建解决方案并将其添加到 Dataverse。测试工具为外部化的 React 和 Fluent UI 库提供运行时库,与最终将使用控件的 Power Apps 运行时内联。--framework-fwpac pcf initreactnpm start
什么是流利的设计系统?
Fluent Design System 是一个开源的跨平台设计系统,为设计人员和开发人员提供创建引人入胜的产品体验所需的框架,包括可访问性、国际化和性能。Fluent UI 控件最初是在适用于团队的 Power Apps 中发布的,并作为自定义页面的默认控件发布。Fluent 不仅可帮助 Power Apps 跨 Microsoft 产品协调设计,还为主题和设计基础结构奠定了坚实的基础。
如何创建虚拟 Fluent 组件?
创建虚拟 Fluent 组件的方式与创建虚拟控件的方式基本相同。上面提到的新框架参数将 Fluent 和 React 的共享库资源定义添加到控件的清单中。默认情况下,Fluent UI React 库将可供控制,如果特定项目不需要它,则应删除此节点。
在哪里可以找到示例 React(虚拟)和 Fluent UI 代码组件?
用户将共享两个新的虚拟控制示例,它们是用户现有示例的更新版本。New Choice picker 组件和 React FacePile 组件提供相同的功能,但它们是使用平台库的 React(虚拟)控件。用户可以将这些控件用作起始项目或用于进一步探索。
性能注意事项
用户可以期望在 Web 和移动设备上获得更好的性能,尤其是在速度较慢的网络上。以下是一些高级数字,比较了开发计算机上 FacePile 控件的标准版本和虚拟版本。
展望未来
在 GA 中,React 和 Fluent UI 将是创建所有代码组件的推荐和默认方式。微软建议开始评估 React + Fluent 控件,以构建 Power Apps 代码组件。对于生产用途,开发人员应考虑在预览阶段使用 standard 控制库打包机制。用户可以在此处看到展示该模式的示例。GA 之后,迁移到虚拟控件应该很简单,因为核心客户端开发堆栈是相同的。