Controles React y bibliotecas de plataforma (versión preliminar)
[Este tema es documentación preliminar y está sujeto a modificaciones.]
Puede lograr mejoras significativas en el rendimiento utilizando React y las bibliotecas de la plataforma. Cuando usa React y las bibliotecas de la plataforma, está usando la misma infraestructura que usa la plataforma Power Apps. Esto significa que ya no tiene que empaquetar las bibliotecas React y Fluent individualmente para cada control. Todos los controles comparten una instancia y versión de biblioteca común para brindar una experiencia uniforme y uniforme.
Al reutilizar las bibliotecas React y Fluent de la plataforma existente, puede esperar los siguientes beneficios:
- Tamaño de agrupación de control reducido
- Empaquetado de soluciones optimizadas
- Transferencia de runtime, secuencias de comandos y representación de control más rápidos
Con los beneficios disponibles al reutilizar estos recursos de componentes, esperamos que este enfoque se convierta en la forma preferida de todos los componentes de código Power Apps se crearán después de que esta característica alcance la disponibilidad general.
Requisitos previos
Al igual que con cualquier componente, debe instalar Visual Studio Code y Microsoft Power Platform CLI como se describe aquí: Requisitos previos
Nota
Si ya tiene instalada la CLI Power Platform para Windows, asegúrese de que está ejecutando la última versión usando el comando pac install latest.
Power Platform Tools para Visual Studio Code se debería actualizar automáticamente.
Crear un componente React
Nota
Estas instrucciones esperan que haya creado componentes de código antes. Si no lo ha hecho, consulte este tutorial: Crea tu primer componente
Hay un nuevo parámetro --framework (-fw) para el comando pac pcf init. Establecer el valor de este parámetro en react.
La siguiente tabla muestra la forma larga de los comandos:
| Parámetro | valor |
|---|---|
--name |
ReactSample |
--namespace |
SampleNamespace |
--template |
field |
--framework |
react |
--run-npm-install |
true (predeterminada) |
El siguiente comando de PowerShell usa los accesos directos de parámetros y crea un proyecto de componente React y ejecutará npm-install en la carpeta donde se ejecuta el comando:
pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm
Ahora puede compilar y ver el control en el arnés de prueba como de costumbre usando npm start.
Después de compilar el control, puede empaquetarlo dentro de soluciones y usarlo para aplicaciones basadas en modelos (incluidas páginas personalizadas) y aplicaciones de lienzo como componentes de código estándar.
Diferencias con los componentes estándar
Esta sección describe las diferencias entre un componente React y un componente estándar.
ControlManifest.Input.xml
El atributo control element control-type se establece en virtual en vez de en standard.
Nota
Cambiar este valor no convierte un componente de un tipo a otro.
Dentro de elemento de recursos, encontrará dos nuevos elementos secundarios elemento platform-library como los siguientes:
<resources>
<code path="index.ts" order="1" />
<platform-library name="React" version="16.8.6" />
<platform-library name="Fluent" version="9.46.2" />
</resources>
Nota
Para obtener más información sobre las versiones válidas de la biblioteca de la plataforma, consulte Lista de bibliotecas de plataformas compatibles.
Recomendamos usar las bibliotecas de la plataforma Fluent 8 y 9. Si no usa Fluent, debe eliminar el elemento platform-library donde el valor del atributo name es Fluent.
Index.ts
El método ReactControl.init para la inicialización del control no tiene parámetros div porque estos controles React no representan el DOM directamente. En cambio ReactControl.updateView devuelve un ReactElement que tiene los detalles del control real en formato React.
bundle.js
Las bibliotecas React y Fluent no están incluidas en el paquete porque son compartidas, por lo tanto, el tamaño de bundle.js es más pequeño.
Controles de ejemplo
Puede encontrar dos nuevos controles agregados a las muestras como parte de esta vista previa. Funcionalmente, son iguales a su versión estándar pero tienen un rendimiento mucho mejor.
| Ejemplo | Description | Vincular |
|---|---|---|
| ChoicesPickerReact | El estándar ChoicesPickerControl convertido para ser un control React. | Muestra ChoicesPickerReact |
| FacepileReact | El ReactStandardControl convertido para ser un control React. | FacepileReact |
Lista de bibliotecas de plataformas admitidas
Las bibliotecas de plataforma están disponibles tanto en el momento de la compilación como en el tiempo de ejecución para los controles que utilizan la capacidad de las bibliotecas de plataforma. Actualmente, la plataforma proporciona las siguientes versiones y son las versiones más altas admitidas actualmente.
| Name | npm package name | Rango de versiones permitidas | Versión cargada |
|---|---|---|---|
| React | react | 16.8.6 | 17.0.2 (Modelo), 16.14.0 (Lienzo) |
| Fluent | @fluentui/react | 8.29.0 | 8.29.0 |
| Fluent | @fluentui/react-components | >=9.4.0 <=9.46.2 | 9.46.2 |
Nota
Es posible que la aplicación cargue una versión compatible superior de una biblioteca de plataforma en tiempo de ejecución, pero es posible que la versión no sea la última versión disponible. Fluent 8 y Fluent 9 son compatibles, pero no se pueden especificar ambos en el mismo manifiesto.
Preguntas frecuentes
P: ¿Puedo convertir un control estándar existente en un control React usando bibliotecas de plataforma?
R: No. Debe crear un nuevo control usando la nueva plantilla y luego actualizar los métodos manifest e index.ts. Como referencia, compare el estándar y las muestras de React descritas anteriormente.
P: ¿Puedo usar los controles y las bibliotecas de plataforma de React con Power Pages?
R: No. Actualmente, los controles y bibliotecas de plataforma de React solo son compatibles con aplicaciones basadas en modelos y lienzos. En Power Pages, los controles de React no se actualizan según los cambios en otros campos.
Artículos relacionados
Qué son los componentes de código
Componentes de código para aplicaciones de lienzo
Crear y generar un componente de código
Más información sobre Power Apps component framework
Usar componentes de código en Power Pages
Nota
¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)
La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).