RxJS 공식 자습서(一) 개요

RxJS 공식 자습서(一) 개요

RxJS 공식 튜토리얼 (二) Observable

RxJS 공식 강좌 (3) Observable 분석

RxJS 공식 튜토리얼 (4) Observer 및 Subscription

RxJS 공식 자습서 (5) Subject

RxJS 공식 강좌(6)산자

소개하다.
RxJS는 관찰 가능한 시퀀스를 사용하여 비동기적이고 이벤트 기반 프로그램을 구성하는 라이브러리입니다.Observable, 방송 형식 (Observer, Schedulers, Subjects), Array # extras (map, Filter, Reduce,every 등) 에서 알림을 받는 핵심 형식을 제공합니다. 비동기 이벤트를 집합 처리로 허용합니다.
ReactiveX는 Observer 모드와 Iterator 모드, 함수 프로그래밍과 집합을 결합시켜 이벤트 시퀀스를 관리하는 이상적인 방식의 수요를 충족시킨다.
RxJS에서 비동기식 이벤트 관리를 해결하는 기본 개념은 다음과 같습니다.

Observable: 대상을 관찰할 수 있고 호출할 수 있는 미래값이나 이벤트 집합에 대한 생각을 나타낸다.

Observer: 관찰자, 리셋 함수로 Observable가 제공하는 값을 처리합니다.

Subscription: 구독 관계식, Observable의 실행을 의미하며 주로 실행을 취소하는 데 사용됩니다.

Operators: 산자, 순수한 함수로 함수식 프로그래밍 스타일로 값을 처리하거나 이벤트 집합, 맵, Filter, concat, flatMap 등을 처리합니다.

Subject: 주제, Event Emitter에 해당하며 값이나 이벤트를 여러 Observer에 브로드캐스트하는 유일한 방법입니다.

Scheduler: set Timeout이나 Request Animation Frame이나 다른 이벤트에서 발생하는 것을 조정할 수 있는 집중 스케줄러를 제어합니다.

첫 번째 예
일반적으로 이벤트 탐지기를 등록하십시오.

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

RxJS를 사용하여 observable을 생성할 수 있습니다.

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

Purity 순수성
RxJS의 강점은 순수 함수를 사용하여 값을 생성할 수 있다는 점이다.이것은 코드가 틀리기 쉽지 않다는 것을 의미합니다.
보통 당신은 불순한 함수를 만들 수 있는데, 그 중 코드의 다른 부분은 당신의 상태를 어지럽힐 수 있습니다.

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

RxJS를 사용하여 상태를 격리할 수 있습니다.

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

scan 조작부호는 수조의 Reduce 함수와 같이 리셋 함수는 하나의 매개 변수를 받아들인다. 초기 값은 0이고 리셋 값은 다음 리셋 함수의 인삼이다.
Flow 흐름
RxJS는 일련의 조작부호를 가지고 있어 이벤트가 관찰 가능한 대상을 어떻게 통과하는지 제어할 수 있습니다.
이것은 순수한 JavaScript를 사용하여 1초에 한 번까지 클릭할 수 있는 방법입니다.

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

RxJS 사용:

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

기타 흐름 제어부호: Filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged.
Value 값
observable를 통해 전달된 값을 변환할 수 있습니다.
다음은 일반 JavaScript에서 클릭할 때마다 현재 마우스 x 위치를 추가하는 방법입니다.

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

RxJS 사용:

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
    .throttleTime(1000)
    .map(event => event.clientX)
    .scan((count, clientX) => count + clientX, 0)
    .subscribe(count => console.log(count));

기타 조작할 만한 부호: pluck,pairwise,sample.
공식 홈페이지http://reactivex.io/rxjs/manual/overview.html#introduction