本文为 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">