• Português

      • FlowModel vs React.Component

      Comparativo de Responsabilidades Básicas

      Característica/CapacidadeReact.ComponentFlowModel
      Capacidade de RenderizaçãoSim, o método render() gera a UISim, o método render() gera a UI
      Gerenciamento de Estadostate e setState integradosUsa props, mas o gerenciamento de estado depende mais da estrutura da árvore de modelos
      Ciclo de VidaSim, por exemplo, componentDidMountSim, por exemplo, onInit, onMount, onUnmount
      PropósitoConstruir componentes de UIConstruir "árvores de modelos" estruturadas, baseadas em fluxo e orientadas a dados
      Estrutura de DadosÁrvore de componentesÁrvore de modelos (suporta modelos pai-filho, Fork de múltiplas instâncias)
      Componentes FilhosUsando JSX para aninhar componentesUsando setSubModel/addSubModel para definir explicitamente sub-modelos
      Comportamento DinâmicoAssociação de eventos, atualizações de estado impulsionam a UIRegistrar/despachar Fluxos, lidar com fluxos automáticos
      PersistênciaSem mecanismo integradoSuporta persistência (por exemplo, model.save())
      Suporta Fork (múltiplas renderizações)Não (requer reuso manual)Sim (createFork para múltiplas instanciações)
      Controle do MotorNenhumSim, gerenciado, registrado e carregado pelo FlowEngine

      Comparativo de Ciclo de Vida

      Gancho de Ciclo de VidaReact.ComponentFlowModel
      Inicializaçãoconstructor, componentDidMountonInit, onMount
      DesmontagemcomponentWillUnmountonUnmount
      Resposta à EntradacomponentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
      Tratamento de ErroscomponentDidCatchonAutoFlowsError

      Comparativo de Estrutura de Construção

      React:

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

      FlowModel:

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

      Árvore de Componentes vs Árvore de Modelos

      • Árvore de Componentes React: Uma árvore de renderização de UI formada por JSX aninhado em tempo de execução.
      • Árvore de Modelos FlowModel: Uma árvore de estrutura lógica gerenciada pelo FlowEngine, que pode ser persistida e permite o registro dinâmico e o controle de sub-modelos. É adequada para construir blocos de página, fluxos de ação, modelos de dados, etc.

      Funcionalidades Especiais (Específicas do FlowModel)

      FunçãoDescrição
      registerFlowRegistrar fluxo
      applyFlow / dispatchEventExecutar/disparar fluxo
      setSubModel / addSubModelControlar explicitamente a criação e a vinculação de sub-modelos
      createForkSuporta o reuso da lógica de um modelo para múltiplas renderizações (por exemplo, cada linha em uma tabela)
      openFlowSettingsConfigurações de etapa do fluxo
      save / saveStepParams()O modelo pode ser persistido e integrado com o backend

      Resumo

      ItemReact.ComponentFlowModel
      Cenários AdequadosOrganização de componentes da camada de UIGerenciamento de blocos e fluxos orientados a dados
      Ideia CentralUI DeclarativaFluxo estruturado orientado a modelos
      Método de GerenciamentoReact controla o ciclo de vidaFlowModel controla o ciclo de vida e a estrutura do modelo
      VantagensEcossistema e conjunto de ferramentas ricosFortemente estruturado, fluxos podem ser persistidos, sub-modelos são controláveis

      O FlowModel pode ser usado de forma complementar ao React: use React para renderizar dentro de um FlowModel, enquanto seu ciclo de vida e estrutura são gerenciados pelo FlowEngine.