logologo
Начало
Руководство
Разработка
Плагины
API
Главная
English
简体中文
日本語
한국어
Español
Português
Deutsch
Français
Русский
Начало
Руководство
Разработка
Плагины
API
Главная
logologo

Введение

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

Руководство

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

Определения

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageРеактивный механизм: Observable
Next PageТочки расширения плагина RunJS
Уведомление о переводе ИИ

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

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