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

相关文章
|
4月前
如何使用 takeUntil RxJS 操作符来声明性地管理订阅
如何使用 takeUntil RxJS 操作符来声明性地管理订阅
32 0
|
4月前
|
JavaScript API 调度
Pinia进阶:优雅的setup(函数式)写法+封装
相信在座各位假如使用Vue生态开发项目情况下,对Pinia状态管理库应该有所听闻或正在使用,假如还没接触到Pinia,这篇文章可以帮你快速入门,并如何在企业项目中更优雅封装使用。
72 0
|
4月前
|
监控 JavaScript API
Vue3 高阶方法及使用场景,看这一篇就够啦!!【最全】
Vue3 高阶方法及使用场景,看这一篇就够啦!!【最全】
|
7月前
|
存储 缓存 JavaScript
RxJS中四种Subject的用法和区别
RxJS中四种Subject的用法和区别
196 2
RxJS中四种Subject的用法和区别
|
前端开发
ES6中 Promise的?使用场景?
ES6中 Promise的?使用场景?
|
7月前
|
前端开发 JavaScript
JavaScript开发中ES6+新特性:如何使用Promise来处理异步操作?
JavaScript开发中ES6+新特性:如何使用Promise来处理异步操作?
53 1
|
7月前
|
前端开发 JavaScript
JavaScript开发中ES6+新特性:简述async/await的用法。
JavaScript开发中ES6+新特性:简述async/await的用法。
56 0
|
前端开发
【React工作记录八十五】React+Hook+ts+antDesign实现伪定时调用接口功能
【React工作记录八十五】React+Hook+ts+antDesign实现伪定时调用接口功能
83 0
|
JavaScript 前端开发 API
web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)
web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)
213 0
|
前端开发 JavaScript
3 分钟温故知新 RxJS 【创建实例操作符】
RxJS 有很多神奇的东西,包括链式调用、惰性输出值、隔离数据和操作、响应式编程等等; 它是函数式编程中 monad 的一种实际应用;它是 promise 的进化形态;它是理解 JS 异步、处理异步的宝剑...... 所以,借着更文的契机,日日新、月月新,学习 RxJS 接着冲~