Rxjs BehaviorSuject 和 Observable 的区别

简介: Rxjs BehaviorSuject 和 Observable 的区别

https://stackoverflow.com/questions/39494058/behaviorsubject-vs-observable


BehaviorSubject is a type of subject, a subject is a special type of observable so you can subscribe to messages like any other observable.


BehaviorSubhect 是一种特殊的 Observable.


The unique features of BehaviorSubject are:


(1) It needs an initial value as it must always return a value on subscription even if it hasn’t received a next().


完整例子:

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
@Component({
  selector: 'app-behavior-subject',
  templateUrl: './behavior-subject.component.html'
})
export class BehaviorSubjectComponent implements OnInit {
  ngOnInit(): void {
    const subject = new BehaviorSubject(123);
    // two new subscribers will get initial value => output: 123, 123
    subject.subscribe((data) => console.log('sub 1: ', data));
    subject.subscribe((data) => console.log('sub 2: ', data));
    // two subscribers will get new value => output: 456, 456
    console.log('subject emits 456!');
    subject.next(456);
    // new subscriber will get latest value (456) => output: 456
    subject.subscribe((data) => console.log('sub 3: ', data));
    // all three subscribers will get new value => output: 789, 789, 789
    console.log('subject emits 789!');
    subject.next(789);
  }
}

立即打印初始值: 123 123

image.png

一旦 BehaviorSubject 被调用 subscribe 方法进行订阅,订阅函数会立即收到最新的数据。


Upon subscription, it returns the last value of the subject. A regular observable only triggers when it receives an onnext.


https://stackoverflow.com/questions/39494058/behaviorsubject-vs-observable


One very very important difference. Since Observable is just a function, it does not have any state, so for every new Observer, it executes the observable create code again and again. This results in:


The code is run for each observer . If its a HTTP call, it gets called for each observer


Observer 只是函数。


BehaviorSubject (or Subject ) stores observer details, runs the code only once and gives the result to all observers .

image.png

Observables

They are cold: Code gets executed when they have at least a single observer.


Creates copy of data: Observable creates copy of data for each observer.


Uni-directional: Observer can not assign value to observable(origin/master).


Subject

They are hot: code gets executed and value gets broadcast even if there is no observer.


Shares data: Same data get shared between all observers.


bi-directional: Observer can assign value to observable(origin/master).


If are using using subject then you miss all the values that are broadcast before creation of observer. So here comes Replay Subject


ReplaySubject

They are hot: code gets executed and value get broadcast even if there is no observer.


Shares data: Same data get shared between all observers.


bi-directional: Observer can assign value to observable(origin/master). plus


Replay the message stream: No matter when you subscribe the replay subject you will receive all the broadcasted messages.


In subject and replay subject you can not set the initial value to observable. So here comes Behavioral Subject


BehaviorSubject

They are hot: code gets executed and value get broadcast even if there is no observer.


Shares data: Same data get shared between all observers.


bi-directional: Observer can assign value to observable(origin/master). plus


Replay the message stream: No matter when you subscribe the replay subject you will receive all the broadcasted messages.


You can set initial value: You can initialize the observable with default value.


The Observable object represents the object that sends notifications (the provider); the Observer object represents the class that receives them (the observer).

相关文章
|
5月前
|
设计模式 JavaScript 前端开发
Rxjs observable 的 subscribeToArray 方法的模拟实现
Rxjs observable 的 subscribeToArray 方法的模拟实现
|
12月前
|
缓存 数据处理 数据格式
Rxjs 里 Observable 对象的 tap 操作
Rxjs 里 Observable 对象的 tap 操作
Rxjs map, mergeMap 和 switchMap 的区别和联系
Rxjs map, mergeMap 和 switchMap 的区别和联系
|
12月前
什么是 Rxjs Observable subscribe 方法的副作用
什么是 Rxjs Observable subscribe 方法的副作用
|
JavaScript
rxjs Observable filter Operator 的实现原理介绍
rxjs Observable filter Operator 的实现原理介绍
|
JavaScript 前端开发 算法
RxJS系列06:测试 Observable
RxJS系列06:测试 Observable
探秘 RxJS Observable 为什么要长成这个样子?!
我们都知道 RxJS Observable 最基础的使用方法:是建立 Observable,即调用 .create API
|
JavaScript 前端开发 定位技术
Observable学习笔记
Observable学习笔记
168 0
Observable学习笔记
|
JavaScript 前端开发 调度
你会用RxJS吗?【初识 RxJS中的Observable和Observer】
概念 RxJS是一个库,可以使用可观察队列来编写异步和基于事件的程序的库。 RxJS 中管理和解决异步事件的几个关键点: Observable: 表示未来值或事件的可调用集合的概念。 Observer: 是一个回调集合,它知道如何监听 Observable 传递的值。 Subscription: 表示一个 Observable 的执行,主要用于取消执行。 Operators:** 是纯函数,可以使用函数式编程风格来处理具有map、filter、concat、reduce等操作的集合。
138 0