BehaviorSubject vs Observable?

ฉันกำลังมองหาในรูปแบบเชิงมุม RxJs และฉันไม่เข้าใจความแตกต่างระหว่างที่และBehaviorSubjectObservable

จากความเข้าใจของฉัน a BehaviorSubjectคือค่าที่สามารถเปลี่ยนแปลงได้ตลอดเวลา (สามารถสมัครสมาชิกและสมาชิกสามารถรับผลลัพธ์ที่อัปเดต) Observableนี้น่าจะเป็นวัตถุประสงค์เดียวกันที่แน่นอนของ

เมื่อไหร่ที่คุณจะใช้Observablevs a BehaviorSubject? มีประโยชน์ในการใช้BehaviorSubjectมากกว่าObservableหรือในทางกลับกัน?

BehaviorSubjectเป็นประเภทของหัวเรื่องหัวเรื่องเป็นประเภทพิเศษที่สามารถสังเกตได้ดังนั้นคุณสามารถสมัครรับข้อความเหมือนกับที่สังเกตได้อื่น ๆ คุณสมบัติที่เป็นเอกลักษณ์ของ BehaviorSubject คือ:

• มันต้องการค่าเริ่มต้นเนื่องจากมันจะต้องส่งคืนค่าของการสมัครแม้ว่ามันจะไม่ได้รับ next()
• เมื่อสมัครสมาชิกจะส่งคืนค่าสุดท้ายของหัวเรื่อง สิ่งที่สามารถสังเกตได้ปกติจะเรียกใช้เมื่อได้รับonnext
• ณ จุดใดคุณสามารถดึงค่าสุดท้ายของหัวเรื่องในโค้ดที่ไม่สามารถสังเกตได้โดยใช้getValue()วิธีการ

คุณสมบัติที่เป็นเอกลักษณ์ของวัตถุเมื่อเทียบกับสิ่งที่สังเกตได้คือ:

• มันเป็นผู้สังเกตการณ์นอกเหนือจากการสังเกตได้ดังนั้นคุณยังสามารถส่งค่าไปยังเรื่องนอกเหนือจากการสมัครรับข้อมูล

นอกจากนี้คุณจะได้รับข้อสังเกตจากเรื่องพฤติกรรมการใช้วิธีการในการasObservable()BehaviorSubject

Observableเป็น Generic และBehaviorSubjectเป็นเทคนิคย่อยของ Observable เนื่องจาก BehaviorSubject นั้นสามารถสังเกตได้ด้วยคุณสมบัติเฉพาะ

ตัวอย่างกับBehaviorSubject :

// Behavior Subject

// a is an initial value. if there is a subscription 
// after this, it would get "a" value immediately
let bSubject = new BehaviorSubject("a"); 

bSubject.next("b");

bSubject.subscribe(value => {
  console.log("Subscription got", value); // Subscription got b, 
                                          // ^ This would not happen 
                                          // for a generic observable 
                                          // or generic subject by default
});

bSubject.next("c"); // Subscription got c
bSubject.next("d"); // Subscription got d

ตัวอย่างที่ 2 ที่มีหัวเรื่องปกติ:

// Regular Subject

let subject = new Subject(); 

subject.next("b");

subject.subscribe(value => {
  console.log("Subscription got", value); // Subscription wont get 
                                          // anything at this point
});

subject.next("c"); // Subscription got c
subject.next("d"); // Subscription got d

สังเกตที่สามารถสร้างขึ้นจากทั้งสองSubjectและใช้BehaviorSubjectsubject.asObservable()

แตกต่างเพียงถูกคุณไม่สามารถส่งค่าโดยใช้สังเกตnext()วิธีการ

ในบริการเชิงมุมฉันจะใช้BehaviorSubjectบริการข้อมูลเป็นบริการเชิงมุมมักจะเริ่มต้นก่อนที่ส่วนประกอบและพฤติกรรมจะตรวจสอบให้แน่ใจว่าส่วนประกอบที่ใช้บริการได้รับข้อมูลที่อัปเดตล่าสุดแม้ว่าจะไม่มีการปรับปรุงใหม่นับตั้งแต่การสมัครสมาชิกองค์ประกอบของข้อมูลนี้

สังเกตได้: ผลลัพธ์ที่แตกต่างกันสำหรับผู้สังเกตการณ์แต่ละคน

