Angular 의 RxJS 분석

본문 구조:

무엇이 RxJS

입 니까?

RxJS 은 어떤 특징 이 있 습 니까?

RxJS 핵심 개념

RxJS 가 뭐야?
javaScript 에서 우 리 는 리 셋 함수, Promise, Gender, async 함수 와 같은 비동기 프로 그래 밍 방식 을 자주 접 할 수 있 습 니 다. 이상 의 방식 은 각각 특징 이 있 지만 우 리 는 더욱 강력 한 특성 과 우아 한 쓰기 가 필요 합 니 다. 따라서 RxJS 는 우리 의 더 좋 은 선택 입 니 다.Rx.JS 은 영문 Reactive Extensions for JavaScript 의 줄 임 말 입 니 다. 중국어 로 번역 하면 자바 스 크 립 트 의 응답 식 확장 입 니 다. 그 주요 기능 은 응답 식 프로 그래 밍 모델 을 이용 하여 자바 스 크 립 트 의 비동기 프로 그래 밍 을 실현 하 는 것 입 니 다.
RxJS 는 어떤 특징 이 있 습 니까?
공식 문서 에 따 르 면:
먼저 간단 한 예 를 들 어 이벤트 모니터 (이벤트 에이전트) 를 등록 합 니 다.

var button = document.querySelector('button');
button.addEventListener('click', () => console.log('Clicked!'));

우 리 는 RxJS 로 이 기능 을 실현 합 니 다 (Rxjs 를 도입 해 야 합 니 다).

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .subscribe(() => console.log('Clicked!'));

상기 코드 는 여러분 이 알 아 볼 수 있 을 것 입 니 다. 대충 설명 하 세 요. Rx.Observable.fromEvent() 은 관찰 가능 한 대상 Observable, 즉 감청 가능 한 대리 대상 을 만 든 것 과 같 습 니 다. subscribe 는 이 대상 의 한 방법 입 니 다. 이 방법 은 이 감청 사건 을 되 돌려 줍 니 다. subscribe 방법의 매개 변 수 는 관찰 대상 의 반환 값 에 대해 다음 작업 (리 셋 함수) 을 하 는 것 입 니 다.
다음은 RxJS 의 특징 을 소개 합 니 다.
청정 성
먼저 부정적인 예 를 본다.

var count = 0;
var button = document.querySelector('button');
button.addEventListener('click', () => console.log(`Clicked ${++count} times`));

count 는 전역 변수 로 서 전역 환경 을 오염 시 키 고 응용 상 태 를 엉망 으로 만 들 었 습 니 다.
다음은 긍정 적 인 예 이다.

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

scan 연산 자의 작업 원 리 는 배열 의 reduce 과 유사 하 다.매번 리 셋 함수 가 실 행 된 후의 리 턴 값 은 다음 리 셋 함수 가 실 행 될 때의 매개 변수 가 됩 니 다.
유동성 (Flow)
부정적인 예:

var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});   //              

정면 교재:

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .throttleTime(1000)
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

이제 RxJS 가 되 게 시원 하 게 쓰 는 것 같 아 요.
RxJS 핵심 개념

Observable (관찰 대상): 하나의 개념 을 나타 내 는데 이 개념 은 호출 가능 한 미래 값 이나 사건 의 집합 이다.

Observer (관찰자): 반전 함수 의 집합 으로 Observable 이 제공 하 는 값 을 어떻게 감청 하 는 지 알 고 있 습 니 다.

Subscription (구독): Observable 의 실행 을 표시 하고 주로 Observable 의 실행 을 취소 하 는 데 사 용 됩 니 다.

Operators (연산 자): 함수 식 프로 그래 밍 스타일 의 순 함수 (pure function) 를 사용 하여 map, filter, concat, flatMap 등 과 같은 조작 자 를 사용 하여 집합 을 처리 합 니 다.

Subject (주체): EventEmitter 에 해당 하 며 값 이나 이벤트 다 중 길 을 여러 Observer 에 전달 하 는 유일한 방법 입 니 다.

Schedulers (스케줄 러): 병발 을 제어 하고 중앙 집권 스케줄 러 로 계산 이 발생 할 때 조정 할 수 있 습 니 다. 예 를 들 어 setTimeout 이나 requestAnimationFrame 또는 기타.

Observable (관찰 대상)
Observables 는 여러 값 의 타성 푸 시 집합 입 니 다.Observable 은 RxJS 의 핵심 개념 중 하나 이다. 그것 은 실제로 외부 에서 관찰 할 수 있 는 대상 이다. 자신의 상태 가 변화 할 때 그 변 화 를 외부 에 보 내 그 대상 을 관찰 하 게 한다.즉, 관찰자 대상 이다. 또한 Observables 은 여러 값 의 타성 푸 시 집합 이기 때문에 하나의 관찰자 대상 을 사용 하여 구독 한 후에 야 동기 화 되 거나 비동기 적 으로 0 으로 되 돌아 갈 수 있다. 다음은 RxJS 을 사용 하여 Observable 을 만 드 는 방식 이다.

var observable = Rx.Observable.create(function subscribe(observer) {
  var id = setInterval(() => {
    observer.next('hi')
  }, 1000);
});

