reactumg-architecture

# ReactUMG 架构原理深度解析

> 本文档详细说明 ReactUMG 插件如何将 TypeScript 编写的 React 组件转换为 UE5 的 UMG Widget。

---

## 1. 核心思想

**ReactUMG = React Reconciler + Puerts + UMG**

ReactUMG 是一个桥接层，让开发者可以使用 **React 的方式编写 UE5 UI**，同时保持原生性能和完整类型安全。

### 关键特性

- ✅ **完全拥抱 React 生态** - 标准 react-reconciler，支持 Hooks、Context、Ref
- ✅ **零性能开销** - Puerts 直接操作 C++ 内存，无序列化/反序列化
- ✅ **极简 C++ 层** - 只有 2 个类 + 5 个函数
- ✅ **完整类型安全** - 2406 行类型定义
- ✅ **自动事件管理** - 自动检测 Delegate 类型，自动绑定/清理

---

## 2. 三层架构

```
┌─────────────────────────────────────────────────────────┐
│  TypeScript Layer (开发者编写层)                          │
│  ─────────────────────────────────────────────────────  │
│  - 开发者编写 React.Component                            │
│  - 使用 JSX 语法描述 UI 结构                              │
│  - 调用 ReactUMG.render() 渲染                           │
│  - 管理状态和业务逻辑                                      │
└───────────────────────┬─────────────────────────────────┘
                        │
                        ▼
┌─────────────────────────────────────────────────────────┐
│  React-Reconciler Layer (协调层，核心逻辑)               │
│  ─────────────────────────────────────────────────────  │
│  - hostConfig 定义如何操作 Widget                        │
│  - UEWidget 包装 UE::Widget                             │
│  - UEWidgetRoot 包装 UReactWidget                       │
│  - 处理 VDOM diff/update/mount/unmount                  │
│  - 管理 Widget 树的生命周期                               │
└───────────────────────┬─────────────────────────────────┘
                        │ Puerts Bridge (JS ↔ C++)
                        ▼
┌─────────────────────────────────────────────────────────┐
│  C++ Layer (UE5 原生层)                                  │
│  ─────────────────────────────────────────────────────  │
│  - UReactWidget (根容器 UserWidget)                     │
│  - UUMGManager (蓝图函数库，工具函数)                     │
│  - UWidget::SynchronizeProperties() (同步到 Slate)      │
└─────────────────────────────────────────────────────────┘
```

### 各层职责

#### Type