ความแตกต่างที่สำคัญมากอย่างหนึ่ง เนื่องจาก Observable เป็นเพียงฟังก์ชั่นจึงไม่มีสถานะใด ๆ ดังนั้นสำหรับ Observer ใหม่ทุกตัวมันจะเรียกใช้งานสร้างโค้ดที่สังเกตได้อีกครั้งและอีกครั้ง ผลลัพธ์นี้ใน:

รหัสจะถูกเรียกใช้สำหรับผู้สังเกตการณ์แต่ละคน หากการเรียก HTTP มันจะถูกเรียกสำหรับผู้สังเกตการณ์แต่ละคน

สิ่งนี้ทำให้เกิดบั๊กและการไร้ประสิทธิภาพที่สำคัญ

BehaviorSubject (หรือ Subject) เก็บรายละเอียดของผู้สังเกตการณ์รันโค้ดเพียงครั้งเดียวและให้ผลลัพธ์แก่ผู้สังเกตการณ์ทั้งหมด

Ex:

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

// --- 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>

ผลผลิต:

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

สังเกตว่าการใช้Observable.createสร้างเอาต์พุตที่แตกต่างกันสำหรับผู้สังเกตการณ์แต่ละคนอย่างไร แต่BehaviorSubjectให้ผลลัพธ์เดียวกันสำหรับผู้สังเกตการณ์ทุกคน นี้เป็นสิ่งสำคัญ.

สรุปความแตกต่างอื่น ๆ

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         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                          ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

สังเกตและเรื่องทั้งสองเป็นของที่สังเกตได้หมายความว่าผู้สังเกตการณ์สามารถติดตามได้ แต่ทั้งคู่มีลักษณะเฉพาะบางอย่าง นอกจากนี้ยังมีประเภทของอาสาสมัครทั้งหมด 3 ประเภทแต่ละคนมีลักษณะเฉพาะอีกครั้ง ลองทำความเข้าใจแต่ละเรื่อง

คุณสามารถหาตัวอย่างในทางปฏิบัติที่นี่ในstackblitz (คุณต้องตรวจสอบคอนโซลเพื่อดูเอาต์พุตจริง)

Observables

พวกเขาเย็นชา:รหัสถูกประหารชีวิตเมื่อพวกเขามีผู้สังเกตการณ์อย่างน้อยหนึ่งคน

สร้างสำเนาข้อมูล:สังเกตได้สร้างสำเนาข้อมูลสำหรับผู้สังเกตการณ์แต่ละคน

ทิศทางเดียว: ผู้สังเกตการณ์ไม่สามารถกำหนดค่าให้กับสิ่งที่สังเกตได้ (ต้นกำเนิด / ต้นแบบ)

Subject

มันร้อน:โค้ดถูกเรียกใช้และค่าจะถูกถ่ายทอดแม้ว่าจะไม่มีผู้สังเกตการณ์

แชร์ข้อมูล: ข้อมูลเดียวกันจะถูกแชร์ระหว่างผู้สังเกตการณ์ทุกคน

สองทิศทาง: ผู้สังเกตการณ์สามารถกำหนดค่าให้กับสิ่งที่สังเกตได้ (ต้นกำเนิด / ต้นแบบ)

หากใช้การใช้หัวเรื่องคุณจะพลาดค่าทั้งหมดที่ถ่ายทอดก่อนการสร้างผู้สังเกตการณ์ ดังนั้นที่นี่Replay Subject

ReplaySubject

มันร้อน:โค้ดถูกประมวลผลและความคุ้มค่าจะได้รับการถ่ายทอดแม้ว่าจะไม่มีผู้สังเกตการณ์ก็ตาม

แชร์ข้อมูล: ข้อมูลเดียวกันจะถูกแชร์ระหว่างผู้สังเกตการณ์ทุกคน

สองทิศทาง: ผู้สังเกตการณ์สามารถกำหนดค่าให้กับสิ่งที่สังเกตได้ (ต้นกำเนิด / ต้นแบบ) บวก

เล่นซ้ำสตรีมข้อความ:ไม่ว่าคุณจะสมัครรับเรื่องรีเพลย์คุณจะได้รับข้อความที่ออกอากาศทั้งหมด

