RxJS 學習線路推薦

本文為 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 提供了的操作符種類眾多，目前大概有一百個左右，不推薦像閱讀概覽部分一樣通篇閱讀，讀了也記不住，推薦哪裡不會點哪裡，看彈珠圖+文字說明+代碼示例，三方相互佐證，相信總有一個是你能看懂的。理解操作符的用途後需要親自上手實踐，在代碼中體會真諦。n推薦資源： 官方文檔操作符篇 + 學習 RxJS 操作符 = 搞定操作符n補充說明：官方文檔操作符描述部分做的很好，很多都是基於底層的代碼實現來講解的，但代碼示例部分偏少。而學習 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--|);nvar e2 = hot( ---d-^--e---------f-----|);nvar expected = ---(be)----c-f-----|;nnexpectObservable(e1.merge(e2)).toBe(expected);n

不會彈珠測試你講面臨以下情況：

• 完全看不懂別人寫的操作符的單元測試代碼
• 無法完全深入透徹的了解每個操作符
• 沒有辦法為自己寫的新操作符編寫單元測試代碼
• 無法向 RxJS 官方庫貢獻操作符

所以，必須要學會彈珠測試，才能在 RxJS 這條路上繼續走下去。

但目前由於這方面的資料很少，唯一可以參考的就是官方提供的 編寫彈珠測試 ，後面我們 RxJS 中文社區 也會出相關文章，以幫助大家更好的理解彈珠測試。

另外說一下，官方操作符的彈珠圖其實也是由彈珠測試生成的喔~

哪 filter 操作符為例:

彈珠圖:

彈珠測試代碼:

asDiagram(filter(x => x % 2 === 1))(should filter out even values, () => {n const source = hot(--0--1--2--3--4--|);n const subs = ^ !;n const expected = -----1-----3-----|;nn expectObservable(source.filter(oddFilter)).toBe(expected);n expectSubscriptions(source.subscriptions).toBe(subs);n});n

後期

鑒於個人水平有限，不能給出很好的具體的指引，只能給出一些方向性的建議。

在掌握了彈珠測試後，基本就可以做一些後期可以做的事了，比如：

1. 向 RxJS 5 貢獻代碼

• 幫助補充完善操作符的測試代碼
• 編寫屬於自己的操作符，並按照官方要求步驟提交此操作符
• 對於下個版本的 RxJS 給出自己的建議

2. 基於 RxJS 開發一些實用的工具，比如 React + RxJS 的綁定，目前社區中還沒有一種優雅的實現。

3. 思考 RxJS 的使用方向，在工作中深度結合以享受 Rx 帶來的便利。

4. 歡迎大家補充。

最後，也是最重要的，就是響應式思維的轉變，"Thinking in Rx ", "Everything is a stream" 。這是一種積累，也是一種修行，一切終將水到渠成。