RxJS

珠峰RxJS实战训练营

github仓库

什么是 RxJS

RxJS 是一个库,它通过使用 observable 序列号来编写异步和基于事件的程序。它提供了一个核心类型 Observable, 附属类型(Observer、Schedulers、Subjects)和受[Array#extras]启发的操作符(map、filter、reduce、every,等等),这些数组操作符可以把异步事件作为集合来处理。

可以把 RxJS 当作是用来处理事件的Lodash

ReactiveX 结合了 观察者模式迭代器模式使用集合的函数式编程,以满足以一种理想方式来管理事件序列所需要的一切。

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

设计模式

  • 发布订阅模式
  • 观察者模式
  • 迭代器模式

Subject

Subject 是一种特殊类型的 Observable,它在观察者之间共享单一的执行路径。

你可以把它想象成一个人用话筒在全是人的房间里讲话,讲的话(主题)同时被传递给许多(多播)人(观察者)。这是多播的基础。典型的observable类似于一对一对话。

四种类型的Subject:

  • Subject:没有初始值和replay行为
  • AsyncSubject:将执行的最后一个值发送给subscribers
  • BehaviorSubject:把初始值和当先的值发送给subscribers
  • ReplaySubject:把特定数量的值发送给新的subscribers
/*
s1 n(r) n(x) s2 n(j) c n(s)
Subject
s1 ^-----r------x--------------j------|----------
s2 ---------------------^------j------|----------
AsyncSubject
s1 ^----------------------------------j|---------
s2 ---------------------^-------------j|---------
BehaviorSubject
s1 ^a----r------x--------------j------|----------
s2 ---------------------^x-----j------|----------
ReplaySubject
s1 ^-----r------x--------------j------|----------
s2 ---------------------^r-x---j------|----------
*/

Scheduler

  • asyncScheduler

  • asapScheduler

    尽可能快地执行任务异步执行

  • queueScheduler ????

    将每个下一个任务放入队列,而不是立即执行

    queue调度器,当使用了delay,和asyncScheduler调度器的行为一致

    import { queueScheduler } from 'rxjs';
    queueScheduler.schedule(() => {
    queueScheduler.schedule(() => console.log('second')); // will not happen now, but will be put on a queue
    console.log('first');
    })
    // Logs:
    // "first"
    // "second"
  • animationFrameScheduler

    当 window.requestAnimationFrame 触发时执行任务

资料

开发环境

  • stackblitz - 可以在这个环境去运行 RxJS中的示例代码。

Github 项目

React Hooks

Node