ในเรื่องและเล่นซ้ำเรื่องคุณไม่สามารถตั้งค่าเริ่มต้นเป็นที่สังเกตได้ ดังนั้นที่นี่เรื่องพฤติกรรมมา

BehaviorSubject

มันร้อน:โค้ดถูกประมวลผลและความคุ้มค่าจะได้รับการถ่ายทอดแม้ว่าจะไม่มีผู้สังเกตการณ์ก็ตาม

แชร์ข้อมูล: ข้อมูลเดียวกันจะถูกแชร์ระหว่างผู้สังเกตการณ์ทุกคน

สองทิศทาง: ผู้สังเกตการณ์สามารถกำหนดค่าให้กับสิ่งที่สังเกตได้ (ต้นกำเนิด / ต้นแบบ) บวก

เล่นซ้ำสตรีมข้อความ:ไม่ว่าคุณจะสมัครรับเรื่องรีเพลย์คุณจะได้รับข้อความที่ออกอากาศทั้งหมด

คุณสามารถตั้งค่าเริ่มต้น:คุณสามารถเริ่มต้นสิ่งที่สังเกตได้ด้วยค่าเริ่มต้น

อ็อบเจกต์ Observable แสดงถึงคอลเลกชันที่มีการผลักดัน

อินเตอร์เฟส Observer และ Observable จัดเตรียมกลไกทั่วไปสำหรับการแจ้งเตือนแบบพุชหรือที่เรียกว่ารูปแบบการออกแบบผู้สังเกตการณ์ วัตถุสังเกตได้หมายถึงวัตถุที่ส่งการแจ้งเตือน (ผู้ให้บริการ); วัตถุผู้สังเกตการณ์แสดงถึงคลาสที่ได้รับพวกเขา (ผู้สังเกต)

คลาส Subject สืบทอดทั้ง Observable และ Observer ในแง่ที่ว่าทั้ง Observer และ Obnotable คุณสามารถใช้หัวเรื่องเพื่อสมัครผู้สังเกตการณ์ทั้งหมดแล้วสมัครเรื่องกับแหล่งข้อมูลเบื้องหลัง

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();

เพิ่มเติมเกี่ยวกับhttps://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md

สิ่งหนึ่งที่ฉันไม่เห็นในตัวอย่างคือเมื่อคุณส่ง BehaviorSubject ไปที่ Observable ผ่าน asObservable มันจะสืบทอดพฤติกรรมของการคืนค่าสุดท้ายในการสมัครสมาชิก

มันเป็นบิตที่ยุ่งยากเนื่องจากบ่อยครั้งที่ห้องสมุดจะเปิดเผยฟิลด์เป็นที่สังเกตได้ (เช่น params ใน ActivatedRoute ใน Angular2) แต่อาจใช้ Subject หรือ BehaviorSubject เบื้องหลัง สิ่งที่พวกเขาใช้จะมีผลต่อพฤติกรรมการสมัครสมาชิก

ดูที่นี่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);

ข้อสังเกตช่วยให้คุณสมัครสมาชิกได้เฉพาะในขณะที่หัวเรื่องให้คุณเผยแพร่และสมัครสมาชิก

หัวเรื่องช่วยให้บริการของคุณสามารถใช้เป็นทั้งผู้เผยแพร่และผู้สมัครสมาชิก

ณ ตอนนี้ฉันไม่ดีเพื่อที่ดังนั้นฉันจะแบ่งปันเพียงตัวอย่างหนึ่งของการObservableSubject

มาทำความเข้าใจให้ดีขึ้นด้วยตัวอย่างAngular CLI เรียกใช้คำสั่งด้านล่าง:

npm install -g @angular/cli

ng new angular2-subject

cd angular2-subject

ng serve

แทนที่เนื้อหาapp.component.htmlด้วย:

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

<app-home>
</app-home>

รันคำสั่งng g c components/homeเพื่อสร้างคอมโพเนนต์โฮม แทนที่เนื้อหาhome.component.htmlด้วย:

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

#messageเป็นตัวแปรท้องถิ่นที่นี่ เพิ่มคุณสมบัติmessage: string; ให้กับapp.component.tsคลาสของ

เรียกใช้คำสั่งng g s service/messageนี้ src\app\service\message.service.tsนี้จะสร้างบริการที่ มอบบริการนี้ให้กับแอพพ

