cs-element/docs/15-auto-dispose-system.md

Advanced reactive data management library with state machines, blueprints, persistence, compression, networking, and multithreading support

# Auto-Dispose система - Автоматическое управление памятью

Auto-Dispose система в CSElement обеспечивает автоматическую очистку памяти и предотвращает утечки памяти путем отслеживания отношений родитель-потомок между вычисляемыми свойствами и наблюдателями.

## 🎯 Основные возможности

### Автоматическая очистка
- Автоматическое удаление дочерних computed при пересчете родительского
- Scope-based очистка для группировки связанных реактивных элементов
- Паттерны очистки в стиле React useEffect
- Обнаружение и предупреждения об утечках памяти
- Иерархическое удаление с отслеживанием зависимостей

### Управление областями видимости
- Создание изолированных областей для группировки элементов
- Автоматическая очистка всех элементов в области
- Вложенные области с каскадной очисткой

## 🚀 Быстрый старт

### Базовая настройка

```typescript
import { CSElement } from 'cs-element';

// Включение auto-dispose глобально
CSElement.configureReactivity({
  autoDispose: true,
  debug: true,
  warnMemoryLeaks: true,
  maxComputedDepth: 50
});
```

### Создание и использование областей

```typescript
// Создание области видимости
const scope = CSElement.createScope();

// Выполнение кода в области
CSElement.runInScope(scope.id, () => {
  const data = CSElement.reactive({ count: 0 });
  
  const doubled = CSElement.computed(() => {
    return data.count * 2;
  });
  
  const tripled = CSElement.computed(() => {
    return data.count * 3;
  });
  
  const sum = CSElement.computed(() => {
    // Эти computed автоматически отслеживаются
    return doubled.value + tripled.value;
  });
  
  console.log(sum.value); // 0
  data.count = 5;
  console.log(sum.value); // 30
});

// Очистка всей области
CSElement.disposeScope(scope.id);
```

## 📚 Подробное руководство

### Автоматическая очистка computed

```typescript
const data = CSElement.reactive({ items: [1, 2, 3] });

const processedItems = CSElement.computed(() => {
  // При каждом пересчете старые дочерние computed удаляются
  return data.items.map(item => {
    return CSElement.computed(() => item * 2);
  });
});

// При изменении items старые computed автоматически очищаются
data.items = [4, 5, 6, 7];
```

### Управление жизненным циклом

```typescript
class DataProcessor {
  private scope: string;
  private data: any;
  
  constructor() {
    this.scope = CSElement.createScope().id;
    
    CSElement.runInScope(this.scope, () => {
      this.data = CSElement.reactive({ values: [] });
      this.setupComputedProperties();
    });
  }
  
  private setupComputedProperties() {
    // Все computed создаются в области класса
    const processed = CSElement.computed(() => {
      return this.data.values.map(v => v * 2);
    });
    
    const filtered = CSElement.computed(() => {
      return processed.value.filter(v => v > 10);
    });
    
    const sum = CSElement.computed(() => {
      return filtered.value.reduce((a, b) => a + b, 0);
    });
  }
  
  destroy() {
    // Очистка всех computed и watchers
    CSElement.disposeScope(this.scope);
  }
}
```

### Вложенные области

```typescript
const parentScope = CSElement.createScope();

CSElement.runInScope(parentScope.id, () => {
  const parentData = CSElement.reactive({ value: 1 });
  
  const childScope = CSElement.createScope();
  
  CSElement.runInScope(childScope.id, () => {
    const childData = CSElement.reactive({ multiplier: 2 });
    
    const result = CSElement.computed(() => {
      return parentData.value * childData.multiplier;
    });
  });
  
  // Очистка только дочерней области
  CSElement.disposeScope(childScope.id);
});

// Очистка родительской области
CSElement.disposeScope(parentScope.id);
```

## ⚙️ Конфигурация

### Настройки Auto-Dispose

```typescript
CSElement.configureReactivity({
  // Включить автоматическую очистку
  autoDispose: true,
  
  // Режим отладки
  debug: true,
  
  // Предупреждения об утечках памяти
  warnMemoryLeaks: true,
  
  // Максимальная глубина computed
  maxComputedDepth: 50,
  
  // Интервал проверки утечек (мс)
  memoryCheckInterval: 10000,
  
  // Пороговое значение для предупреждений
  memoryLeakThreshold: 1000
});
```

