¿Cuál es la diferencia entre Subject y BehaviorSubject?

331

No tengo clara la diferencia entre a Subjecty a BehaviorSubject. ¿Es solo que a BehaviorSubjecttiene la getValue()función?

426

Un BehaviorSubject tiene un valor. Cuando se suscribe emite el valor de inmediato. Un sujeto no tiene valor.

Ejemplo de sujeto (con API RxJS 5):

const subject = new Rx.Subject();
subject.next(1);
subject.subscribe(x => console.log(x));

La salida de la consola estará vacía

BehaviorSubject ejemplo:

const subject = new Rx.BehaviorSubject(0);
subject.next(1);
subject.subscribe(x => console.log(x));

Salida de consola: 1

Además:

  • BehaviorSubject debe crearse con un valor inicial: nuevo Rx.BehaviorSubject(1)
  • Considere ReplaySubjectsi desea que el sujeto tenga más de un valor
6
  • 28
    Entonces, ¿quieres decir que tienes que suscribirte a subject antes de subject.next () para que esto funcione? 28 de junio de 2018 a las 3:02
  • 7
    @eric para Asunto, sí. Esa es la distinción. 6 de julio de 2018 a las 23:46
  • 13
    Tenga en cuenta que debe pasar el primer valor al constructor de BehaviorSubject;) 23 de septiembre de 2018 a las 8:02
  • si creamos sujeto con booleano incluso sujeto emite rito ?? const subject = new Subject <boolean> (); sujeto.siguiente (verdadero); 26/02/20 a las 7:20
  • 2
    Si ayuda: Sujetos = Evento - BehaviorSubject = Estado; 11 de mayo de 2020 a las 11:37
303

BehaviourSubject

BehaviourSubject devolverá el valor inicial o el valor actual en la suscripción

var bSubject= new Rx.BehaviorSubject(0);  // 0 is the initial value

bSubject.subscribe({
  next: (v) => console.log('observerA: ' + v)  // output initial value, then new values on `next` triggers
});

bSubject.next(1);  // output new value 1 for 'observer A'
bSubject.next(2);  // output new value 2 for 'observer A', current value 2 for 'Observer B' on subscription

bSubject.subscribe({
  next: (v) => console.log('observerB: ' + v)  // output current value 2, then new values on `next` triggers
});

bSubject.next(3);

Con salida:

observerA: 0
observerA: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

Tema

El sujeto no devuelve el valor actual de la suscripción. Se activa solo en la .next(value)llamada y devuelve / emite elvalue

var subject = new Rx.Subject();

subject.next(1); //Subjects will not output this value

subject.subscribe({
  next: (v) => console.log('observerA: ' + v)
});
subject.subscribe({
  next: (v) => console.log('observerB: ' + v)
});

subject.next(2);
subject.next(3);

Con la siguiente salida en la consola:

observerA: 2
observerB: 2
observerA: 3
observerB: 3
4
  • 21
    También es más correcto: "BehaviourSubject devolverá el valor inicial o el valor actual en la suscripción" es una mejor explicación que "Un BehaviourSubject tiene un valor".
    Davy
    22/06/18 a las 13:28
  • 1
    Puse el código de arriba en Stackblitz: stackblitz.com/edit/rxjs-subjectvsbehaviorsubject 26 oct 2018 a las 22:22
  • ¿Dónde está el observador B: 3?
    OPV
    8 de mayo de 2019 a las 9:31
  • @OPV ObserverB: 3 está ahí mientras llamas subject.next(3); 8 de mayo de 2019 a las 11:30
107

Acabo de crear un proyecto que explica cuál es la diferencia entre todos los temas :
https://github.com/piecioshka/rxjs-subject-vs-behavior-vs-replay-vs-async

ingrese la descripción de la imagen aquí

1
  • 2
    consejos sencillos y soberbios ... ¡Gracias! 1 de julio a las 6:05
18

BehaviorSubjectguarda en memoria el último valor que fue emitido por lo observable. Un regular Subjectno lo hace.

BehaviorSubjectes como ReplaySubjectcon un tamaño de búfer de 1.

ACTUALIZACIÓN: Hay casos de uso de vanguardia que distinguen a esos dos. https://medium.com/javascript-everyday/behaviorsubject-vs-replaysubject-1-beware-of-edge-cases-b361153d9ccf

TLDR: si desea proporcionar un valor inicial en el momento de la suscripción, incluso si no se ha enviado nada a un Asunto hasta el momento, use BehaviorSubject. Si desea que el último valor se vuelva a reproducir para un observador, incluso si un Asunto ya está cerrado, use ReplaySubject (1).

14

Puede que te ayude a comprender.

import * as Rx from 'rxjs';

const subject1 = new Rx.Subject();
subject1.next(1);
subject1.subscribe(x => console.log(x)); // will print nothing -> because we subscribed after the emission and it does not hold the value.

const subject2 = new Rx.Subject();
subject2.subscribe(x => console.log(x)); // print 1 -> because the emission happend after the subscription.
subject2.next(1);

const behavSubject1 = new Rx.BehaviorSubject(1);
behavSubject1.next(2);
behavSubject1.subscribe(x => console.log(x)); // print 2 -> because it holds the value.

const behavSubject2 = new Rx.BehaviorSubject(1);
behavSubject2.subscribe(x => console.log('val:', x)); // print 1 -> default value
behavSubject2.next(2) // just because of next emission will print 2 
0

Un BehaviorSubject emite un valor después de la suscripción, un Subject no.

// Subject
const mySubject = new Rx.Subject().subscribe((v) => console.log(v)); // will return nothing

// BehaviorSubject
const myBehaviorSubject = new Rx.BehaviorSubject(666).subscribe((v) => console.log(v)); // will return 666 when subscription occurs

0
BehaviorSubject keeps in memory the last value that was emitted by the observable. A regular Subject doesn't. So we can update dynamic titles based on Behaviour Subject.


var bSubject= new Rx.BehaviorSubject(0);  // 0 is the initial value
    
    bSubject.subscribe({
      next: (v) => console.log('observerA: ' + v)  // output initial value, then new values on `next` triggers
    });
    
    bSubject.next(1);  // output new value 1 for 'observer A'
    bSubject.next(2);  // output new value 2 for 'observer A', current value 2 for 'Observer B' on subscription
    
    bSubject.subscribe({
      next: (v) => console.log('observerB: ' + v)  // output current value 2, then new values on `next` triggers
    });
    
    bSubject.next(3);
    
     - With Output