นำเข้าลงในSubject MessageServiceเพิ่มหัวเรื่องด้วย รหัสสุดท้ายจะมีลักษณะเช่นนี้:

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
  }
}

ตอนนี้ฉีดบริการนี้home.component.tsและส่งตัวอย่างของมันไปยังผู้สร้าง ทำเช่นนี้app.component.tsด้วย ใช้อินสแตนซ์ของบริการนี้เพื่อส่งผ่านค่าของ#messageไปยังฟังก์ชันบริการ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);
  }
}

ข้างในapp.component.tsสมัครและยกเลิกการเป็นสมาชิก (เพื่อป้องกันการรั่วไหลของหน่วยความจำ) ไปที่Subject:

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();
  }
}

แค่นั้นแหละ.

ตอนนี้ค่าใด ๆ เข้ามาภายใน#messageของhome.component.htmlจะได้รับการพิมพ์{{message}}ภายในapp.component.html

app.component.ts

behaviourService.setName("behaviour");

behaviour.service.ts

private name = new BehaviorSubject("");
getName = this.name.asObservable();`

constructor() {}

setName(data) {
    this.name.next(data);
}

custom.component.ts

behaviourService.subscribe(response=>{
    console.log(response);    //output: behaviour
});

BehaviorSubject vs Observable : RxJS มีผู้สังเกตการณ์และผู้สังเกตการณ์ Rxjs เสนอคลาสหลายคลาสเพื่อใช้กับสตรีมข้อมูลและหนึ่งในนั้นคือ BehaviorSubject

สิ่งที่สังเกตได้ : สิ่งที่สังเกตได้คือการรวบรวมหลายค่าเมื่อเวลาผ่านไป

BehaviorSubject : หัวเรื่องที่ต้องการค่าเริ่มต้นและส่งค่าปัจจุบันไปยังผู้สมัครสมาชิกใหม่

 // RxJS v6+
import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);

//two new subscribers will get initial value => output: 123, 123
subject.subscribe(console.log);
subject.subscribe(console.log);

//two subscribers will get new value => output: 456, 456
subject.next(456);

//new subscriber will get latest value (456) => output: 456
subject.subscribe(console.log);

//all three subscribers will get new value => output: 789, 789, 789
subject.next(789);

// output: 123, 123, 456, 456, 456, 789, 789, 789

คิดว่าสิ่งที่สังเกตได้เป็นท่อที่มีน้ำไหลอยู่ในนั้นบางครั้งน้ำไหลและบางครั้งก็ไม่ได้ ในบางกรณีคุณอาจต้องการท่อที่มีน้ำอยู่เสมอคุณสามารถทำได้โดยการสร้างท่อพิเศษที่มีน้ำเสมอไม่ว่าเล็กแค่ไหนให้โทรไปที่ท่อพิเศษนี้BehaviorSubjectนี้ถ้าคุณเกิดขึ้น ผู้ให้บริการน้ำประปาในชุมชนของคุณคุณสามารถนอนหลับอย่างสงบสุขในเวลากลางคืนเพราะรู้ว่าท่อที่เพิ่งติดตั้งใหม่ของคุณใช้งานได้

ในแง่เทคนิค: คุณอาจพบประโยชน์ที่สังเกตได้ควรมีคุณค่าอยู่เสมอบางทีคุณอาจต้องการเก็บค่าของข้อความที่ป้อนเมื่อเวลาผ่านไปจากนั้นคุณสามารถสร้างอินสแตนซ์ของ BehaviorSubject เพื่อให้แน่ใจว่าพฤติกรรมประเภทนี้สมมติว่า:

const firstNameChanges = new BehaviorSubject("<empty>");

// pass value changes.
firstNameChanges.next("Jon");
firstNameChanges.next("Arya");

จากนั้นคุณสามารถใช้ "ค่า" เพื่อเก็บตัวอย่างการเปลี่ยนแปลงเมื่อเวลาผ่านไป

firstNameChanges.value;

นี้มามีประโยชน์เมื่อคุณรวม observables ต่อมาโดยการดูที่ชนิดของกระแสของคุณเป็น BehaviorSubject แล้วคุณสามารถมั่นใจได้ว่ากระแสที่เกิดเพลิงไหม้อย่างน้อยหรือสัญญาณเพียงครั้งเดียว atleast