위의 인 스 턴 스 는 관찰자 에 게 1 초 간격 으로 문자열 'hi' 를 보 내 는 Observable 을 만 들 었 습 니 다.
Observer (관찰자)
관찰자 란 무엇 인가? -관찰 자 는 Observable 이 보 낸 값 의 소비자 다.관찰 자 는 리 셋 함수 의 집합 일 뿐, 리 셋 함수 마다 Observable 에서 보 내 는 알림 유형: next, error, complete 에 대응 합 니 다.
쉽게 말 하면,Observer 는 Observable 에서 값 을 보 내 는 방법 으로 집합 합 니 다. Observable 에서 값 을 보 낸 후 Observable 에서 어떻게 사용 할 지 결정 합 니 다. 사용 하 는 방식 은 반전 함 수 를 통 해 Observable 에서 보 낸 값 을 매개 변수 로 전달 합 니 다. 나중에 내부 에서 사용 하도록 합 니 다. 또한 Observable 에서 보 낸 값 에 따라 호출 된 반전 함수 도 같 습 니 다.다 릅 니 다. 각각 next (다음 단계), error (오류 보고), complete (끝) 가 있 습 니 다. 다음은 Observer 를 사용 하 는 방법 입 니 다.

observable.subscribe(observer);

관찰 자 를 사용 하려 면 Observable subscribe 방법 을 제공 해 야 합 니 다.
구독 (구독)
Subscription 이 뭐 예요?Subscription 은 자원 을 정리 할 수 있 음 을 나타 내 는 대상 으로 보통 Observable 의 집행 이다.Subscription 은 unsubscribe 라 는 중요 한 방법 이 있 습 니 다. 인 자 는 필요 하지 않 고 Subscription 이 사용 하 는 자원 을 청소 하 는 데 만 사 용 됩 니 다.이전 버 전의 RxJS 에 서 는 Subscription 을 'Disposable' (청소 가능 대상) 이 라 고 합 니 다.    Subscription (구독) 은 observable. subscribe () 를 사용 하여 관찰자 대상 을 만 들 때 되 돌아 오 는 대상 입 니 다. 주로 unsubscribe () 함 수 를 사용 하여 Observer 가 Observable 에 대한 감청 구독 을 자발적으로 닫 습 니 다. 그 사용 방법 은 다음 과 같 습 니 다.

var observable = Rx.Observable.interval(1000);
var subscription = observable.subscribe(x => console.log(x));
//   ：
//            Observable   
// Observable              subscribe      
subscription.unsubscribe();

연산 자 (연산 자)
조작 부 호 는 Observable 유형의 방법 으로 예 를 들 어 .map(...)、.filter(...)、.merge(...)， 등 이다.조작 부호 가 호출 되 었 을 때, 그것들 은 이미 존재 하 는 Observable 실례 를 바 꾸 지 않 을 것 이다.반면 이들 은 새로운 Observable 으로 돌아 가 subscription 논 리 는 첫 번 째 Observable 을 바탕 으로 한다.
조작 부 호 는 함수 입 니 다. 현재 Observable 을 기반 으로 새로운 Observable 을 만 듭 니 다.이것 은 부작용 이 없 는 조작 이다. 앞의 Observable 은 변 하지 않 는 다.
본질 적 으로 Operators 은 순수한 함수 입 니 다. Observable 을 입력 으로 받 아들 일 수 있 습 니 다. 그리고 내부 의 일련의 처 리 를 거 친 후에 새로운 Observable 을 출력 으로 되 돌려 줍 니 다. 다음 작업 으로 이동 합 니 다.
제목 (주체)
Subject 가 뭐야? -RxJS Subject 는 특수 한 유형의 Observable 로 여러 관찰자 에 게 값 을 더 할 수 있 기 때문에 Subject 는 다 중 방송 이 고 일반적인 Observables 은 단독 방송 이다 (구독 한 관찰자 마다 Observable 의 독립 적 인 집행 을 가진다).

   `Subject`    `Observalbe`，            。`Subject`    ` EventEmitters`，            。

모든 Subject 는 Observable 과 Observer 입 니 다. Subject 에 대해 서 는 subscribe 방법 을 사용 하여 관찰 자 를 지정 할 수 있 습 니 다. next(v)、error(e) 과 complete() 을 사용 하여 도 로 를 받 아들 이 는 값 을 처리 할 수도 있 습 니 다. 예 를 들 어 다음 과 같 습 니 다.

var subject = new Rx.Subject();

subject.subscribe({
  next: (v) => console.log('observerA: ' + v)
});
subject.subscribe({
  next: (v) => console.log('observerB: ' + v)
});

subject.next(1);
subject.next(2);

위의 예제 에서 우 리 는 Subject 에 두 명의 관찰 자 를 추가 한 다음 에 Subject 에 값 을 제공 합 니 다.
스케줄 러 (스케줄 러)
스케줄 러 가 뭐야? -스케줄 러 는 subscription 을 언제 시작 하고 알림 을 언제 보 내 는 지 제어 합 니 다.그것 은 세 부분 으로 구성 되 어 있다.

스케줄 러 는 데이터 구조 이다.작업 을 우선 순위 나 다른 기준 에 따라 저장 하고 정렬 하 는 방법 을 알 고 있 습 니 다.

스케줄 러 는 상하 문 을 실행 합 니 다.이 는 언제 어디서 작업 을 수행 하 는 지 (예 를 들 어 즉시, 또는 다른 반전 함수 체제 (예 를 들 어 setTimeout 또는 process. nextTick) 또는 애니메이션 프레임) 를 나타 낸다.

스케줄 러 에 시계 가 있 습 니 다.스케줄 러 기능 은 getter 방법 now () 를 통 해 '시간' 이라는 개념 을 제공 합 니 다.구체 적 인 스케줄 러 에 배 치 된 임 무 는 시계 가 표시 하 는 시간 을 엄 격 히 따 를 것 이다.스케줄 러 는 Observable 이 어떤 실행 문맥 에서 관찰자 에 게 알림 을 보 내 는 지 규정 할 수 있 습 니 다.