轻松理解RxJS

安利： RxJS 强大的辅助工具 rx-hub，使用它，你能轻松管理、监控您应用的数据流动。

定义一份数据，同时适用于react, vue, 原生js等等各种页面。

RxJS 到底是什么

RxJS： 是一种 响应式编程（Reactive Programming）库。
响应式编程: 是一种面向数据流和变化传播的编程范式。

通俗地讲，RxJS是一种面向数据流的编程模式，它将所有的操作、事件、数据变化等等，都通过流的方式来进行传播、管理。

那什么又是 流 呢？

这里说的流，就好像现实生活中的水流一样。既然是水流，就有源头、会一条水流分成多条水流、会多条水流合成一条水流、水流还会变大变小、会干枯、最终会流向目的地……

而RxJS就是将所有的操作、事件、数据变化等等，当作一条条类似自然界的水流一样的流来进行管理。

比如，把一个添加用户的交互比作一个流：

• 添加按钮：按钮点击事件是流的源头，每点击一下，这个源头会流出一股新鲜的水（要添加的用户信息）。
• 流每次冒出一股水，都会在设定的旅途上流动，先流经下一个中转站（服务器: 保存数据），把这股水处理一下（比如加个生成的用户id），再流到下一个目的地。
• 页面上有个观察者（observer）会订阅（subscribe）这个流，所以这个流每次吐出一股水，最终都会流到观察者那里，观察者将收到的水渲染到页面上。

相关概念

Observable: 可观察的数据源（水流的源头）

这个数据源经过一定的规则向外面吐新数据，可以是吐一次就停止，也可以是不停地吐。

// 每个夏天会流出一股神仙水
let observableWater = Rx.Observable.create(function(observer) {
    let season = '夏天';
    let timer = setInterval(function() {
        if (season == '夏天') {
             season = '冬天';
             observer.next('农夫山泉有点甜');
        } else {
             season = '夏天';
        }
    }, 1000)
})

Observer: 观察者

一条水流在那流着，可能冬天干枯，夏天才有水。你再其中某处安装一个水管，水有了就自动流到你那里去。这时就表示你订阅了这条水流，你成为了水流的观察者。

// 观察者是一个对象，包含三个函数： next, error, complete
let myObserver = {
    next(water) {
         // 喝一口，好甜
    },
    error() {
        // 水管坏了？
    },
    complete() {
        // 完了，以后再也喝不到神仙水了
    }
}
// 订阅
let subscriptionWater = observableWater.subscribe(myObserver);

Subscription: 订阅

当观察者订阅一个流之后，就会产生一个订阅对象，你可以通过这个对象来取消订阅。

// 听说这水有尿，我不要喝了
subscriptionWater.unsubscribe();

Subject: (数据中转站？原谅我不知道怎么翻译了……)

Subject 是一种特殊的 数据源 Observable, 同时也可以作为观察者Observer.

一般情况下，一个数据源Observable平时是休息的，只有当有观察者订阅它时，它才启动起来（产生一个执行，开始一条水流），并且每个执行只服务于一个观察者。

你可以理解为，水源通过水龙头对外提供数据，其实一个Observable实例只是在水源源头安装水龙头的工人，每一次执行相当它安装一个水龙头。

当有一个人说他需要喝这股水时，工人就给你安装一个水龙头，并且将水龙头打开。并且，这个水龙头只能为一个人服务，再来一个人需要水的时候，就需要安装另外一个水龙头。

就像上面的例子，当有观察者订阅的时候let subscriptionWater = observableWater.subscribe(observerWater);，定时器timer才启动。再次执行subscribe的时候，就会产生另外一个timer。

而Subject可以解决这两个问题：

• 建立一个一直启动的流（管你有没有人喝，我一上来就安装一个水龙头并且开着，不怕浪费）

let subjectWater = new Subject();
// 不管有没有人要喝，我就是一直吐水，有水，任性
let timer = setInterval(() => {
    subjectWater.next('农夫山泉')
});

subjectWater.subscribe({
    next() {}
})

• 一个subject流可以服务被多个观察者订阅（我这个水龙头是氪金的，可以供很多人喝）

let subjectWater = new Subject();
// 不管有没有人要喝，我就是一直吐水，有水，任性
let timer = setInterval(() => {
    subjectWater.next('农夫山泉')
});

subject.subscribe({
    next() {
      // 我觉得好喝
    }
})

subject.subscribe({
    next() {
       // 这农夫山泉假的吧？我觉得不好喝
    }
})

• 中转： 因为subject既是一个数据源Observable, 也是一个观察者Observer, 所以可以作为中转站。

// 中转站： 来一股水，我把它转换为十股水卖给十个人，哈哈赚翻了
let subjectTransfer = new Subject();

subjectTransfer.subscribe({
    next() {
       // 等到花儿都谢了，终于喝到水了
    }
})

subjectTransfer.subscribe({
    next() {
       // 等到花儿都谢了，终于喝到水了
    }
})

// 算了，卖给这个奸商了，省事
obserbableWater.subscribe(subjectTransfer);

• 有个性的数据源

Subject可以构造有个性的数据源，比如BehaviorSubject（每来一股水我都灰保留一份，有人订阅立刻给他），ReplaySubject（我会保留最近的多份水），AsyncSubject（水来了我偏偏要过一会给你，谁让你惹我不高兴）。

Operators: 操作者

RxJS的操作者分为两类：

• 静态操作函数：一般用来创建数据源Observable, RxJS提供很多操作函数，可以将回调函数、Promise、定时器、数组等等转换为数据源Observable.

Rx.Observable.from();
Rx.Observable.create();

• 实例操作符：一般用来转换、合并、过滤(等……)数据流。

// Emit only click events whose target was a DIV element
var clicks = Rx.Observable.fromEvent(document, 'click');
var clicksOnDivs = clicks.filter(ev => ev.target.tagName === 'DIV');
clicksOnDivs.subscribe(x => console.log(x));

Scheduler: 调度器

调度器用来控制一个流何时开启（数据源的水龙头何时打开），或者控制一个流有数据到来时何时通知观察者（比如有水来了，对我好的立刻给他，对我不好的过半天再给他，渴死他）。