RxJS的入门指引和初步应用(2)

但我们注意到,引入这个转换是为了增强体验,而如果某个用户停留在当前视图时间太长,它的这些信息会变得不准确,比如说,用户停留了一个小时,而它看到的信息还显示:5分钟之前发表了评论,实际时间是一个小时零5分钟以前的事了。

从这个角度看,我们做这个体验增强的事情只做了一半,不准确的信息是不能算作增强体验的。

在没有RxJS的情况下,我们可能会通过一个定时器来做这件事,比如在组件内部:

tick() { this.diff = moment(createAt).fromNow() setTimeout(tick.bind(this), 1000) }

但组件并不一定只有一份实例,这样,整个界面上可能就有很多定时器在同时跑,这是一种浪费。如果要做优化,可以把定时器做成一种服务,把业务上需要周期执行的东西放进去,当作定时任务来跑。

如果使用RxJS,可以很容易做到这件事:

Observable.interval(1000).subscribe(() => { this.diff = moment(createAt).fromNow() })

示例二:对时间轴的操纵

RxJS一个很强大的特点是,它以流的方式来对待数据,因此,可以用一些操作符对整个流上所有的数据进行延时、取样、调整密集度等等。

const timeA$ = Observable.interval(1000) const timeB$ = timeA$.filter(num => { return (num % 2 != 0) && (num % 3 != 0) && (num % 5 != 0) && (num % 7 != 0) }) const timeC$ = timeB$.debounceTime(3000) const timeD$ = timeC$.delay(2000)

示例代码中,我们创建了四个流:

A是由定时器产生的,每秒一个值

B从A里面过滤掉了一些

C在B的基础上,对每两个间距在3秒之内的值进行了处理,只留下后一个值

D把C的结果整体向后平移了2秒

所以结果大致如下:

A: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
B:    1                                 11       13                  17       19
C:          1                                                  13                             19
D:                 1                                                      13

示例三:我们来晚了

RxJS还提供了BehaviourSubject和ReplaySubject这样的东西,用于记录数据流上一些比较重要的信息,让那些“我们来晚了”的订阅者们回放之前错过的一切。

ReplaySubject可以指定保留的值的个数,超过的部分会被丢弃。

最近新版《射雕英雄传》比较火,我们来用代码描述其中一个场景。

郭靖和黄蓉一起背书,黄蓉记忆力很好,看了什么,就全部记得;而郭靖属鱼的,记忆只有七秒,始终只记得背诵的最后三个字,两人一起背诵《九阴真经》。

代码实现如下:

const 九阴真经 = '天之道,损有余而补不足' const 黄蓉$ = new ReplaySubject(Number.MAX_VALUE) const 郭靖$ = new ReplaySubject(3) const 读书$ = Observable.from(九阴真经.split('')) 读书$.subscribe(黄蓉$) 读书$.subscribe(郭靖$)

执行之后,我们就可以看到,黄蓉背出了所有字,郭靖只记得“补不足”三个字。

示例四:自动更新的状态树

熟悉Redux的人应该会对这样一套理念不陌生:

当前视图状态 := 之前的状态 + 本次修改的部分

从一个应用启动之后,整个全局状态的变化,就等于初始的状态叠加了之后所有action导致的状态修改结果。

所以这就是一个典型的reduce操作。在RxJS里面,有一个scan操作符可以用来表达这个含义,比如说,我们可以表达这样一个东西:

const action$ = new Subject() const reducer = (state, payload) => { // 把payload叠加到state上返回 } const state$ = action$.scan(reducer) .startWith({})

只需往这个action$里面推action,就能够在state$上获取出当前状态。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/341a460e7f247d3949dbf854eedae115.html