RxJS笔记（一）概览

RxJS 是一个使用可观察序列编写异步和基于事件的程序的库。

一、解决异步事件的概念：

Observable（可观察者）：表示未来（future）值或事件的可调用集合的概念。
Observer（观察者）：是一个回调集合，它知道如何监听 Observable 传来的值。
Subscription（订阅）：表示 Observable 的一次执行，主要用于取消执行。
Operator（操作符）：是纯函数，可以使用 map、filter、concat、reduce 等操作来以函数式编程风格处理集合。
Subject（主体）：相当于一个 EventEmitter，也是将一个值或事件多播到多个 Observers 的唯一方式。
Scheduler（调度器）：是控制并发的集中化调度器，允许我们在计算发生时进行协调，例如 setTimeout 或 requestAnimationFrame 或其它。

二、diff

原生js注册事件监听器：

document.addEventListener('click', () => console.log('Clicked!'));

RxJS版：创建observable

import { fromEvent } from 'rxjs';
fromEvent(document, 'click').subscribe(() => console.log('Clicked!'));

三、特点

Purity(纯净)

RxJS 的强大之处在于它能够使用纯函数生成值。这意味着你的代码不太容易出错。
通常你会创建一个不纯的函数，你的代码的其它部分可能会弄乱你的状态。
使用 RxJS 可以隔离状态。

import { fromEvent, scan } from 'rxjs';fromEvent(document, 'click').pipe(scan((count) => count + 1, 0)).subscribe((count) => console.log(`Clicked ${count} times`));

scan 操作符的工作方式与数组的 reduce 类似。
它接受一个要传给回调的值。回调的返回值将成为下一次回调运行时传入的下一个值。

Flow(流动)

RxJS 有一系列的操作符来控制事件。

e.g. 实现“最多允许每秒单击一次”：

import { fromEvent, throttleTime, scan } from 'rxjs';fromEvent(document, 'click').pipe(throttleTime(1000),scan((count) => count + 1, 0)).subscribe((count) => console.log(`Clicked ${count} times`));

其它流动控制操作符有 filter、delay、debounceTime、take、takeUntil、distinct、distinctUntilChanged 等

Values(值)

通过observables 传来的值进行转换。

e.g. 为每次单击增加当前鼠标 x 位置：

import { fromEvent, throttleTime, map, scan } from 'rxjs';fromEvent(document, 'click').pipe(throttleTime(1000),map((event) => event.clientX),scan((count, clientX) => count + clientX, 0)).subscribe((count) => console.log(count));

其它能产生值的操作符有 pluck、pairwise、sample 等

RxJS笔记（一）概览相关推荐

读书笔记--零售业概览：未来和现在
零售业认识 <个人的读书笔记和神神叨叨的理解,写在这里,记录自己的认识和理解> 目的:零售业基本认识:零售概念,特点.未来新经济环境和数字环境下的零售业. 1. 零售业基本认识 1.1 零 ...
Struts2学习笔记——Struts2概览
1. Struts2 和Struts1.X有什么区别?它们各自的发展轨迹又如何? (1)Struts2来自于Webwork2,并且与Struts1.X完全不兼容. (2)Apache的Struts1. ...
PowerPC MMU机制读书笔记
PowerPC mmu编程模型读书笔记 1概览 PowerPC中的地址分为三类:有效地址EA,是在代码和指令里面使用的:虚拟地址VA,可以看成是中间的转换地址:物理地址PA,实际的真正的内存中的地址. ...
Unity2D案例学习——背包系统制作（ScriptableObject）
00 简介该学习案例来自b站up主M_Studio的系列视频背包系统,此篇博客为案例学习笔记项目概览在该项目中, 01 项目基础内容的搭建系列视频的讲解中不包括基础场景的搭建以及角色移动控制的 ...
基于MMdet的cascade MASKRCNN 入门
目录一.背景介绍二.数据集制作三.环境搭建四.修改源码以训练自己的数据五.训练六.测试七.可视化loss.acc 八.梯度爆炸一.背景介绍场景需要训练一个分割模型,参考这个场景大多数 ...
北理工嵩天Python语言程序设计笔记（10 Python计算生态概览）
前言本文是对<北理工嵩天/黄天宇/礼欣 Python语言程序设计>的学习笔记,供自己查阅使用. 文章目录北理工嵩天Python语言程序设计笔记(目录) 北理工嵩天Python语言程序 ...
《密码编码学与网络安全》William Stalling著---学习笔记(三)【知识点速过】【网络安全与Internet安全概览】
提示:博文有点长,请保持耐心哦~ 前两篇文章: <密码编码学与网络安全>William Stalling著-学习笔记(一)[知识点速过][传统密码+经典对称加密算法+经典公钥密码算法+密码 ...
Angular RxJS入门笔记（Observable可观察对象、Subscribe订阅、Observer观察者、Subscription对象）
RxJS入门笔记,关于Observable可观察对象.Observer观察者.Subscribe订阅,Subscription Observable可观察对象 Observer观察者总结整体本笔记 ...
angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )
Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...

RxJS笔记（一）概览

一、解决异步事件的概念：

二、diff

三、特点

RxJS笔记（一）概览相关推荐

最新文章

热门文章