通过RxJS理解响应式编程

2022-05-29 10:32:54

什么时候响应式编程

一句话概括就是用异步数据流来编程

从某种程度上讲，一个点击事件就是一个异步事件流，我们可以注册监听然后再做一些其他的事情。正是这样我们就应该有一个工具包来创建，组合，过滤这些流。一个流或者多个流可以作为另一个流的输入，可以合并这两个流，并且能够过滤这些流得到你想要的流，能够把流推送到另一个新的流。这些就是响应式编程要做的事情

监听一个流我们称之为“订阅”（Subscription），我们定义的功能是“观察者”（Observer），流就是我们的“可观察”对象（Observable ），对流的操作就是Operators

响应式编程的优点

它是声明式的、可组合的，以及不可变的，这避免了回调地狱，让你的代码更加简洁、可复用以及模块化

RxJS

引用官方的一句话来说明RxJS是什么
RxJS就是响应式编程的一个变种

RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。

这里面主要说明了两点：1、可观察的序列，2、解决异步编程

Observable

可观察的序列我们可以想想成可观察的数据流。流的引申义是物质在库与库之间的转移运行。那么数据流则是数据随时间从输入到输出中间所经历的一系列的过程。比如：在web中用户做了一次点击，然后页面渲染出数据这个过程应该是清晰明了不被污染的。
可以看一个官方的例子：

var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

在一秒钟内只能执行一次的代码实现

再看RxJS


var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .throttleTime(1000)
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

相比之下rxjs实现的部分代码更加已读更加干净更加优雅。你可以很清晰的看到值的转换过程。这也是RxJS核心的一部分
一个 observable 就是一个伴随着时间流动的数据集合。

Callback hell

写过js的都知道js是动态类型的语言，他天生异步，非常的灵活。但这也是他的缺点，多变不好控制。回掉能让你做很多事情同样实现复杂的逻辑时可读性会变得很差。后面有了promise，但promise的可控性并不好。RxJS是结合了 观察者模式、迭代器模式 和 使用集合的函数式编程，以满足以一种理想方式来管理事件序列所需要的一切

RxJS它在处理任何类型的异步数据上都很有用，无论是获取数据、通过 WebSockets 通信或从多个源头监听外部事件，还是动画。
你使用 Observable 和操作符声明式地表示你想要的数据，然后在一个单独的.subscribe()里处理业务逻辑，避免代码上的污染
Rx *库系列可广泛用于多种语言和平台（.NET，Java，Scala，Clojure， JavaScript，Ruby，Python，C ++，Objective-C / Cocoa，Groovy等
RxJS可以跟很多流行框架（比如 React，Angular 和 Vue）一起工作
其实 RX 最早在接近十年以前（2009）被实现，从 Conal Elliott 和 Paul Hudak 二十年以前（1997）的想法中被提出，这个想法描述的是函数式响应式动画。所以不用说，可以完全放心使用它是经过考验的。

这里对RX的介绍只是冰山一角，更多的资料参考[官方文档
](http://reactivex.io/rxjs/)

码农公寓

什么时候响应式编程

响应式编程的优点

RxJS

Observable

Callback hell

相关文章