4. Rxjs 介绍及注意事项

ゞ浴缸里的玫瑰 2022-02-14 11:29 301阅读 0赞

先梳理一些概念：  
**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 结合了 [观察者模式][Link 1]、[迭代器模式][Link 2] 和 [使用集合的函数式编程][Link 3]，以满足以一种理想方式来管理事件序列所需要的一切。

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

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

> 注意：网上很多例子都是基于rxjs5版本，而最新的rxjs6变化很大，具体[参见][Link 4]和[中文][Link 5]，后面的例子我都会基于rxjs6。

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

*  [http://reactivex.io/documentation][http_reactivex.io_documentation]
 *  [https://rxjs-dev.firebaseapp.com/guide/overview][https_rxjs-dev.firebaseapp.com_guide_overview]  
    可结合中文文档 (注意是rxjs5)  
    [https://mcxiaoke.gitbooks.io/rxdocs/content/][https_mcxiaoke.gitbooks.io_rxdocs_content]

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

下节介绍如何创建 Observables

[reactivex.io]: http://reactivex.io/
[Observable]: https://cn.rx.js.org/manual/overview.html#observable
[RxJS]: https://cn.rx.js.org/manual/overview.html#
[Lodash]: https://lodash.com/
[Link 1]: https://en.wikipedia.org/wiki/Observer_pattern
[Link 2]: https://en.wikipedia.org/wiki/Iterator_pattern
[Link 3]: http://martinfowler.com/articles/collection-pipeline/#NestedOperatorExpressions
[Link 4]: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#dep-methods
[Link 5]: https://segmentfault.com/a/1190000014956260?utm_source=channel-hottest
[http_reactivex.io_documentation]: http://reactivex.io/documentation
[https_rxjs-dev.firebaseapp.com_guide_overview]: https://rxjs-dev.firebaseapp.com/guide/overview
[https_mcxiaoke.gitbooks.io_rxdocs_content]: https://mcxiaoke.gitbooks.io/rxdocs/content/
[Link 6]: http://reactivex.io/documentation/operators.html