BehaviorSubject와 Observable의 차이점은 무엇입니까?
RxJS의 디자인 패턴과 RxJS의 디자인 패턴의 할 수 .BehaviorSubject그리고.Observable.
BehaviorSubject는 변경될 수 있는 값을 포함할 수 있는 것으로 알고 있습니다.구독할 수 있으며 구독자는 업데이트된 값을 받을 수 있습니다.둘 다 정확히 같은 목적을 가지고 있는 것 같습니다.
- 관찰 가능한 대상 대 행동 주체를 사용해야 하는 경우와 그 반대의 경우는 언제입니까?
- 관찰 가능한 것과 반대로 BehaviorSubject를 사용하면 어떤 이점이 있습니까?
BehaviorSubject는 의변니다의 입니다.Subject 한 Observable다른 관찰 가능한 것처럼 "구독"할 수 있습니다.
행동 주체의 특징
- Method를 합니다.
next() - 구독 시 제목의 마지막 값을 반환합니다.일반적인 관찰 가능 항목은 메서드를 수신할 때만 트리거됩니다.
onNext() - 할 수 없는 할 수 은 언든지메사관수찰없할다있수니습제값입니다.
getValue()
주제의 특징
- 제목은 "관찰자"일 뿐만 아니라 "관찰자"이므로, 제목에 등록하는 동안 값을 보낼 수도 있습니다.
- 에서 BehaviorSubject 수 .
asObservable()
BehaviorSubject를 사용한 예 1
// BehaviorSubject.
// 'A' is an initial value. If there is a Subscription
// after it, it would immediately get the value 'A'.
beSubject = new BehaviorSubject('a');
beSubject.next('b');
beSubject.subscribe(value => {
console.log('Subscription received the value ', value);
// Subscription received B. It would not happen
// for an Observable or Subject by default.
});
beSubject.next('c');
// Subscription received C.
beSubject.next('d');
// Subscription received D.
제목 사용 예제 2
// Subject.
subject = new Subject();
subject.next('b');
subject.subscribe(value => {
console.log('Subscription received the value ', value);
// Subscription won't receive anything at this point.
});
subject.next('c');
// Subscription received C.
subject.next('d');
// Subscription received D.
관찰 가능한 항목은 두 항목에서 모두 생성할 수 있습니다.Subject그리고.BehaviorSubject를 들면, 예를들면,subjectName.asObservable().
유일한 차이점은 방법을 사용하여 관측 가능한 값을 보낼 수 없다는 것입니다.next().
에서는 Angular 서다사것는좋습이니다하용에을음▁를 사용하는 것이 좋습니다.BehaviorSubject서비스로서의 데이터 전송은 종종 구성 요소보다 먼저 초기화됩니다.
BehaviorSubject는 서비스를 사용하는 구성 요소가 서비스에 대한 구성 요소의 가입으로 인해 새 업데이트가 없는 경우에도 마지막으로 업데이트된 데이터를 수신하도록 보장합니다.
관찰 가능: 관찰자마다 다른 결과
아주 중요한 차이점이 하나 있습니다.Observable은 단순한 함수이므로 상태가 없으므로 모든 새로운 Observer에 대해 관찰 가능한 생성 코드를 반복적으로 실행합니다.그 결과:
코드는 각 관찰자에 대해 실행됩니다. HTTP 호출이면 각 관찰자에 대해 호출됩니다.
이로 인해 주요 버그 및 비효율성이 발생합니다.
BehaviorSubject(또는 Subject)는 관찰자 세부 정보를 저장하고 코드를 한 번만 실행하며 모든 관찰자에게 결과를 제공합니다.
예:
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 각관찰에대다출생성력만지했을른해자,▁created만▁for지각,했생▁different▁output.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 ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
Observable(관찰 가능)과 Subject(제목)는 모두 Observable(관찰 가능)의 것이므로 관찰자가 추적할 수 있습니다.둘 다 독특한 특징을 가지고 있습니다.과목에는 세 가지 유형이 있으며, 각 유형은 고유한 특성도 가지고 있습니다.
여기 스택블리츠에서 실제 사례를 찾을 수 있습니다.(실제 출력을 보려면 콘솔을 확인해야 합니다.)
Observables
그들은 차갑습니다: 코드는 적어도 한 명의 관찰자가 있을 때 실행됩니다.
데이터 복사본 생성: 관찰 가능은 각 관찰자에 대한 데이터 복사본을 생성합니다.
단방향: 관찰자는 관찰 가능한 값(원점/마스터)에 값을 할당할 수 없습니다.
Subject
관찰자가 없어도 코드가 실행되고 값이 브로드캐스트됩니다.
데이터 공유: 모든 관찰자 간에 동일한 데이터가 공유됩니다.
양방향: 관찰자는 관찰 가능한 값(원점/마스터)에 값을 할당할 수 있습니다.
제목을 사용하는 경우 관찰자를 만들기 전에 브로드캐스트되는 모든 값을 놓치게 됩니다.자, 주제 다시보기가 시작됩니다.
ReplaySubject
그들은 핫합니다: 관찰자가 없어도 코드가 실행되고 값이 브로드캐스트됩니다.
데이터 공유: 모든 관찰자 간에 동일한 데이터가 공유됩니다.
양방향: 관찰자는 관찰 가능한 값(원점/마스터)에 값을 할당할 수 있습니다.플러스
메시지 스트림 재생:재생 제목을 구독하면 모든 브로드캐스트 메시지가 수신됩니다.
제목 및 재생 제목에서 초기 값을 관측 가능으로 설정할 수 없습니다.자, 행동 주체가...
BehaviorSubject
그들은 핫합니다: 관찰자가 없어도 코드가 실행되고 값이 브로드캐스트됩니다.
데이터 공유: 모든 관찰자 간에 동일한 데이터가 공유됩니다.
양방향: 관찰자는 관찰 가능한 값(원점/마스터)에 값을 할당할 수 있습니다.플러스
메시지 스트림 재생:재생 제목을 구독하면 모든 브로드캐스트 메시지가 수신됩니다.
초기 값을 설정할 수 있습니다.기본값을 사용하여 관찰 가능한 항목을 초기화할 수 있습니다.
관찰 가능 개체는 푸시 기반 컬렉션을 나타냅니다.
관찰자 및 관찰 가능한 인터페이스는 관찰자 설계 패턴이라고도 하는 푸시 기반 알림을 위한 일반화된 메커니즘을 제공합니다.관찰 가능 개체는 알림을 보내는 개체(공급자)를 나타내고, 관찰자 개체는 알림을 받는 클래스(관찰자)를 나타냅니다.
제목 클래스는 관찰자이자 관찰자라는 의미에서 관찰자와 관찰자를 모두 상속합니다.제목을 사용하여 모든 관찰자를 구독한 다음 제목을 백엔드 데이터 원본에 구독할 수 있습니다.
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를 캐스팅하면 구독 시 마지막 값을 반환하는 동작을 상속한다는 것입니다.
라이브러리는 종종 필드를 관찰 가능한 대로 노출하지만(즉, Angular2의 ActivatedRoute의 Params), 뒤에서 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);
관찰 가능 항목은 게시 및 구독을 모두 허용하는 반면, 관찰 가능 항목은 구독만 허용합니다.
따라서 제목을 사용하면 서비스를 게시자와 구독자로 모두 사용할 수 있습니다.
지금으로선, 저는 그렇게 잘하지 못합니다.Observable그래서 저는 단지 예를 하나만 공유하겠습니다.Subject.
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();
}
}
바로 그겁니다.
자, 내에 .#messagehome.component.html는 되어합다니야에쇄인▁be▁to▁printed로 합니다.{{message}}東京의 app.component.html
관찰할 수 있는 것을 흐르는 물이 있는 파이프라고 생각하면, 어떤 때는 물이 흐르고 어떤 때는 그렇지 않습니다.어떤 경우에는 항상 물이 들어있는 파이프가 실제로 필요할 수도 있습니다. 아무리 작은 파이프라도 항상 물을 포함하는 특별한 파이프를 만들어서 이를 수행할 수 있습니다. 이 특별한 파이프를 BehaviorSubject라고 부릅니다. 만약 당신이 당신의 지역사회에서 물 공급자라면,당신은 당신의 새로 설치된 파이프가 단지 작동한다는 것을 알고 밤에 평화롭게 잠을 잘 수 있습니다.
기술적인 측면에서: 관찰 가능 항목에 항상 값이 포함되어야 하는 사용 사례가 발생할 수 있습니다. 시간이 지남에 따라 입력 텍스트의 값을 캡처하려는 경우 BehaviorSubject 인스턴스를 생성하여 이러한 동작을 보장할 수 있습니다.
const firstNameChanges = new BehaviorSubject("<empty>");
// pass value changes.
firstNameChanges.next("Jon");
firstNameChanges.next("Arya");
그런 다음 "값"을 사용하여 시간 경과에 따른 변경 사항을 샘플링할 수 있습니다.
firstNameChanges.value;
나중에 관찰할 수 있는 항목을 결합할 때 유용합니다. 그러면 스트림 유형을 BehaviorSubject로 확인하여 스트림이 적어도 한 번만 실행되거나 신호가 전송되도록 할 수 있습니다.
app.component.ts
behaviourService.setName("behaviour");
행동.서비스.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입니다.
관측 가능: 관측 가능은 시간이 지남에 따라 여러 값의 게으른 집합입니다.
동작 주체:초기 값이 필요하고 현재 값을 새 구독자에게 보내는 제목입니다.
// 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: 초기값이 필요하고 현재값을 새 가입자에게 보내는 Subject입니다.
BehaviorSubject는 특정 품질로 관찰할 수 있기 때문에 기술적으로 관찰 가능한 하위 유형입니다.
상태가 있습니다.데이터를 메모리에 저장
모든 관찰자에 대해 동일한 코드가 한 번만 실행됨
BehaviorSubject의 고유한 기능은 다음과 같습니다.
다음()을 받지 못했더라도 항상 구독 시 값을 반환해야 하므로 초기 값이 필요합니다.
구독 시 제목의 마지막 값을 반환합니다.일반적으로 관찰 가능한 항목은 다음에 ON을 수신할 때만 트리거됩니다.
언제든지 getValue() 메서드를 사용하여 관찰할 수 없는 코드에서 제목의 마지막 값을 검색할 수 있습니다.
rxjs의 피사체는 본질적으로 관찰자이며 함께 관측 가능한 매시드입니다.관찰자는 우리가 가치에 던지는 것이고, 관찰할 수 있는 것은 우리가 가치를 위해 지켜볼 수 있는 것입니다.
- 제목은 기본적으로 핫입니다.기본적으로 관찰 가능한 항목은 콜드입니다.이것은 누군가가 그것에 가입할 때까지 그들이 어떤 가치도 발산하지 않을 것이라는 것을 의미합니다.우리가 주제를 만드는 순간, 우리는 그것으로부터 가치를 방출할 수 있고 아직 아무도 그것에 가입하지 않았더라도 그 가치는 방출될 것입니다.
- 제목은 기본적으로 멀티캐스트입니다.기본적으로 관찰 가능한 것은 유니캐스트이며, 이는 우리가 가지고 있는 모든 다른 관찰자에 대해 관찰 가능한 것에 가입해야 한다는 것을 의미합니다. 만약 관찰 가능한 것이 각 가입자에 대해 파이프 내부의 모든 다른 연산자를 통해 값이 한 번씩 흐를 것이라는 것을 의미합니다.멀티캐스트는 관찰자 수에 관계없이 모든 다른 연산자가 모든 값에 대해 한 번 실행된다는 것을 의미합니다.
- GOTCHA= 주제는 멀티캐스트이지만 파이프 문에 체인을 연결하면 차갑고 유니캐스트인 새로운 관찰 가능 항목이 반환됩니다.
동작 주체는 주체와 동일하지만 초기 "시드" 값을 사용합니다.신규 가입자는 즉시 가장 최근의 가치를 얻습니다.만약 누군가가 행동 주제를 구독한다면, 그것은 가장 최근의 가치가 무엇이든 즉시 받을 것입니다.따라서 행동 주체는 항상 가입자에게 제공할 수 있는 가치가 있습니다.
행동 주체에서 가장 유용한 것은 네트워크 요청을 시작할 때입니다.우리가 어떤 행동 주체에 파이프를 연결하고 파이프 함수나 파이프 오퍼레이터 안에서 네트워크 요청을 하고 데이터를 가져온다고 상상해 보십시오.최종적으로 관찰할 수 있는 다른 항목을 구독하고 즉시 데이터를 가져올 수 있습니다.우리는 행동 주체를 사용하여 그러한 행동을 쉽게 구현할 수 있습니다.
동작 주체
BehaviorSubject는 ReplaySubject와 동일한 기능, 제목, 핫 및 이전 값 재생을 기반으로 합니다.
BehaviorSubject는 BehaviorSubject에 초기 값을 제공할 수 있는 기능을 하나 더 추가합니다.이제 코드를 살펴보도록 하겠습니다.
import { ReplaySubject } from 'rxjs';
const behaviorSubject = new BehaviorSubject(
'hello initial value from BehaviorSubject'
);
behaviorSubject.subscribe(v => console.log(v));
behaviorSubject.next('hello again from BehaviorSubject');
관찰 가능한 항목
시작하기 위해 일반적인 관찰 가능 파일을 만들기 위한 최소 API를 살펴보겠습니다.관찰 가능한 항목을 만드는 방법은 몇 가지가 있습니다.관찰 가능한 항목을 만드는 방법은 클래스를 인스턴스화하는 것입니다.다른 운영자는 이를 단순화할 수 있지만, 인스턴스화 단계를 다른 관찰 가능 유형과 비교하고자 합니다.
import { Observable } from 'rxjs';
const observable = new Observable(observer => {
setTimeout(() => observer.next('hello from Observable!'), 1000);
});
observable.subscribe(v => console.log(v));
저는 관찰 가능한 것이 주제에 대한 포장지라고 생각합니다.관측 가능은 데이터 변경 내용을 구독하는 데만 사용되었습니다.제목을 사용하여 가입자에게 데이터 변경 사항을 알릴 수도 있습니다(next() 메서드 사용).다음은 개념을 이해하는 데 도움이 될 수 있는 관찰 가능한 작은 패턴 구현입니다.TypeScript Playground
또한 주제를 다음과 같이 관찰 가능한 항목으로 변경할 수 있습니다.
page = new BehaviorSubject<String|null>(null);
actualPage:Observable<string> = new Observable()
this.page.next("hardware")
this.actualPage = this.page as Observable<any>;
언급URL : https://stackoverflow.com/questions/39494058/what-is-the-difference-between-behaviorsubject-and-observable
'programing' 카테고리의 다른 글
| 프로그램에서 던져진 예외에 대한 강제 중단 (0) | 2023.05.08 |
|---|---|
| 자동 레이아웃을 사용하여 전체 너비의 백분율을 만드는 방법은 무엇입니까? (0) | 2023.05.08 |
| 원격 Git 저장소에서 마지막 커밋 제거 (0) | 2023.05.08 |
| 가상 환경을 이동할 수 있습니까? (0) | 2023.05.08 |
| MacOS X에 Node.js, nvm 및 npm을 설치하는 권장 방법은 무엇입니까? (0) | 2023.05.08 |