logologo
Начало
Руководство
Разработка
Плагины
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
Начало
Руководство
Разработка
Плагины
API
logologo

Введение

Что такое FlowEngine?
Связь FlowEngine и плагинов
Быстрый старт
План обучения

Руководство

Регистрация FlowModel
Создание FlowModel
Рендеринг FlowModel
Поток событий и конфигурация FlowModel
Персистентность FlowModel
Жизненный цикл FlowModel
Система контекста FlowModel
Реактивный механизм: Observable
FlowModel vs React.Component

Определения

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageРеактивный механизм: Observable
Next PageModelDefinition
Уведомление о переводе ИИ

Эта документация была автоматически переведена ИИ.

#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.