• English

      • FlowModel vs React.Component

      Comparison of Basic Responsibilities

      Feature/CapabilityReact.ComponentFlowModel
      Rendering CapabilityYes, the render() method generates UIYes, the render() method generates UI
      State ManagementBuilt-in state and setStateUses props, but state management relies more on the model tree structure
      LifecycleYes, e.g., componentDidMountYes, e.g., onInit, onMount, onUnmount
      PurposeBuilding UI componentsBuilding data-driven, flow-based, structured "model trees"
      Data StructureComponent treeModel tree (supports parent-child models, multi-instance Fork)
      Child ComponentsUsing JSX to nest componentsUsing setSubModel/addSubModel to explicitly set sub-models
      Dynamic BehaviorEvent binding, state updates drive UIRegistering/dispatching Flows, handling automatic flows
      PersistenceNo built-in mechanismSupports persistence (e.g., model.save())
      Supports Fork (multiple renderings)No (requires manual reuse)Yes (createFork for multiple instantiations)
      Engine ControlNoneYes, managed, registered, and loaded by FlowEngine

      Lifecycle Comparison

      Lifecycle HookReact.ComponentFlowModel
      Initializationconstructor, componentDidMountonInit, onMount
      UnmountingcomponentWillUnmountonUnmount
      Responding to InputcomponentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
      Error HandlingcomponentDidCatchonAutoFlowsError

      Construction Structure Comparison

      React:

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

      FlowModel:

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

      Component Tree vs Model Tree

      • React Component Tree: A UI rendering tree formed by nested JSX at runtime.
      • FlowModel Model Tree: A logical structure tree managed by FlowEngine, which can be persisted, and allows dynamic registration and control of sub-models. Suitable for building page blocks, action flows, data models, etc.

      Special Features (FlowModel Specific)

      FunctionDescription
      registerFlowRegister flow
      applyFlow / dispatchEventExecute/trigger flow
      setSubModel / addSubModelExplicitly control the creation and binding of sub-models
      createForkSupports reusing a model's logic for multiple renderings (e.g., each row in a table)
      openFlowSettingsFlow step settings
      save / saveStepParams()The model can be persisted and integrated with the backend

      Summary

      ItemReact.ComponentFlowModel
      Suitable ScenariosUI layer component organizationData-driven flow and block management
      Core IdeaDeclarative UIModel-driven structured flow
      Management MethodReact controls the lifecycleFlowModel controls the model's lifecycle and structure
      AdvantagesRich ecosystem and toolchainStrongly structured, flows can be persisted, sub-models are controllable

      FlowModel can be used complementarily with React: Use React for rendering within a FlowModel, while its lifecycle and structure are managed by FlowEngine.