# FlowModel 使用指南

FlowModel 是 NocoBase 专为可配置组件设计的流引擎的基础模型类，支持流注册、流执行、属性管理、子模型管理、持久化等功能。它并非适用于所有场景。本文将帮助你理解何时使用 FlowModel 以及如何正确使用它。

## FlowModel 解决的核心问题

FlowModel 主要解决以下四个方面的问题：

### 1. 响应式状态管理
通过 Observable 的方式管理组件状态，让状态变化可追踪、可响应。

### 2. 配置参数持久化
将组件的 `props` 转换为可持久化的流式配置 `step params`，支持配置的保存和复用。

### 3. 可视化流程编排
提供声明式的方式来定义交互流程和业务逻辑，支持低代码/可视化编排。

### 4. 灵活的子模型扩展
支持嵌套组织子模型（`subModels`），实现复杂的组件结构，如：
- 页面内动态添加多个区块
- 每个区块包含字段、操作等可配置项

---

## 何时使用 FlowModel？

### ✅ 适合使用的场景

FlowModel 适用于需要 **高度动态化、可配置、可编排** 的组件场景：

1. **可配置组件**：组件的属性（如 `type`、`title`、`icon`）需要运行时配置
2. **动态交互逻辑**：点击事件、数据处理等需要通过流程自由编排
3. **复杂嵌套结构**：需要支持子组件的动态添加和配置
4. **低代码场景**：需要在可视化界面中进行配置和编排

### ❌ 不适合使用的场景

对于 **简单、固定逻辑** 的组件，直接使用原生 React 更加简洁高效：

1. **固定功能组件**：逻辑固定，不需要配置的组件
2. **简单交互**：点击后执行固定逻辑的场景

## ButtonComponent vs ButtonModel

如下图所示，`ButtonModel` 并不是用来简单替代 `ButtonComponent`，而是在其基础上提供 **可配置能力** 的一层抽象：

<img style="width: 500px;" src="https://static-docs.nocobase.com/20250603132845.png">

## 最佳实践建议

1. **优先考虑简单方案**：除非明确需要可配置能力，否则优先使用原生 React 方式
2. **渐进式采用**：可以先用 React 实现功能，确认需要配置能力后再迁移到 FlowModel
3. **合理划分边界**：大块内容使用 FlowModel，内部细节使用 React 方式
