4. Rxjs 介绍及注意事项

简介: 先梳理一些概念:Rx:ReactiveX是Reactive Extensions的缩写,一般简写为Rx,最初是LINQ的一个扩展,由微软的架构师Erik Meijer领导的团队开发,在2012年11月开源,Rx是一个编程模型,目标是提供一致的编程接口,帮助开发者更方便的处理异步数据流,Rx库支持.NET、JavaScript和C++,Rx近几年越来越流行了,现在已经支持几乎全部的流行编程语言了,Rx的大部分语言库由ReactiveX这个组织负责维护,比较流行的有RxJava/RxJS/Rx.NET,社区网站是 reactivex.io。

先梳理一些概念:
Rx:ReactiveX是Reactive Extensions的缩写,一般简写为Rx,最初是LINQ的一个扩展,由微软的架构师Erik Meijer领导的团队开发,在2012年11月开源,Rx是一个编程模型,目标是提供一致的编程接口,帮助开发者更方便的处理异步数据流,Rx库支持.NET、JavaScript和C++,Rx近几年越来越流行了,现在已经支持几乎全部的流行编程语言了,Rx的大部分语言库由ReactiveX这个组织负责维护,比较流行的有RxJava/RxJS/Rx.NET,社区网站是 reactivex.io

Observer 和 Observable: 在ReactiveX中,一个观察者(Observer)订阅一个可观察对象(Observable)。观察者对Observable发射的数据或数据序列作出响应。这种模式可以极大地简化并发操作,因为它创建了一个处于待命状态的观察者哨兵,在未来某个时刻响应Observable的通知,不需要阻塞等待Observable发射数据。

Rxjs: 刚才说了Rx是抽象的东西,rxjs就是使用JavaScript语言实现rx接口的类库。
它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable,附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等),这些数组操作符可以把异步事件作为集合来处理。

可以把 RxJS 当做是用来处理事件的 Lodash

ReactiveX 结合了 观察者模式迭代器模式使用集合的函数式编程,以满足以一种理想方式来管理事件序列所需要的一切。

在 RxJS 中用来解决异步事件管理的的基本概念是:

  • Observable (可观察对象): 表示一个概念,这个概念是一个可调用的未来值或事件的集合。
  • Observer (观察者): 一个回调函数的集合,它知道如何去监听由 Observable 提供的值。
  • Subscription (订阅): 表示 Observable 的执行,主要用于取消 Observable 的执行。
  • Operators (操作符): 采用函数式编程风格的纯函数 (pure function),使用像 mapfilterconcatflatMap 等这样的操作符来处理集合。
  • Subject (主体): 相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。
  • Schedulers (调度器): 用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如 setTimeoutrequestAnimationFrame 或其他。

注意:网上很多例子都是基于rxjs5版本,而最新的rxjs6变化很大,具体参见中文,后面的例子我都会基于rxjs6。

建议直接看官方文档,毕竟是最新的。

学好rxjs的关键是对Operators (操作符)的灵活使用,操作符就是纯函数,我们使用操作符创建,转换,过滤,组合,错误处理,辅助操作Observables。具体参见

下节介绍如何创建 Observables

相关文章
|
7月前
|
JavaScript
TypeScript 类的特性、使用方法以及注意事项
TypeScript 类的特性、使用方法以及注意事项
79 0
|
7月前
|
移动开发 前端开发 JavaScript
react HashRouter 与 BrowserRouter 的区别及使用场景
react HashRouter 与 BrowserRouter 的区别及使用场景
124 0
|
4月前
如何使用 takeUntil RxJS 操作符来声明性地管理订阅
如何使用 takeUntil RxJS 操作符来声明性地管理订阅
35 0
|
7月前
|
Web App开发 JavaScript iOS开发
vue2中的自定义指令的基本语法、常见参数与使用场景,超详细教程!
vue2中的自定义指令的基本语法、常见参数与使用场景,超详细教程!
|
7月前
|
存储 缓存 JavaScript
RxJS中四种Subject的用法和区别
RxJS中四种Subject的用法和区别
217 2
RxJS中四种Subject的用法和区别
|
7月前
|
存储 JavaScript
vuex 是什么?怎么使用?哪种功能场景使用它?
vuex 是什么?怎么使用?哪种功能场景使用它?
|
7月前
|
资源调度 JavaScript
vuex是什么?怎么使用?哪种功能场景使用它?
Vuex是Vue.js官方推荐的状态管理库,用于在Vue应用程序中管理和共享状态。它基于Flux架构和单向数据流的概念,将应用程序的状态集中管理,使得状态的变化更可追踪、更易于管理。Vuex提供了一个全局的状态树,以及一些用于修改状态的方法。
93 1
|
7月前
|
前端开发 JavaScript
JavaScript开发中ES6+新特性:如何使用Promise来处理异步操作?
JavaScript开发中ES6+新特性:如何使用Promise来处理异步操作?
54 1
|
存储 JavaScript 数据管理
vuex的使用场景
vuex的使用场景
50 0
|
存储 前端开发 JavaScript
React 注意事项
React 注意事项
75 0

热门文章

最新文章