#Рендеринг FlowModel

FlowModelRenderer — это основной React-компонент для рендеринга FlowModel. Он отвечает за преобразование экземпляра FlowModel в визуальный React-компонент.

#Основное использование

#FlowModelRenderer

import { FlowModelRenderer } from '@nocobase/flow-engine';

// Основное использование
<FlowModelRenderer model={myModel} />

#FieldModelRenderer

Для рендеринга управляемых моделей полей (FieldModel) используйте FieldModelRenderer:

import { FieldModelRenderer } from '@nocobase/flow-engine';

// Рендеринг управляемого поля
<FieldModelRenderer model={fieldModel} />

#Параметры Props

#FlowModelRendererProps

#Детальная конфигурация showFlowSettings

Когда showFlowSettings является объектом, поддерживаются следующие конфигурации:

showFlowSettings={{
  showBackground: true,    // Показывать фон
  showBorder: true,        // Показывать границу
  showDragHandle: true,    // Показывать маркер перетаскивания
  style: {},              // Пользовательский стиль панели инструментов
  toolbarPosition: 'inside' // Позиция панели инструментов: 'inside' | 'above' | 'below'
}}

#Жизненный цикл рендеринга

Полный цикл рендеринга вызывает следующие методы в указанном порядке:

1. model.dispatchEvent('beforeRender') - Событие 'beforeRender'
2. model.render() - Выполняет метод рендеринга модели
3. model.onMount() - Хук монтирования компонента
4. model.onUnmount() - Хук размонтирования компонента

#Примеры использования

#Базовый рендеринг

import { FlowModelRenderer } from '@nocobase/flow-engine';

function MyComponent() {
  const model = useFlowModel();
  
  return (
    <FlowModelRenderer 
      model={model}
      fallback={<div>Загрузка...</div>}
    />
  );
}

#Рендеринг с настройками рабочего процесса

// Показывать настройки, но скрывать кнопку удаления
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  hideRemoveInSettings={true}
/>

// Показывать настройки и заголовок
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  showTitle={true}
/>

// Использовать режим контекстного меню
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  flowSettingsVariant="contextMenu"
  hideRemoveInSettings={true}
/>

#Пользовательская панель инструментов

<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  extraToolbarItems={[
    {
      key: 'custom-action',
      title: 'Пользовательское действие',
      icon: 'SettingOutlined',
      onClick: () => {
        console.log('Пользовательское действие');
      }
    }
  ]}
/>

#Пропуск автоматических рабочих процессов

<FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
  showErrorFallback={false}
/>

#Рендеринг модели поля

import { FieldModelRenderer } from '@nocobase/flow-engine';

function FormField({ model, onChange, ...props }) {
  return (
    <FieldModelRenderer
      model={model}
      onChange={onChange}
      {...props}
    />
  );
}

#Обработка ошибок

FlowModelRenderer имеет встроенный комплексный механизм обработки ошибок:

• Автоматический обработчик ошибок: showErrorFallback={true} включен по умолчанию
• Ошибки автоматических рабочих процессов: Перехватывает и обрабатывает ошибки во время выполнения автоматических рабочих процессов
• Ошибки рендеринга: Отображает резервное содержимое при сбое рендеринга модели

<FlowModelRenderer
  model={myModel}
  showErrorFallback={true}
  fallback={<div>Ошибка рендеринга, пожалуйста, попробуйте снова</div>}
/>

#Оптимизация производительности

#Пропуск автоматических рабочих процессов

В сценариях, где автоматические рабочие процессы не требуются, вы можете пропустить их для повышения производительности:

<FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
/>

#Реактивные обновления

FlowModelRenderer использует observer из @formily/reactive-react для реактивных обновлений, гарантируя, что компонент автоматически перерендерится при изменении состояния модели.

#Примечания

1. Валидация модели: Убедитесь, что переданная model имеет действительный метод render.
2. Управление жизненным циклом: Хуки жизненного цикла модели будут вызываться в соответствующее время.
3. Границы ошибок: Рекомендуется включать границы ошибок в производственной среде для обеспечения лучшего пользовательского опыта.
4. Соображения производительности: Для сценариев, включающих рендеринг большого количества моделей, рассмотрите возможность использования опции skipApplyAutoFlows.