Subject vs BehaviorSubject в TypeScript: главные отличия

Subject и BehaviorSubject: два брата-акробата в мире реактивного программирования

Если вы когда-нибудь заглядывали на Stack Overflow в обсуждение «What is the difference between Subject and BehaviorSubject?», то знаете: эта тема собирает тысячи просмотров. И неудивительно — это один из тех вопросов, который рано или поздно встаёт перед каждым разработчиком, работающим с RxJS в TypeScript.

Представьте, что вы управляете живой трансляцией данных. Subject — это как открытый микрофон: кто первый подписался, тот и получит всё, что будет сказано после. А BehaviorSubject — это микрофон, который всегда хранит последнюю фразу и сразу же повторяет её новому слушателю. Чувствуете разницу?

В этой статье мы не просто перескажем документацию. Мы разберём реальные кейсы, покажем примеры кода на TypeScript и дадим чёткие правила выбора. Поехали!

Что такое Subject в TypeScript?

Subject — это особый тип Observable, который одновременно является и наблюдателем (Observer). Он может получать данные через метод next() и рассылать их всем подписчикам. Но есть важный нюанс: Subject не хранит предыдущие значения.

Простой пример на TypeScript:

import { Subject } from 'rxjs';

const subject = new Subject<string>();

// Подписываемся после того, как данные уже отправлены
subject.next('Первое сообщение');
subject.next('Второе сообщение');

// Этот подписчик ничего не получит
subject.subscribe({
  next: (value) => console.log('Подписчик:', value)
});

// А это уже будет видно
subject.next('Третье сообщение');

Что выведется в консоль? Только «Подписчик: Третье сообщение». Первые два сообщения потеряны навсегда для этого подписчика. Этот эффект называется «холодным стартом» — вы получаете только те данные, которые были отправлены после подписки.

BehaviorSubject: когда нужно помнить прошлое

BehaviorSubject — это тот же Subject, но с суперспособностью: он всегда хранит последнее значение и выдаёт его новому подписчику сразу при подписке. Обязательное условие — нужно указать начальное значение.

import { BehaviorSubject } from 'rxjs';

const behaviorSubject = new BehaviorSubject<string>('Начальное значение');

// Подписываемся — сразу получаем последнее значение
behaviorSubject.subscribe({
  next: (value) => console.log('Первый подписчик:', value)
});

behaviorSubject.next('Первое обновление');
behaviorSubject.next('Второе обновление');

// Этот подписчик получит 'Второе обновление' сразу
behaviorSubject.subscribe({
  next: (value) => console.log('Второй подписчик:', value)
});

Вывод в консоль:

Первый подписчик: Начальное значение
Первый подписчик: Первое обновление
Первый подписчик: Второе обновление
Второй подписчик: Второе обновление

Видите? Второй подписчик сразу получил последнее значение, хотя подписался позже. Это ключевое отличие BehaviorSubject от Subject.

Сравнение Subject и BehaviorSubject: таблица отличий

Давайте сведём все различия в наглядную таблицу, которая пригодится вам на собеседовании или в реальном проекте.

• Начальное значение: Subject — нет. BehaviorSubject — обязательно требуется.
• Хранение последнего значения: Subject — не хранит. BehaviorSubject — хранит и выдаёт новому подписчику.
• Поведение при поздней подписке: Subject — пропускает все предыдущие события. BehaviorSubject — выдаёт последнее значение.
• Использование с Angular: Subject — для событий (клики, таймеры). BehaviorSubject — для состояния (данные пользователя, настройки).
• Метод getValue(): Subject — отсутствует. BehaviorSubject — есть, возвращает текущее значение синхронно.

Когда использовать Subject, а когда BehaviorSubject?

Это самый частый вопрос, который задают на Stack Overflow. Ответ прост: всё зависит от контекста.

Сценарии для Subject

• Обработка событий (клики, скроллы, нажатия клавиш). Вам не нужно предыдущее событие.
• Временные уведомления (toast, snackbar). Пользователь не должен видеть старые уведомления.
• Поток данных, где важен порядок, а не последнее значение (например, логи).

Пример на TypeScript для обработки кликов:

const clickSubject = new Subject<MouseEvent>();

button.addEventListener('click', (event) => {
  clickSubject.next(event);
});

clickSubject.subscribe((event) => {
  console.log('Клик в координатах:', event.clientX, event.clientY);
});

Сценарии для BehaviorSubject

• Управление состоянием приложения (текущий пользователь, тема, корзина товаров).
• Формы и ввод данных, где нужно знать последнее значение при повторной подписке.
• Реактивные сервисы в Angular, где компоненты подписываются в разное время.

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

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  private userSubject = new BehaviorSubject<User | null>(null);
  user$ = this.userSubject.asObservable();

  setUser(user: User) {
    this.userSubject.next(user);
  }

  get currentUser(): User | null {
    return this.userSubject.getValue();
  }
}

Обратите внимание: мы используем asObservable(), чтобы скрыть метод next() от внешнего кода. Это хорошая практика — не давать компонентам напрямую изменять состояние.

Технические тонкости: что важно знать

Теперь, когда мы разобрались с основами, давайте углубимся в детали, которые часто упускают из виду.

Потокобезопасность и синхронность

И Subject, и BehaviorSubject работают синхронно внутри одного потока. Это значит, что при вызове next() все подписчики получат значение до того, как выполнится следующая строка кода. Но будьте осторожны с асинхронными операциями внутри подписчиков — они могут нарушить порядок.

Метод getValue() у BehaviorSubject

Это мощный инструмент, который позволяет получить текущее значение без подписки. Однако злоупотреблять им не стоит — это нарушает реактивный подход. Используйте getValue() только для синхронных проверок, например, при инициализации.

const counter = new BehaviorSubject<number>(0);
counter.next(5);
console.log(counter.getValue()); // 5

ReplaySubject — золотая середина

Если вам нужно хранить не одно, а несколько последних значений, используйте ReplaySubject. Он принимает параметром количество сохраняемых значений.

import { ReplaySubject } from 'rxjs';

const replaySubject = new ReplaySubject<number>(2);
replaySubject.next(1);
replaySubject.next(2);
replaySubject.next(3);

// Подписчик получит 2 и 3
replaySubject.subscribe(value => console.log(value));