前言
RxJS是一个强大的Reactive编程库,提供了强大的数据流组合与控制能力,但是其学习门槛一直很高,本次分享期望从一些特别的角度解读它在业务中的使用,而不是从API角度去讲解。
RxJS简介
通常,对RxJS的解释会是这么一些东西,我们来分别看看它们的含义是什么。
Reactive Lodash for events Observable Stream-based什么是Reactive呢,一个比较直观的对比是这样的:
比如说,abc三个变量之间存在加法关系:
a = b + c
在传统方式下,这是一种一次性的赋值过程,调用一次就结束了,后面b和c再改变,a也不会变了。
而在Reactive的理念中,我们定义的不是一次性赋值过程,而是可重复的赋值过程,或者说是变量之间的关系:
a: = b + c
定义出这种关系之后,每次b或者c产生改变,这个表达式都会被重新计算。不同的库或者语言的实现机制可能不同,写法也不完全一样,但理念是相通的,都是描述出数据之间的联动关系。
在前端,我们通常有这么一些方式来处理异步的东西:
回调 事件 Promise Generator其中,存在两种处理问题的方式,因为需求也是两种:
分发 流程在处理分发的需求的时候,回调、事件或者类似订阅发布这种模式是比较合适的;而在处理流程性质的需求时,Promise和Generator比较合适。
在前端,尤其交互很复杂的系统中,RxJS其实是要比Generator有优势的,因为常见的每种客户端开发都是基于事件编程的,对于事件的处理会非常多,而一旦系统中大量出现一个事件要修改视图的多个部分(状态树的多个位置),分发关系就更多了。
RxJS的优势在于结合了两种模式,它的每个Observable上都能够订阅,而Observable之间的关系,则能够体现流程(注意,RxJS里面的流程的控制和处理,其直观性略强于Promise,但弱于Generator)。
我们可以把一切输入都当做数据流来处理,比如说:
用户操作 网络响应 定时器 WorkerRxJS提供了各种API来创建数据流:
单值:of, empty, never 多值:from 定时:interval, timer 从事件创建:fromEvent 从Promise创建:fromPromise 自定义创建:create创建出来的数据流是一种可观察的序列,可以被订阅,也可以被用来做一些转换操作,比如:
改变数据形态:map, mapTo, pluck 过滤一些值:filter, skip, first, last, take 时间轴上的操作:delay, timeout, throttle, debounce, audit, bufferTime 累加:reduce, scan 异常处理:throw, catch, retry, finally 条件执行:takeUntil, delayWhen, retryWhen, subscribeOn, ObserveOn 转接:switch也可以对若干个数据流进行组合:
concat,保持原来的序列顺序连接两个数据流 merge,合并序列 race,预设条件为其中一个数据流完成 forkJoin,预设条件为所有数据流都完成 zip,取各来源数据流最后一个值合并为对象 combineLatest,取各来源数据流最后一个值合并为数组新闻热点
疑难解答
图片精选