Что такое реактивное программирование?

Реактивное программирование (Reactive Programming) — парадигма работы с потоками данных

Реактивное программирование (Reactive Programming) — это парадигма программирования, которая сосредоточена на работе с асинхронными потоками данных и пропагацией изменений. Система реагирует на изменения данных автоматически, как доминоэффект.

Основной принцип

Вместо того, чтобы спрашивать у данных "Изменились ли ты?", система слушает и реагирует на изменения:

// Императивный подход (традиционный)
let a = 5;
let b = 10;
let c = a + b;  // c = 15

a = 20;
c = a + b;      // Нужно вручную пересчитать c = 30

// Реактивный подход
let a = 5;
let b = 10;
let c = computed(() => a + b);  // Автоматически пересчитывается

a = 20; // c автоматически становится 30

Примеры реактивности в фреймворках

1. Vue.js - встроенная реактивность

import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

count.value = 5;
console.log(doubled.value); // Автоматически 10

2. React Hooks - управление реактивностью

function Counter() {
  const [count, setCount] = useState(0);
  const [doubled, setDoubled] = useState(0);
  
  // Реагируем на изменение count
  useEffect(() => {
    setDoubled(count * 2);
  }, [count]); // count - зависимость
  
  return <div>{count} × 2 = {doubled}</div>;
}

3. RxJS - функциональное реактивное программирование

import { of, interval } from 'rxjs';
import { map, filter } from 'rxjs/operators';

// Создаём поток данных
const numbers$ = of(1, 2, 3, 4, 5);

// Трансформируем и фильтруем
numbers$
  .pipe(
    filter(n => n % 2 === 0),  // Только чётные
    map(n => n * 2)            // Умножаем на 2
  )
  .subscribe(result => console.log(result));

// Output: 4, 8

Ключевые концепции реактивности

1. Observable - поток данных

import { Observable } from 'rxjs';

const obs$ = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

obs$.subscribe(value => console.log(value));

2. Operators - трансформация потоков

import { of } from 'rxjs';
import { map, filter, take } from 'rxjs/operators';

of(1, 2, 3, 4, 5)
  .pipe(
    filter(x => x > 2),
    map(x => x * 10),
    take(2)
  )
  .subscribe(console.log);
// Output: 30, 40

3. Subjects - горячие потоки (мультикаст)

import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe(value => console.log('Observer 1:', value));
subject.subscribe(value => console.log('Observer 2:', value));

subject.next('Hello'); // Оба наблюдателя получат

Реактивное программирование в Web API

// Пример: реактивный поиск
const searchInput = document.querySelector('#search');

from(searchInput)
  .pipe(
    fromEvent(searchInput, 'input'),
    debounceTime(300),           // Ждём 300ms
    map(event => event.target.value),
    filter(query => query.length > 2),
    switchMap(query => 
      fetch(`/api/search?q=${query}`).then(r => r.json())
    )
  )
  .subscribe(results => console.log(results));

Реактивность в Angular

// Angular полностью построен на RxJS
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  private userSubject = new BehaviorSubject<User | null>(null);
  public user$ = this.userSubject.asObservable();
  
  loadUser(id: string) {
    this.http.get<User>(`/api/users/${id}`)
      .subscribe(user => this.userSubject.next(user));
  }
}

// В компоненте
@Component({
  template: '<div>{{ (userService.user$ | async)?.name }}</div>'
})
export class ProfileComponent {
  constructor(public userService: UserService) {}
}

Преимущества реактивного подхода

• Автоматичность: Изменения пропагируются сами
• Композиция: Легко комбинировать потоки операторов
• Асинхронность: Естественная работа с асинхронными данными
• Отзывчивость: UI реагирует на изменения мгновенно
• Простота логики: Меньше вспомогательного кода

Когда использовать

• Сложные потоки данных и зависимости
• Real-time приложения (чаты, notifications)
• Обработка пользовательского ввода
• WebSocket и Server-Sent Events
• Сложное управление состоянием

Итог

Реактивное программирование — это мощный подход к созданию отзывчивых и масштабируемых приложений, где данные и UI автоматически синхронизируются. Это особенно полезно для фронтенда, где нужна быстрая реакция на события пользователя.