• Français

      • 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.