### Получение информации об областях

```typescript
// Получение активных областей
const activeScopes = CSElement.getActiveScopes();
console.log(`Активных областей: ${activeScopes.length}`);

// Информация о конкретной области
const scopeInfo = CSElement.getScopeInfo(scope.id);
console.log(`Элементов в области: ${scopeInfo.elementCount}`);
console.log(`Computed в области: ${scopeInfo.computedCount}`);
console.log(`Watchers в области: ${scopeInfo.watcherCount}`);
```

## 🔍 Отладка и мониторинг

### Обнаружение утечек памяти

```typescript
// Включение детального логирования
CSElement.configureReactivity({
  debug: true,
  warnMemoryLeaks: true
});

// Ручная проверка утечек
const leaks = CSElement.detectMemoryLeaks();
if (leaks.length > 0) {
  console.warn('Обнаружены потенциальные утечки:', leaks);
}

// Получение статистики памяти
const stats = CSElement.getMemoryStats();
console.log('Статистика памяти:', {
  totalComputed: stats.computedCount,
  totalWatchers: stats.watcherCount,
  totalScopes: stats.scopeCount,
  memoryUsage: stats.estimatedMemoryUsage
});
```

### События жизненного цикла

```typescript
// Подписка на события очистки
CSElement.onScopeDisposed((scopeId, stats) => {
  console.log(`Область ${scopeId} очищена:`);
  console.log(`- Удалено computed: ${stats.computedDisposed}`);
  console.log(`- Удалено watchers: ${stats.watchersDisposed}`);
  console.log(`- Освобождено памяти: ${stats.memoryFreed}KB`);
});

// Подписка на предупреждения об утечках
CSElement.onMemoryLeak((leak) => {
  console.warn('Утечка памяти:', {
    type: leak.type,
    count: leak.count,
    scope: leak.scopeId,
    stack: leak.stackTrace
  });
});
```

## 🎯 Лучшие практики

### 1. Группировка по компонентам

```typescript
class UserComponent {
  private scope: string;
  
  constructor(userId: string) {
    this.scope = CSElement.createScope().id;
    
    CSElement.runInScope(this.scope, () => {
      this.setupUserData(userId);
    });
  }
  
  private setupUserData(userId: string) {
    const user = CSElement.reactive({ id: userId, data: null });
    
    // Все computed автоматически привязаны к области компонента
    const displayName = CSElement.computed(() => {
      return user.data ? `${user.data.firstName} ${user.data.lastName}` : 'Loading...';
    });
    
    const permissions = CSElement.computed(() => {
      return user.data?.permissions || [];
    });
  }
  
  destroy() {
    CSElement.disposeScope(this.scope);
  }
}
```

### 2. Условная очистка

```typescript
const mainScope = CSElement.createScope();

CSElement.runInScope(mainScope.id, () => {
  const mode = CSElement.reactive({ current: 'development' });
  
  CSElement.watch(() => mode.current, (newMode, oldMode) => {
    if (oldMode === 'development' && newMode === 'production') {
      // Очистка debug-ресурсов при переходе в production
      const debugScope = CSElement.findScope('debug');
      if (debugScope) {
        CSElement.disposeScope(debugScope.id);
      }
    }
  });
});
```

### 3. Автоматическая очистка по таймауту

```typescript
function createTemporaryScope(duration: number = 60000) {
  const scope = CSElement.createScope();
  
  // Автоматическая очистка через указанное время
  setTimeout(() => {
    if (CSElement.isScopeActive(scope.id)) {
      CSElement.disposeScope(scope.id);
      console.log(`Временная область ${scope.id} автоматически очищена`);
    }
  }, duration);
  
  return scope;
}

// Использование
const tempScope = createTemporaryScope(30000); // 30 секунд

CSElement.runInScope(tempScope.id, () => {
  // Временные вычисления
  const tempData = CSElement.reactive({ cache: new Map() });
  
  const cachedResults = CSElement.computed(() => {
    // Кэширование результатов на 30 секунд
    return Array.from(tempData.cache.values());
  });
});
```

## 🔧 Интеграция с другими системами

### React интеграция

