BehaviorSubject vs Observable?

前端 未结 10 2292
迷失自我
迷失自我 2020-11-22 02:17

I\'m looking into Angular RxJs patterns and I don\'t understand the difference between a BehaviorSubject and an Observable.

From my underst

10条回答
  •  北荒
    北荒 (楼主)
    2020-11-22 02:54

    Observable: Different result for each Observer

    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

    This causes major bugs and inefficiencies

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

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

    Output :

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

    Observe how using Observable.create created different output for each observer, but BehaviorSubject gave the same output for all observers. This is important.


    Other differences summarized.

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

提交回复
热议问题