#Renderizar FlowModel

FlowModelRenderer es el componente principal de React que se encarga de renderizar un FlowModel. Su función es transformar una instancia de FlowModel en un componente visual de React.

#Uso Básico

#FlowModelRenderer

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

// Uso básico
<FlowModelRenderer model={myModel} />

#FieldModelRenderer

Para los modelos de campo (Field Models) controlados, utilice FieldModelRenderer para renderizarlos:

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

// Renderizado de campo controlado
<FieldModelRenderer model={fieldModel} />

#Propiedades (Props)

#Propiedades de FlowModelRenderer (FlowModelRendererProps)

#Configuración detallada de showFlowSettings

Cuando showFlowSettings es un objeto, se admiten las siguientes configuraciones:

showFlowSettings={{
  showBackground: true,    // Mostrar fondo
  showBorder: true,        // Mostrar borde
  showDragHandle: true,    // Mostrar manejador de arrastre
  style: {},              // Estilo personalizado de la barra de herramientas
  toolbarPosition: 'inside' // Posición de la barra de herramientas: 'inside' | 'above' | 'below'
}}

#Ciclo de Vida del Renderizado

El ciclo de vida completo del renderizado invoca los siguientes métodos en orden:

1. model.dispatchEvent('beforeRender') - Evento beforeRender (antes del renderizado)
2. model.render() - Ejecuta el método de renderizado del modelo
3. model.onMount() - Hook de montaje del componente
4. model.onUnmount() - Hook de desmontaje del componente

#Ejemplos de Uso

#Renderizado Básico

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

function MyComponent() {
  const model = useFlowModel();
  
  return (
    <FlowModelRenderer 
      model={model}
      fallback={<div>Cargando...</div>}
    />
  );
}

#Renderizado con Configuración de Flujo

// Muestra la configuración pero oculta el botón de eliminar
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  hideRemoveInSettings={true}
/>

// Muestra la configuración y el título
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  showTitle={true}
/>

// Utiliza el modo de menú contextual (clic derecho)
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  flowSettingsVariant="contextMenu"
  hideRemoveInSettings={true}
/>

#Barra de Herramientas Personalizada

<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  extraToolbarItems={[
    {
      key: 'custom-action',
      title: 'Acción personalizada',
      icon: 'SettingOutlined',
      onClick: () => {
        console.log('Acción personalizada');
      }
    }
  ]}
/>

#Omitir Flujos Automáticos

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

#Renderizado de Modelo de Campo

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

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

#Gestión de Errores

FlowModelRenderer incorpora un mecanismo completo de gestión de errores:

• Límite de errores automático: showErrorFallback={true} está habilitado por defecto.
• Errores de flujos automáticos: Captura y gestiona los errores durante la ejecución de los flujos automáticos.
• Errores de renderizado: Muestra contenido de respaldo cuando el renderizado del modelo falla.

<FlowModelRenderer
  model={myModel}
  showErrorFallback={true}
  fallback={<div>El renderizado falló, por favor, inténtelo de nuevo</div>}
/>

#Optimización del Rendimiento

#Omitir Flujos Automáticos

Para escenarios donde los flujos automáticos no son necesarios, puede omitirlos para mejorar el rendimiento:

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

#Actualizaciones Reactivas

FlowModelRenderer utiliza el observer de @formily/reactive-react para las actualizaciones reactivas, asegurando que el componente se vuelva a renderizar automáticamente cuando el estado del modelo cambia.

#Consideraciones

1. Validación del modelo: Asegúrese de que el model proporcionado tenga un método render válido.
2. Gestión del ciclo de vida: Los hooks del ciclo de vida del modelo se invocarán en el momento adecuado.
3. Límite de errores: Se recomienda habilitar el límite de errores en un entorno de producción para ofrecer una mejor experiencia de usuario.
4. Consideración de rendimiento: Para escenarios que implican el renderizado de un gran número de modelos, considere utilizar la opción skipApplyAutoFlows.