FlowModel vs React.Component

Grundlegende Verantwortlichkeiten im Vergleich

Merkmal/FähigkeitReact.ComponentFlowModel
Rendering-FähigkeitJa, die render()-Methode erzeugt die BenutzeroberflächeJa, die render()-Methode erzeugt die Benutzeroberfläche
ZustandsverwaltungIntegrierter state und setStateVerwendet props, aber die Zustandsverwaltung basiert stärker auf der Modellbaumstruktur
LebenszyklusJa, z.B. componentDidMountJa, z.B. onInit, onMount, onUnmount
ZweckErstellung von UI-KomponentenErstellung von datengesteuerten, Workflow-basierten, strukturierten „Modellbäumen“
DatenstrukturKomponentenbaumModellbaum (unterstützt Eltern-Kind-Modelle, Multi-Instanz-Fork)
Untergeordnete KomponentenVerwendung von JSX zur Verschachtelung von KomponentenExplizite Festlegung von Untermodellen mittels setSubModel/addSubModel
Dynamisches VerhaltenEreignisbindung, Zustandsaktualisierungen steuern die BenutzeroberflächeRegistrierung/Ausführung von Workflows, Handhabung automatischer Workflows
PersistenzKein integrierter MechanismusUnterstützt Persistenz (z.B. model.save())
Unterstützt Fork (mehrfaches Rendering)Nein (erfordert manuelle Wiederverwendung)Ja (createFork für mehrfache Instanziierung)
Engine-SteuerungKeineJa, wird vom FlowEngine verwaltet, registriert und geladen

Lebenszyklus im Vergleich

Lebenszyklus-HookReact.ComponentFlowModel
Initialisierungconstructor, componentDidMountonInit, onMount
EntladencomponentWillUnmountonUnmount
Reaktion auf EingabencomponentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
FehlerbehandlungcomponentDidCatchonAutoFlowsError

Struktur im Vergleich

React:

class MyComponent extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

FlowModel:

class HelloModel extends FlowModel {
  render() {
    return <div>Hello</div>;
  }
}

Komponentenbaum vs. Modellbaum

  • React Komponentenbaum: Ein UI-Rendering-Baum, der zur Laufzeit durch verschachteltes JSX gebildet wird.
  • FlowModel Modellbaum: Ein logischer Strukturbaum, der vom FlowEngine verwaltet wird. Er kann persistent gemacht werden und ermöglicht die dynamische Registrierung und Steuerung von Untermodellen. Er eignet sich zur Erstellung von Seitenblöcken, Aktions-Workflows, Datenmodellen usw.

Besondere Funktionen (FlowModel-spezifisch)

FunktionBeschreibung
registerFlowWorkflow registrieren
applyFlow / dispatchEventWorkflow ausführen/auslösen
setSubModel / addSubModelExplizite Steuerung der Erstellung und Bindung von Untermodellen
createForkUnterstützt die Wiederverwendung der Logik eines Modells für mehrfaches Rendering (z.B. jede Zeile in einer Tabelle)
openFlowSettingsWorkflow-Schritteinstellungen
save / saveStepParams()Das Modell kann persistent gespeichert und ins Backend integriert werden

Zusammenfassung

AspektReact.ComponentFlowModel
Geeignete SzenarienOrganisation von Komponenten auf der UI-EbeneDatengesteuertes Workflow- und Blockmanagement
KernideeDeklarative BenutzeroberflächeModellgesteuerter strukturierter Workflow
VerwaltungsmethodeReact steuert den LebenszyklusFlowModel steuert den Lebenszyklus und die Struktur des Modells
VorteileUmfangreiches Ökosystem und ToolchainStark strukturiert, Workflows können persistent gemacht werden, Untermodelle sind steuerbar

FlowModel kann komplementär zu React eingesetzt werden: React wird innerhalb eines FlowModels für das Rendering verwendet, während dessen Lebenszyklus und Struktur vom FlowEngine verwaltet werden.