logologo
Start
Manual
Utveckling
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
Start
Manual
Utveckling
Plugins
API
logologo

Introduktion

Vad är FlowEngine?
FlowEngine & plugins
Snabbstart
Inlärningsväg

Guide

Registrera FlowModel
Skapa FlowModel
Rendera FlowModel
FlowModel: Händelseflöde & konfiguration
FlowModel-persistens
FlowModels livscykel
FlowModels kontextsystem
Reaktiv mekanism: Observable
FlowModel vs React.Component

Definitioner

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageReaktiv mekanism: Observable
Next PageModelDefinition
TIP

Detta dokument har översatts av AI. För eventuella felaktigheter, se den engelska versionen

#FlowModel kontra React.Component

#Jämförelse av grundläggande ansvarsområden

Egenskap/FörmågaReact.ComponentFlowModel
RenderingsförmågaJa, render()-metoden genererar UIJa, render()-metoden genererar UI
TillståndshanteringInbyggd state och setStateAnvänder props, men tillståndshanteringen är mer beroende av modellträdstrukturen
LivscykelJa, t.ex. componentDidMountJa, t.ex. onInit, onMount, onUnmount
SyfteBygga UI-komponenterBygga datadrivna, flödesbaserade, strukturerade "modellträd"
DatastrukturKomponentträdModellträd (stöder förälder-barn-modeller, flera instanser (Fork))
UnderkomponenterAnvänder JSX för att kapsla in komponenterAnvänder setSubModel/addSubModel för att explicit ange undermodeller
Dynamiskt beteendeHändelsebindning, tillståndsuppdateringar driver UIRegistrerar/skickar flöden, hanterar automatiska flöden
PersistensIngen inbyggd mekanismStöder persistens (t.ex. model.save())
Stöder Fork (flera renderingar)Nej (kräver manuell återanvändning)Ja (createFork för flera instansieringar)
MotorstyrningIngenJa, hanteras, registreras och laddas av FlowEngine

#Jämförelse av livscykler

LivscykelkrokReact.ComponentFlowModel
Initialiseringconstructor, componentDidMountonInit, onMount
AvmonteringcomponentWillUnmountonUnmount
Svara på indatacomponentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
FelhanteringcomponentDidCatchonAutoFlowsError

#Jämförelse av konstruktionsstruktur

React:

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

FlowModel:

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

#Komponentträd kontra modellträd

  • React-komponentträd: Ett UI-renderingsträd som bildas av kapslad JSX vid körning.
  • FlowModel-modellträd: Ett logiskt strukturträd som hanteras av FlowEngine, vilket kan persisteras och tillåter dynamisk registrering och kontroll av undermodeller. Lämpligt för att bygga sidblock, åtgärdsflöden, datamodeller, etc.

#Specialfunktioner (unika för FlowModel)

FunktionBeskrivning
registerFlowRegistrera flöde
applyFlow / dispatchEventUtföra/utlösa flöde
setSubModel / addSubModelExplicit kontroll över skapande och bindning av undermodeller
createForkStöder återanvändning av en modells logik för flera renderingar (t.ex. varje rad i en tabell)
openFlowSettingsInställningar för flödessteg
save / saveStepParams()Modellen kan persisteras och integreras med backend

#Sammanfattning

PostReact.ComponentFlowModel
Lämpliga scenarierOrganisation av UI-lagerkomponenterDatadriven flödes- och blockhantering
KärnidénDeklarativt UIModelldrivet strukturerat flöde
HanteringsmetodReact kontrollerar livscykelnFlowModel kontrollerar modellens livscykel och struktur
FördelarRikt ekosystem och verktygskedjaStarkt strukturerad, flöden kan persisteras, undermodeller är kontrollerbara

FlowModel kan användas komplementärt med React: Använd React för rendering inom en FlowModel, medan dess livscykel och struktur hanteras av FlowEngine.