通过RxJS理解响应式编程

简介:

什么时候响应式编程

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

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

监听一个流我们称之为“订阅”(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是结合了 观察者模式迭代器模式 使用集合的函数式编程,以满足以一种理想方式来管理事件序列所需要的一切

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

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

目录
相关文章
|
9月前
|
机器学习/深度学习 人工智能 算法
AI在体育分析与预测中的深度应用:变革体育界的智能力量
AI在体育分析与预测中的深度应用:变革体育界的智能力量
850 31
|
11月前
|
存储 自然语言处理 JavaScript
深入理解JavaScript的闭包(Closures)
深入理解JavaScript的闭包(Closures)
153 0
|
机器学习/深度学习 vr&ar
深度学习笔记(十):深度学习评估指标
关于深度学习评估指标的全面介绍,涵盖了专业术语解释、一级和二级指标,以及各种深度学习模型的性能评估方法。
480 0
深度学习笔记(十):深度学习评估指标
|
存储 分布式计算 Hadoop
Hadoop性能优化存储效率
【6月更文挑战第5天】
230 7
|
安全 Java API
全网最清晰的零拷贝详解,看一遍就会
全网最清晰的零拷贝详解,看一遍就会
249 0
|
存储 人工智能 运维
阿里云刘伟光:剖析企业数字化的降“本”增效
在全球经济发展放缓的今天,全天下都在进行“降本增效”,基于技术是数字化企业的差异化核心竞争力的这个重要前提,我们有必要重新审视“降本增效”的“本”到底是什么?
3209 1335
阿里云刘伟光:剖析企业数字化的降“本”增效
|
安全 关系型数据库 MySQL
Mysql 8.0 安装和使用遇到的各种问题(持续更新)
MySQL 8.0 安装到 服务器时,遇到的一些问题;安装、远程访问、密码编码格式不对、大小写区分、密码重置、修改密码 等操作
|
机器学习/深度学习 缓存 监控
Redis经典问题:热点key问题
本文介绍了Redis中的热点key问题及其对系统稳定性的影响。作者提出了多种提前发现热点key的方法,包括历史数据分析、业务分析、实时监控、用户行为分析和机器学习预测。同时,文章列举了应对热点key的解决方案,如分布式存储、主从复制、前置缓存、定时刷新、限制逃逸流量和兜底逻辑。通过这些策略,可以有效管理和预防热点key带来的挑战,保证系统性能和可用性。
1707 5
|
算法 API Nacos
nacos 单节点Caused by: com.alibaba.nacos.api.exception.NacosException: failed to req API:/nacos/v1/ns/s
nacos 单节点Caused by: com.alibaba.nacos.api.exception.NacosException: failed to req API:/nacos/v1/ns/s
932 2
|
SQL Oracle 关系型数据库
Flink cdc报错问题之同步表格报错如何解决
Flink CDC报错指的是使用Apache Flink的Change Data Capture(CDC)组件时遇到的错误和异常;本合集将汇总Flink CDC常见的报错情况,并提供相应的诊断和解决方法,帮助用户快速恢复数据处理任务的正常运行。