Contrôles React et bibliothèques de plateforme (version préliminaire)

[Cette rubrique fait partie de la documentation en version préliminaire et peut faire l'objet de modifications.]

Vous pouvez obtenir des gains de performances significatifs en utilisant React et les bibliothèques de plateforme. Lorsque vous utilisez React et les bibliothèques de plateforme, vous utilisez la même infrastructure que celle utilisée par la plateforme Power Apps. Cela signifie que vous n’avez plus besoin de regrouper les bibliothèques React et Fluent individuellement pour chaque contrôle. Tous les contrôles partagent une instance et une version de bibliothèque communes pour fournir une expérience transparente et cohérente.

En réutilisant les bibliothèques existantes de la plateforme React et Fluent, vous pouvez vous attendre aux avantages suivants :

• Taille réduite du faisceau de contrôle
• Package de solution optimisé
• Transfert d’exécution, scripts et rendu de contrôle plus rapides

Avec les avantages offerts par la réutilisation de ces ressources de composants, nous espérons que cette approche deviendra la manière préférée de créer tous les composants de code Power Apps une fois que cette fonctionnalité aura atteint la disponibilité générale.

Conditions préalables

Comme pour tout composant, vous devez installer Visual Studio Code et Microsoft Power Platform CLI comme décrit ici : Conditions préalables

Création d’un composant React

Il existe un nouveau paramètre --framework (-fw) pour la commande pac pcf init. Définissez la valeur de ce paramètre sur react.

Le tableau suivant montre la forme longue des commandes :

La commande PowerShell suivante utilise les raccourcis de paramètres et crée un projet de composant React et exécute npm-install dans le dossier où vous exécutez la commande :

pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm

Vous pouvez maintenant créer et afficher le contrôle dans le faisceau de test comme d’habitude en utilisant npm start.

Après avoir créé le contrôle, vous pouvez le mettre en package dans des solutions et l’utiliser pour des applications pilotées par modèle (y compris des pages personnalisées) et des applications canevas comme des composants de code standard.

Différences par rapport aux composants standard

Cette section décrit les différences entre un composant React et un composant standard.

ControlManifest.Input.xml

L’attribut élément de contrôlecontrol-type est défini sur virtual plutôt que sur standard.

Au sein de l’élément de ressources, vous trouvez deux nouveaux éléments enfants élément platform-library comme l’exemple suivant :

<resources>
  <code path="index.ts" order="1" />
  <platform-library name="React" version="16.8.6" />
  <platform-library name="Fluent" version="9.46.2" />
</resources>

Nous vous recommandons d’utiliser les bibliothèques de la plateforme pour Fluent 8 et 9. Si vous n’utilisez pas Fluent, vous devez supprimer l’élément platform-library où la valeur de l’attribut name est Fluent.

Index.ts

La méthode ReactControl.init pour l’initialisation du contrôle n’a pas de paramètres div, car les contrôles React ne restituent pas directement le DOM. Au lieu de ça, ReactControl.updateView renvoie un ReactElement qui contient les détails du contrôle réel au format React.

bundle.js

Les bibliothèques React et Fluent ne sont pas incluses dans le package, car elles sont partagées, par conséquent la taille de bundle.js est plus petite.

Exemples de contrôles

Vous pouvez trouver deux nouveaux contrôles ajoutés aux exemples dans le cadre de cet aperçu. Fonctionnellement, ils sont les mêmes que leur version standard, mais ont de meilleures performances.

Liste des bibliothèques de plates-formes prises en charge

Les bibliothèques de plateforme sont mises à disposition à la fois lors de la génération et de l’exécution pour les contrôles qui utilisent la fonctionnalité de bibliothèques de plateforme. Actuellement, les versions suivantes sont fournies par la plateforme et sont les versions les plus élevées actuellement prises en charge.

FAQ

Q : Puis-je convertir un contrôle standard existant en un contrôle React à l’aide de bibliothèques de plate-forme ?

R : Non. Vous devez créer un contrôle à l’aide du nouveau modèle, puis mettre à jour les méthodes manifest et index.ts. Pour référence, comparer les exemples standard et React décrits ci-dessus.

Q : Puis-je utiliser les contrôles React et les bibliothèques de plateforme avec Power Pages ?

R : Non. Les contrôles React et les bibliothèques de plateforme ne sont actuellement pris en charge que pour les applications canevas et pilotées par modèle. Dans Power Pages, les contrôles React ne sont pas mis à jour en fonction des modifications apportées aux autres champs.

Articles associés

En quoi consistent les composants de code ?
Composants de code pour les applications canevas
Créer un composant de code
Découvrir Power Apps Component Framework
Utiliser des composants de code dans Power Pages