• Русский

      • FlowModel vs React.Component

      Сравнение основных обязанностей

      Характеристика/ВозможностьReact.ComponentFlowModel
      Возможность рендерингаДа, метод render() генерирует UIДа, метод render() генерирует UI
      Управление состояниемВстроенные state и setStateИспользует props, но управление состоянием в большей степени зависит от структуры дерева моделей
      Жизненный циклДа, например, componentDidMountДа, например, onInit, onMount, onUnmount
      НазначениеСоздание UI-компонентовСоздание управляемых данными, потоковых, структурированных «деревьев моделей»
      Структура данныхДерево компонентовДерево моделей (поддерживает родительские и дочерние модели, многоэкземплярный Fork)
      Дочерние компонентыИспользование JSX для вложенности компонентовЯвное определение дочерних моделей с помощью setSubModel/addSubModel
      Динамическое поведениеПривязка событий, обновление состояния управляют UIРегистрация/диспетчеризация рабочих процессов, обработка автоматических рабочих процессов
      ПерсистентностьНет встроенного механизмаПоддерживает персистентность (например, model.save())
      Поддержка Fork (многократный рендеринг)Нет (требуется ручное повторное использование)Да (createFork для создания нескольких экземпляров)
      Управление движкомНетДа, управляется, регистрируется и загружается FlowEngine

      Сравнение жизненных циклов

      Хук жизненного циклаReact.ComponentFlowModel
      Инициализацияconstructor, componentDidMountonInit, onMount
      РазмонтированиеcomponentWillUnmountonUnmount
      Реагирование на вводcomponentDidUpdateonBeforeAutoFlows, onAfterAutoFlows
      Обработка ошибокcomponentDidCatchonAutoFlowsError

      Сравнение структур построения

      React:

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

      FlowModel:

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

      Дерево компонентов vs Дерево моделей

      • Дерево компонентов React: Дерево рендеринга пользовательского интерфейса, формируемое вложенностью JSX во время выполнения.
      • Дерево моделей FlowModel: Логическая структурная модель, управляемая FlowEngine, которая может быть персистентной, позволяет динамически регистрировать и контролировать дочерние модели. Подходит для создания блоков страниц, рабочих процессов, моделей данных и т.д.

      Специальные возможности (специфичные для FlowModel)

      ФункцияОписание
      registerFlowРегистрация рабочего процесса
      applyFlow / dispatchEventВыполнение/запуск рабочего процесса
      setSubModel / addSubModelЯвное управление созданием и привязкой дочерних моделей
      createForkПоддерживает повторное использование логики модели для многократного рендеринга (например, для каждой строки в таблице)
      openFlowSettingsНастройки шага рабочего процесса
      save / saveStepParams()Модель может быть персистентной и интегрироваться с бэкендом

      Итог

      ПунктReact.ComponentFlowModel
      Подходящие сценарииОрганизация компонентов на уровне UIУправление потоками и блоками, управляемое данными
      Ключевая идеяДекларативный UIСтруктурированный рабочий процесс, управляемый моделью
      Метод управленияReact управляет жизненным цикломFlowModel управляет жизненным циклом и структурой модели
      ПреимуществаБогатая экосистема и набор инструментовСильная структурированность, персистентность рабочих процессов, управляемость дочерних моделей

      FlowModel может использоваться в сочетании с React: вы можете использовать React для рендеринга внутри FlowModel, при этом его жизненный цикл и структура будут управляться FlowEngine.