RxJS 学习线路推荐

3,186 阅读6分钟
本文为 RxJS 中文社区 原创文章,如需转载,请注明出处,谢谢合作!

写在前面的话:

很多 RxJS 的布道者在各种场合下都说过:“RxJS 很难“... “RxJS 学习曲线高”, 等等。

就连 RxJS 的作者们也不例外,所以选择一种正确学习 RxJS 的方式就显得尤为重要了。

由于以下总结出来的方式是从我自身的角度及过往经验而得来的,所以可能未必适合所有人,仅供参考~

对了,既然要学习 RxJS,那么在学习的路上必然会有两位高人是你无法绕过的,所以我先拿出来简单介绍下,后面在正文部分就不再赘述。

Ben Lesh : RxJS 5 领导者、布道者,常出没于各种公开场合公然宣讲 RxJS

André Staltz : 简称 staltz,RxJS 5 核心贡献者、布道者、响应式编程先驱者,RxJS 模范导师

前期

在这个阶段,可能只对 RxJS 的四个字母有感知,甚至都不知道 RxJS 全称的含义。更不要说如何使用,为什么要使用。那么这个阶段应该如何去学习和了解 RxJS 呢?

1. 看官方文档中的概览部分,这部分虽然有点长,但算得上是整个文档中的精华,可以让你以最快的速度对 RxJS 中的几个核心概念 (Observable、Observer、Subscription、Operators、Subject)有一个初步的了解,这绝对是值得你看上个三五遍,刷经验练级的好地方。另外本部分几乎全部出自 staltz 大神之手,思路清晰,文笔流畅。

2. 上 egghead 看两位大神的视频

RxJS 全部课程 - egghead 的 RxJS 课程的80%都出自 staltz 之手,看完绝对会收获良多,但好多都是收费视频... 囧

Ben Lesh 的 RxJS 课程 - Ben 的课程特点都是抓住一些不错的切入点来使你了解 RxJS

经过上面 #1 #2 两步的锤炼后,相信你对 RxJS 的认知又进一步的加深了,但同时疑惑肯定也会随之增加。但起码你自身已经对 RxJS 有了你自己的认知了,下面所要做的就是加深这种认知以及调整认知的正确性。

3. 到了这步,下面的部分其实也无固定遵循的顺序可言,基本都是相互穿插的阅读学习。

  • 了解具体操作符的作用,Observable 是 RxJS 的灵魂,但真正给 RxJS 附能的其实是操作符,也可以叫做工具包。但 RxJS 5 提供了的操作符种类众多,目前大概有一百个左右,不推荐像阅读概览部分一样通篇阅读,读了也记不住,推荐哪里不会点哪里,看弹珠图+文字说明+代码示例,三方相互佐证,相信总有一个是你能看懂的。理解操作符的用途后需要亲自上手实践,在代码中体会真谛。 推荐资源: 官方文档操作符篇 + 学习 RxJS 操作符 = 搞定操作符 补充说明:官方文档操作符描述部分做的很好,很多都是基于底层的代码实现来讲解的,但代码示例部分偏少。而学习 RxJS 操作符则恰恰相反,文字描述部分过于简单,但重点是代码示例较多,而且解释的很清楚。两者互为补充,是学习操作符的不二选择。
  • 阅读 Awesome RxJS 中的文章部分 , 其中不少都是 Ben 在 medium 上发表的一些不错的 RxJS 文章,短小而精湛。这些文章的作用都是在不断完善你对 RxJS 的认知。
  • 阅读 Gitbook 小书 - RxJS 5 基本原理 ,作者从自己的角度诠释了 RxJS 中的基本概念及一些操作符在怎样的业务场景下使用,作者的语言平实、简练、耐人寻味,是一本不错的入门书。
  • 观看 RxJS Awesome RxJS 中的视频部分,基本都是一些开发者大会上的演讲视频,闲暇时可以看看,从大方向上加深对 RxJS 的了解。

4. 练习 练习 练习 练习,学到的东西基本也不少了,后面将你所学到的 Observable,Subject,各种操作符用起来,再小的练习也是一种积累。

中期

中期与前期最显著的一道分水岭就是对于 Marble Tests (弹珠测试) 的掌握。

弹珠测试是个什么鬼?它其实是专门负责 RxJS 单元测试的 DLS (Domain Specific Language 领域专用语言)。它大概长成这个样子:

var e1 = hot('----a--^--b-------c--|');
var e2 = hot(  '---d-^--e---------f-----|');
var expected =      '---(be)----c-f-----|';

expectObservable(e1.merge(e2)).toBe(expected);

不会弹珠测试你讲面临以下情况:

  • 完全看不懂别人写的操作符的单元测试代码
  • 无法完全深入透彻的了解每个操作符
  • 没有办法为自己写的新操作符编写单元测试代码
  • 无法向 RxJS 官方库贡献操作符

所以,必须要学会弹珠测试,才能在 RxJS 这条路上继续走下去。

但目前由于这方面的资料很少,唯一可以参考的就是官方提供的 编写弹珠测试 ,后面我们 RxJS 中文社区 也会出相关文章,以帮助大家更好的理解弹珠测试。

另外说一下,官方操作符的弹珠图其实也是由弹珠测试生成的喔~

哪 filter 操作符为例:

弹珠图:

<img src="https://pic3.zhimg.com/v2-79651776f0cbd2512b622fe9c0a9cf42_b.png" data-rawwidth="1280" data-rawheight="540" class="origin_image zh-lightbox-thumb" width="1280" data-original="https://pic3.zhimg.com/v2-79651776f0cbd2512b622fe9c0a9cf42_r.png">

弹珠测试代码:

asDiagram('filter(x => x % 2 === 1)')('should filter out even values', () => {
  const source = hot('--0--1--2--3--4--|');
  const subs =       '^                !';
  const expected =   '-----1-----3-----|';

  expectObservable(source.filter(oddFilter)).toBe(expected);
  expectSubscriptions(source.subscriptions).toBe(subs);
});

后期

鉴于个人水平有限,不能给出很好的具体的指引,只能给出一些方向性的建议。

在掌握了弹珠测试后,基本就可以做一些后期可以做的事了,比如:

1. 向 RxJS 5 贡献代码

  • 帮助补充完善操作符的测试代码
  • 编写属于自己的操作符,并按照官方要求步骤提交此操作符
  • 对于下个版本的 RxJS 给出自己的建议

2. 基于 RxJS 开发一些实用的工具,比如 React + RxJS 的绑定,目前社区中还没有一种优雅的实现。

3. 思考 RxJS 的使用方向,在工作中深度结合以享受 Rx 带来的便利。

4. 欢迎大家补充。

最后,也是最重要的,就是响应式思维的转变,"Thinking in Rx ", "Everything is a stream" 。这是一种积累,也是一种修行,一切终将水到渠成。

<img src="https://pic3.zhimg.com/v2-8fe48eb71aa5f92aa6be3d22d135aa32_b.jpg" data-rawwidth="422" data-rawheight="390" class="origin_image zh-lightbox-thumb" width="422" data-original="https://pic3.zhimg.com/v2-8fe48eb71aa5f92aa6be3d22d135aa32_r.jpg">