Power Apps component framework 体系结构

您可以使用 HTML、CSS 和 TypeScript 实现代码组件。虽然不要求使用任何特定的 UI 框架，但 React 和 Fluent UI 是常用的选择。

组件构成

如下图所示，Power Apps 组件由三个关键区域构成：清单输入文件、其实现，以及组件可能需要的任何其他资源文件。

清单用于标识可供托管组件的应用程序使用的任何属性。当应用制作者使用代码组件时，他们可以选择以静态方式为属性设置一个值，或者以动态方式将其绑定到应用程序中可用的数据列之一。应用程序和组件可以使用属性进行数据通信，而应用程序无需了解组件的实现方式。

要创建组件，代码需要实现一个接口，以使托管应用按照一致的方式与您的组件交互。本任务由实现 StandardControl 接口的代码组件类完成。

export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}

开发组件时，要实现下表中的全部或部分 StandardControl 接口方法，具体取决于组件要求。这些方法允许托管运行时管理代码组件的生命周期。

方法	描述
init	必需。本方法用于初始化组件实例。组件可以通过本方法启动远程服务器调用和其他初始化操作。使用本方法无法初始化数据集值；必须使用 updateView 方法。
updateView	必需。当组件属性包中的任何值发生变化时，将会调用本方法。如果在 init 方法中启动了任何可能未完成的加载数据请求，则代码必须处理此状态并提供可视加载指示器。
getOutputs	可选。在接收新数据之前由框架调用。动态管理控件中的绑定属性时使用本方法。
destroy	必需。当从 DOM 树中删除组件时调用。 destroy 方法用于进行清理以及释放组件所使用的任何内存。例如，如果正在使用 React，请在 destroy 方法中使用 ReactDOM.unmountComponentAtNode。这可以防止因在指定浏览器会话中加载和卸载代码组件而导致的任何性能问题。

这些方法在标准化生命周期中通过框架运行时流程调用，如以下说明中所示。

在图像顶部，框架调用组件的 init() 函数。如果是交互式组件，您还需要通过调用 notifyOutputChanged 方法来通知主机组件的输出已更改。

然后，框架运行时将调用 getOutputs 方法，以获取组件的所有绑定属性的值。

运行时随后通知主机，主机要负责验证输出。如果输出有效，它将对组件调用 updateView 方法。如果输出由于任何原因无效（例如，业务规则发现新输出无效），它将调用 updateView 方法并传递旧值以及错误消息。在任一情况下，您的组件都可以更新用户界面，并在适当时显示错误消息。