BehaviorSubject vs Observable?

Obserwowalny: inny wynik dla każdego obserwatora

Kod jest uruchamiany dla każdego obserwatora . Jeśli jest to wywołanie HTTP, zostanie wywołane dla każdego obserwatora

To powoduje poważne błędy i nieefektywność

BehaviorSubject (lub Subject ) przechowuje obserwatora szczegóły, uruchamia kod tylko raz i daje wynik wszystkim obserwatorom .

Ex:

JSBin: http://jsbin.com/qowulet/edit?js, konsola

// --- Observable ---
let randomNumGenerator1 = Rx.Observable.create(observer => {
   observer.next(Math.random());
});

let observer1 = randomNumGenerator1
      .subscribe(num => console.log('observer 1: '+ num));

let observer2 = randomNumGenerator1
      .subscribe(num => console.log('observer 2: '+ num));


// ------ BehaviorSubject/ Subject

let randomNumGenerator2 = new Rx.BehaviorSubject(0);
randomNumGenerator2.next(Math.random());

let observer1Subject = randomNumGenerator2
      .subscribe(num=> console.log('observer subject 1: '+ num));
      
let observer2Subject = randomNumGenerator2
      .subscribe(num=> console.log('observer subject 2: '+ num));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.3/Rx.min.js"></script>

Wyjście:

"observer 1: 0.7184075243594013"
"observer 2: 0.41271850211336103"
"observer subject 1: 0.8034263165479893"
"observer subject 2: 0.8034263165479893"

Obserwuj, jak używając Observable.create stworzyliśmy różne wyjście dla każdego obserwatora, ale BehaviorSubject dało to samo wyjście dla wszystkich obserwatorów. To ważne.

Inne różnice podsumowane.

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         Observable                  ┃     BehaviorSubject/Subject         ┃      
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ 
│ Is just a function, no state        │ Has state. Stores data in memory    │
├─────────────────────────────────────┼─────────────────────────────────────┤
│ Code run for each observer          │ Same code run                       │
│                                     │ only once for all observers         │
├─────────────────────────────────────┼─────────────────────────────────────┤
│ Creates only Observable             │Can create and also listen Observable│
│ ( data producer alone )             │ ( data producer and consumer )      │
├─────────────────────────────────────┼─────────────────────────────────────┤
│ Usage: Simple Observable with only  │ Usage:                              │
│ one Obeserver.                      │ * Store data and modify frequently  │
│                                     │ * Multiple observers listen to data │
│                                     │ * Proxy between Observable  and     │
│                                     │   Observer                          │
└─────────────────────────────────────┴─────────────────────────────────────┘

Obserwowalny obiekt reprezentuje zbiór oparty na push.

var subject = new Rx.Subject();

var subscription = subject.subscribe(
    function (x) { console.log('onNext: ' + x); },
    function (e) { console.log('onError: ' + e.message); },
    function () { console.log('onCompleted'); });

subject.onNext(1);
// => onNext: 1

subject.onNext(2);
// => onNext: 2

subject.onCompleted();
// => onCompleted

subscription.dispose();

Więcej o https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md

Jednej rzeczy nie widzę w przykładach jest to, że kiedy rzucasz BehaviorSubject do Observable przez asObservable, dziedziczy zachowanie zwracania ostatniej wartości w subskrypcji.

To trudna sprawa, ponieważ biblioteki często ujawniają pola jako obserwowalne (np. params w ActivatedRoute w Angular2), ale mogą używać Subject lub BehaviorSubject za kulisami. To, czego używają, wpłynęłoby na zachowanie subskrypcji.

Zobacz tutaj http://jsbin.com/ziquxapubo/edit?html, js, console

let A = new Rx.Subject();
let B = new Rx.BehaviorSubject(0);

A.next(1);
B.next(1);

A.asObservable().subscribe(n => console.log('A', n));
B.asObservable().subscribe(n => console.log('B', n));

A.next(2);
B.next(2);

An observable pozwala na subskrybowanie tylko, podczas gdy temat pozwala zarówno publikować, jak i subskrybować.

Więc temat pozwala } usługi być używane zarówno jako wydawca i abonent.

Jak na razie, nie jestem tak dobry w Observable, więc podzielę się tylko przykładem Subject.

Zrozummy lepiej za pomocą przykładukątowego CLI . Uruchom poniższe polecenia:

npm install -g @angular/cli

ng new angular2-subject

cd angular2-subject

ng serve

Zastąp zawartość app.component.html z:

<div *ngIf="message">
  {{message}}
</div>

<app-home>
</app-home>

Uruchom polecenie ng g c components/home, aby wygenerować komponent home. Zamień Zawartość home.component.html na:

<input type="text" placeholder="Enter message" #message>
<button type="button" (click)="setMessage(message)" >Send message</button>

#message jest zmienną lokalną. Dodaj właściwość message: string; do klasy app.component.ts.

Uruchom to polecenie ng g s service/message. Spowoduje to wygenerowanie usługi pod adresem src\app\service\message.service.ts. Udostępnij tę usługę aplikacji .

Importuj Subject do MessageService. Dodaj też temat. Kod końcowy wygląda następująco:

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

@Injectable()
export class MessageService {

  public message = new Subject<string>();

  setMessage(value: string) {
    this.message.next(value); //it is publishing this value to all the subscribers that have already subscribed to this message
  }
}

Teraz wstrzyknij tę usługę w home.component.ts i zdaj instancja tego do konstruktora. Zrób to dla app.component.ts też. Użyj tej instancji usługi do przekazania wartości #message do funkcji usługi setMessage:

import { Component } from '@angular/core';
import { MessageService } from '../../service/message.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  constructor(public messageService:MessageService) { }

  setMessage(event) {
    console.log(event.value);
    this.messageService.setMessage(event.value);
  }
}

import { Component, OnDestroy } from '@angular/core';
import { MessageService } from './service/message.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  message: string;
  subscription: Subscription;

  constructor(public messageService: MessageService) { }

  ngOnInit() {
    this.subscription = this.messageService.message.subscribe(
      (message) => {
        this.message = message;
      }
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

To jest to.

Teraz każda wartość wpisana wewnątrz #message z home.component.html zostanie wydrukowana do {{message}} wewnątrz app.component.html