Что такое RxJS и Angular Signals и как они применяются?

Введение в реактивное программирование в Angular

Angular — это фреймворк, который активно использует реактивное программирование для создания отзывчивых интерфейсов. Долгое время основным инструментом для этого была библиотека RxJS, которая предоставляет мощные средства для работы с асинхронными потоками данных. Однако с выходом Angular 16 появилась новая встроенная система — Signals, которая предлагает более простой и предсказуемый способ управления состоянием. Понимание различий и областей применения этих инструментов — ключевой навык для разработчика Angular.

Что такое RxJS?

RxJS (Reactive Extensions for JavaScript) — это библиотека, реализующая паттерн Observable. Observable представляет собой поток данных, который может испускать значения с течением времени. Вы можете подписаться на этот поток и реагировать на каждое новое значение. RxJS предоставляет огромный набор операторов (map, filter, mergeMap, debounceTime и другие) для трансформации, комбинирования и управления потоками.

Пример использования RxJS в Angular для обработки HTTP-запроса:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-user',
  template: '<div>{{ user$ | async | json }}</div>'
})
export class UserComponent {
  user$: Observable<any>;

  constructor(private http: HttpClient) {
    this.user$ = this.http.get('/api/user');
  }
}

Здесь мы создаем Observable из HTTP-запроса и используем async pipe в шаблоне для автоматической подписки и отписки. RxJS особенно полезен для сложных сценариев: объединение нескольких запросов, обработка событий мыши, реализация поиска с задержкой (debounce) и т.д.

Что такое Angular Signals?

Signals — это новая система реактивности, встроенная в Angular. Signal — это контейнер, который хранит значение и уведомляет зависимые части приложения об изменениях. В отличие от Observables, Signals работают синхронно и не требуют подписки — они автоматически отслеживают зависимости при чтении значения в вычисляемых сигналах (computed) или в эффектах (effect).

Пример использования Signals:

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ double() }}</p>
    <button (click)="increment()">+</button>
  `
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

  increment() {
    this.count.update(value => value + 1);
  }
}

Здесь count — это сигнал, double — вычисляемый сигнал, который автоматически пересчитывается при изменении count. В шаблоне мы вызываем сигнал как функцию, чтобы получить его значение. Signals отлично подходят для локального состояния компонента, простых вычислений и синхронных обновлений.

Сравнение и выбор инструмента

Основные различия:

• Асинхронность: RxJS работает с асинхронными потоками, Signals — синхронно.
• Подписки: RxJS требует явной подписки и управления отпиской, Signals автоматически управляют зависимостями.
• Сложность: RxJS имеет крутую кривую обучения из-за множества операторов, Signals просты и интуитивны.
• Производительность: Signals более эффективны для частых обновлений состояния, так как не создают накладных расходов на подписки.

На практике рекомендуется использовать Signals для управления состоянием компонентов и простых вычислений, а RxJS — для работы с внешними событиями, HTTP-запросами, WebSocket и другими асинхронными источниками данных. В Angular 17+ можно комбинировать оба подхода: например, преобразовывать Observable в Signal с помощью функции toSignal.

Вывод

RxJS и Signals — это не конкуренты, а взаимодополняющие инструменты. Для простого и предсказуемого состояния выбирайте Signals, для сложных асинхронных потоков — RxJS. Понимание их сильных сторон поможет писать более чистый и эффективный код в Angular.