React-Steuerungen und Plattformbibliotheken (Vorschauversion)

  • Artikel

[Dieses Thema ist Teil der Dokumentation zur Vorabversion und kann geändert werden.]

Mit React und Plattformbibliotheken können Sie erhebliche Leistungssteigerungen erzielen. Wenn Sie React‑ und Plattformbibliotheken verwenden, verwenden Sie dieselbe Infrastruktur, die von der Power Apps-Plattform verwendet wird. Das bedeutet, dass Sie React‑ und Fluent-Bibliotheken nicht mehr einzeln für jede Steuerung packen müssen. Alle Steuerelemente teilen sich eine gemeinsame Bibliotheksinstanz und ‑version, um ein nahtloses und konsistentes Erlebnis zu bieten.

Durch die Wiederverwendung der bestehenden React‑ und Fluent-Bibliotheken der Plattform können Sie die folgenden Vorteile erwarten:

  • Reduzierte Kontrollbündelgröße
  • Optimierte Lösungsverpackung
  • Schnellere Laufzeitübertragung, Skripterstellung und Steuerungs-Rendering

Angesichts der Vorteile, die durch die Wiederverwendung dieser Komponentenressourcen verfügbar sind, erwarten wir, dass dieser Ansatz der bevorzugte Weg für die Erstellung aller Power Apps-Codekomponenten sein wird, nachdem diese Funktion allgemein verfügbar ist.

Anforderungen

Wie bei jeder Komponente müssen Sie Visual Studio Code und die Microsoft Power Platform CLI installieren wie hier beschrieben: Voraussetzungen

Hinweis

Wenn Sie die eigenständige Power Platform CLI für Windows bereits installiert haben, stellen Sie sicher, dass Sie die neueste Version ausführen, indem Sie den Befehl pac install latest verwenden. Die Power Platform Tools für Visual Studio Code sollten automatisch aktualisiert werden.

Erstellen einer React-Komponente

Hinweis

Diese Anweisungen setzen voraus, dass Sie zuvor Codekomponenten erstellt haben. Wenn Sie dies nicht getan haben, sehen Sie sich dieses Tutorial an: Sie Ihre erste Komponente erstellen

Es gibt einen neuen Parameter --framework (-fw) für den Befehl pac pcf init. Setzen Sie den Wert dieses Parameters auf react.

Die folgende Tabelle zeigt die Langform der Befehle:

Parameter Wert
--name ReactSample
--namespace SampleNamespace
--template field
--framework react
--run-npm-install true (Standard)

Der folgende PowerShell-Befehl verwendet die Parameterverknüpfungen und erstellt ein React-Komponentenprojekt und npm-install wird ausgeführt in dem Ordner, in dem Sie den Befehl ausführen:

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

Sie können das Steuerelement nun wie gewohnt mit npm start in der Testumgebung erstellen und anzeigen.

Nachdem Sie das Steuerelement erstellt haben, können Sie es in Lösungen verpacken und für modellgesteuerte Apps (einschließlich benutzerdefinierter Seiten) und Canvas-Apps wie Standardcodekomponenten verwenden.

Unterschiede zu Standardkomponenten

In diesem Abschnitt werden die Unterschiede zwischen einer React-Komponente und einer Standardkomponente beschrieben.

ControlManifest.Input.xml

Das Steuerelement control-type-Attribut ist auf virtual gesetzt statt auf standard.

Hinweis

Das Ändern dieses Werts konvertiert eine Komponente nicht von einem Typ in einen anderen.

Innerhalb des Ressourcenelements finden Sie zwei neue untergeordnete Plattform-Bibliothekselement-Elemente wie im folgenden Beispiel:

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

Hinweis

Weitere Informationen zu gültigen Plattformbibliotheksversionen finden Sie unter Liste der unterstützten Plattformbibliotheken.

Wir empfehlen die Verwendung von Plattformbibliotheken für Fluent 8 und 9. Wenn Sie Fluent nicht verwenden, sollten Sie das platform-library-Element entfernen, bei dem der name-Attributwert Fluent ist.

Index.ts

Die Methode ReactControl.init zur Steuerungsinitialisierung hat keine div-Parameter, da die React-Steuerelemente das DOM nicht direkt rendern. Stattdessen gibt ReactControl.updateView ein ReactElement zurück, das die Details des tatsächlichen Steuerelements im React-Format enthält.

bundle.js

React- und Fluent-Bibliotheken sind nicht im Paket enthalten, da sie gemeinsam genutzt werden, daher ist die Größe von bundle.js kleiner.

Beispielkontrollen

Im Rahmen dieser Vorschau finden Sie zwei neue Steuerelemente, die den Beispielen hinzugefügt wurden. Funktional sind sie die gleichen wie ihre Standardversion, haben aber eine viel bessere Leistung.

Beispiel Description Verknüpfung
ChoicesPickerReact Der Standard ChoicesPickerControl ist in eine React-Steuerung umgewandelt. ChoicesPickerReact-Beispiel
FacepileReact Das ReactStandardControl in eine React-Steuerung umgewandelt. FacepileReact

Liste der unterstützten Plattformbibliotheken

Plattformbibliotheken werden sowohl beim Build als auch zur Laufzeit für die Steuerelemente verfügbar gemacht, die die Funktion der Plattformbibliotheken nutzen. Derzeit werden die folgenden Versionen von der Plattform bereitgestellt. Dabei handelt es sich um die höchsten derzeit unterstützten Versionen.

Name des Dataflows npm package name Version
React react 16.8.6
Fluent @fluentui/react 8.29.0
Fluent @fluentui/react 9.46.2

Hinweis

Die Anwendung lädt zur Laufzeit möglicherweise eine höher kompatible Version einer Plattformbibliothek, aber dabei handelt es sich möglicherweise nicht um die neueste verfügbare Version. Fluent 8 und Fluent 9 werden jeweils unterstützt, können aber nicht beide im selben Manifest angegeben werden.

Häufig gestellte Fragen

F: Kann ich ein vorhandenes Standardsteuerelement mithilfe von Plattformbibliotheken in ein React-Steuerelement konvertieren?

A: Nein. Sie müssen ein neues Steuerelement mit der neuen Vorlage erstellen und dann die Methoden Manifest und Index.ts aktualisieren. Als Referenz vergleichen Sie die oben beschriebenen Standard- und Reaktionsproben.

F: Kann ich React-Steuerelemente und Plattformbibliotheken mit Power Pages verwenden?

A: Nein. React-Steuerelemente und Plattformbibliotheken werden derzeit nur für Canvas- und modellgesteuerte Apps unterstützt. In Power Pages werden React-Steuerelemente nicht basierend auf Änderungen in anderen Feldern aktualisiert.

Was sind Codekomponenten?
Codekomponenten für Canvas-Apps
Erstellen und Entwickeln einer Code-Komponente
Erlernen des Power Apps component framework
Codekomponenten in Power Pages verwenden

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).