```typescript
import { useEffect } from 'react';

function useCSElementScope() {
  const [scope] = useState(() => CSElement.createScope());
  
  useEffect(() => {
    return () => {
      CSElement.disposeScope(scope.id);
    };
  }, [scope.id]);
  
  return scope;
}

// Использование в компоненте
function MyComponent() {
  const scope = useCSElementScope();
  
  useEffect(() => {
    CSElement.runInScope(scope.id, () => {
      // Настройка реактивных данных
      const data = CSElement.reactive({ count: 0 });
      
      const doubled = CSElement.computed(() => data.count * 2);
      
      // Все автоматически очистится при размонтировании компонента
    });
  }, [scope.id]);
  
  return <div>My Component</div>;
}
```

### Worker интеграция

```typescript
// В основном потоке
const workerScope = CSElement.createScope();

CSElement.runInScope(workerScope.id, () => {
  const workerData = CSElement.reactive({ tasks: [] });
  
  const processedTasks = CSElement.computed(() => {
    return workerData.tasks.map(task => ({
      ...task,
      processed: true
    }));
  });
  
  // При завершении работы с worker
  worker.terminate();
  CSElement.disposeScope(workerScope.id);
});
```

## 📊 Производительность

### Метрики производительности

```typescript
// Измерение влияния на производительность
const performanceScope = CSElement.createScope();

const startTime = performance.now();

CSElement.runInScope(performanceScope.id, () => {
  // Создание множества computed
  for (let i = 0; i < 1000; i++) {
    const data = CSElement.reactive({ value: i });
    const computed = CSElement.computed(() => data.value * 2);
  }
});

const creationTime = performance.now() - startTime;

const disposeStartTime = performance.now();
CSElement.disposeScope(performanceScope.id);
const disposeTime = performance.now() - disposeStartTime;

console.log(`Создание: ${creationTime}ms`);
console.log(`Очистка: ${disposeTime}ms`);
```

### Оптимизация памяти

```typescript
// Настройка для оптимальной производительности
CSElement.configureReactivity({
  autoDispose: true,
  
  // Более частая проверка в development
  memoryCheckInterval: process.env.NODE_ENV === 'development' ? 5000 : 30000,
  
  // Более строгие пороги в production
  memoryLeakThreshold: process.env.NODE_ENV === 'production' ? 500 : 1000,
  
  // Ограничение глубины для предотвращения бесконечной рекурсии
  maxComputedDepth: 100
});
```

## 🚨 Устранение неполадок

### Общие проблемы

**Проблема:** Computed не очищаются автоматически
```typescript
// ❌ Неправильно - autoDispose отключен
CSElement.configureReactivity({ autoDispose: false });

// ✅ Правильно
CSElement.configureReactivity({ autoDispose: true });
```

**Проблема:** Утечки памяти в циклических зависимостях
```typescript
// ❌ Неправильно - циклическая зависимость
const a = CSElement.computed(() => b.value + 1);
const b = CSElement.computed(() => a.value + 1); // Циклическая зависимость

// ✅ Правильно - разрыв цикла
const source = CSElement.reactive({ value: 0 });
const a = CSElement.computed(() => source.value + 1);
const b = CSElement.computed(() => source.value + 2);
```

**Проблема:** Области не очищаются
```typescript
// ❌ Неправильно - забыли очистить область
const scope = CSElement.createScope();
CSElement.runInScope(scope.id, () => {
  // код
});
// Область остается в памяти

// ✅ Правильно - всегда очищаем
const scope = CSElement.createScope();
try {
  CSElement.runInScope(scope.id, () => {
    // код
  });
} finally {
  CSElement.disposeScope(scope.id);
}
```

### Диагностика

```typescript
// Включение подробного логирования
CSElement.configureReactivity({
  debug: true,
  logLevel: 'verbose'
});

// Получение детальной информации
const diagnostics = CSElement.getDiagnostics();
console.log('Диагностика Auto-Dispose:', {
  activeScopes: diagnostics.scopes,
  memoryUsage: diagnostics.memory,
  potentialLeaks: diagnostics.leaks,
  performance: diagnostics.performance
});
```

Auto-Dispose система является мощным инструментом для управления памятью в CSElement, обеспечивающим автоматическую очистку и предотвращение утечек памяти в сложных реактивных приложениях.