logologo
Démarrer
Manuel
Développement
Plugins
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
Démarrer
Manuel
Développement
Plugins
API
logologo

Introduction

Qu'est-ce que FlowEngine ?
Relation entre FlowEngine et les plugins
Démarrage rapide
Feuille de route d'apprentissage

Guide

Enregistrer un FlowModel
Créer un FlowModel
Rendre un FlowModel
Flux d'événements et configuration du FlowModel
Persistance du FlowModel
Cycle de vie du FlowModel
Système de contexte du FlowModel
Mécanisme réactif : Observable
FlowModel vs React.Component

Définitions

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageMécanisme réactif : Observable
Next PageModelDefinition
Avis de traduction IA

Cette documentation a été traduite automatiquement par IA.

#FlowModel vs React.Component

#Comparaison des responsabilités fondamentales

Caractéristique/CapacitéReact.ComponentFlowModel
Capacité de renduOui, la méthode render() génère l'interface utilisateurOui, la méthode render() génère l'interface utilisateur
Gestion de l'étatMécanismes state et setState intégrésUtilise les props, mais la gestion de l'état repose davantage sur la structure de l'arbre de modèles
Cycle de vieOui, par exemple componentDidMountOui, par exemple onInit, onMount, onUnmount
ObjectifConstruire des composants d'interface utilisateurConstruire des « arbres de modèles » structurés, basés sur les données et les flux
Structure des donnéesArbre de composantsArbre de modèles (prend en charge les modèles parent-enfant, les Fork multi-instances)
Composants enfantsUtilisation de JSX pour imbriquer les composantsUtilisation de setSubModel/addSubModel pour définir explicitement les sous-modèles
Comportement dynamiqueLiaison d'événements, mises à jour d'état pilotant l'interface utilisateurEnregistrement/déclenchement de flux, gestion des flux automatiques
PersistanceAucun mécanisme intégréPrend en charge la persistance (par exemple, model.save())
Prise en charge du Fork (rendus multiples)Non (nécessite une réutilisation manuelle)Oui (createFork pour des instanciations multiples)
Contrôle par le moteurAucunOui, géré, enregistré et chargé par le FlowEngine

#Comparaison des cycles de vie

Crochet de cycle de vieReact.ComponentFlowModel
Initialisationconstructor, componentDidMountonInit, onMount
DémontagecomponentWillUnmountonUnmount
Réponse aux entréescomponentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
Gestion des erreurscomponentDidCatchonAutoFlowsError

#Comparaison des structures de construction

React :

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

FlowModel :

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

#Arbre de composants vs Arbre de modèles

  • Arbre de composants React : Un arbre de rendu d'interface utilisateur formé par l'imbrication de JSX à l'exécution.
  • Arbre de modèles FlowModel : Un arbre de structure logique géré par le FlowEngine, qui peut être persisté et permet l'enregistrement dynamique et le contrôle des sous-modèles. Il est adapté à la construction de blocs de page, de flux d'opérations et de modèles de données, entre autres.

#Fonctionnalités spéciales (spécifiques à FlowModel)

FonctionDescription
registerFlowEnregistrer un flux
applyFlow / dispatchEventExécuter/déclencher un flux
setSubModel / addSubModelContrôler explicitement la création et la liaison des sous-modèles
createForkPrend en charge la réutilisation de la logique d'un modèle pour des rendus multiples (par exemple, chaque ligne d'un tableau)
openFlowSettingsParamètres des étapes de flux
save / saveStepParams()Le modèle peut être persisté et intégré au backend

#Résumé

ÉlémentReact.ComponentFlowModel
Scénarios adaptésOrganisation des composants de la couche UIGestion des flux et des blocs basée sur les données
Idée principaleInterface utilisateur déclarativeFlux structuré piloté par les modèles
Méthode de gestionReact contrôle le cycle de vieFlowModel contrôle le cycle de vie et la structure du modèle
AvantagesÉcosystème et chaîne d'outils richesStructure forte, flux persistants, sous-modèles contrôlables

FlowModel peut être utilisé de manière complémentaire avec React : utilisez React pour le rendu au sein d'un FlowModel, tandis que son cycle de vie et sa structure sont gérés par le FlowEngine.