FlowModel и 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 для множественной инстанциации)
Управление движкомНетДа, управляется, регистрируется и загружается через движок потоков

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

Хук жизненного цикла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>;
  }
}

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

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

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

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

Итог (Summary)

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

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