前言
RxJS是一個強大的Reactive編程庫,提供了強大的數據流組合與控制能力,但是其學習門檻一直很高,本次分享期望從一些特別的角度解讀它在業務中的使用,而不是從API角度去講解。
RxJS簡介
通常,對RxJS的解釋會是這么一些東西,我們來分別看看它們的含義是什么。
Reactive Lodash for events Observable Stream-based什么是Reactive呢,一個比較直觀的對比是這樣的:
比如說,abc三個變量之間存在加法關系:
a = b + c
在傳統方式下,這是一種一次性的賦值過程,調用一次就結束了,后面b和c再改變,a也不會變了。
而在Reactive的理念中,我們定義的不是一次性賦值過程,而是可重復的賦值過程,或者說是變量之間的關系:
a: = b + c
定義出這種關系之后,每次b或者c產生改變,這個表達式都會被重新計算。不同的庫或者語言的實現機制可能不同,寫法也不完全一樣,但理念是相通的,都是描述出數據之間的聯動關系。
在前端,我們通常有這么一些方式來處理異步的東西:
回調 事件 Promise Generator其中,存在兩種處理問題的方式,因為需求也是兩種:
分發 流程在處理分發的需求的時候,回調、事件或者類似訂閱發布這種模式是比較合適的;而在處理流程性質的需求時,Promise和Generator比較合適。
在前端,尤其交互很復雜的系統中,RxJS其實是要比Generator有優勢的,因為常見的每種客戶端開發都是基于事件編程的,對于事件的處理會非常多,而一旦系統中大量出現一個事件要修改視圖的多個部分(狀態樹的多個位置),分發關系就更多了。
RxJS的優勢在于結合了兩種模式,它的每個Observable上都能夠訂閱,而Observable之間的關系,則能夠體現流程(注意,RxJS里面的流程的控制和處理,其直觀性略強于Promise,但弱于Generator)。
我們可以把一切輸入都當做數據流來處理,比如說:
用戶操作 網絡響應 定時器 WorkerRxJS提供了各種API來創建數據流:
單值:of, empty, never 多值:from 定時:interval, timer 從事件創建:fromEvent 從Promise創建:fromPromise 自定義創建:create創建出來的數據流是一種可觀察的序列,可以被訂閱,也可以被用來做一些轉換操作,比如:
改變數據形態:map, mapTo, pluck 過濾一些值:filter, skip, first, last, take 時間軸上的操作:delay, timeout, throttle, debounce, audit, bufferTime 累加:reduce, scan 異常處理:throw, catch, retry, finally 條件執行:takeUntil, delayWhen, retryWhen, subscribeOn, ObserveOn 轉接:switch也可以對若干個數據流進行組合:
concat,保持原來的序列順序連接兩個數據流 merge,合并序列 race,預設條件為其中一個數據流完成 forkJoin,預設條件為所有數據流都完成 zip,取各來源數據流最后一個值合并為對象 combineLatest,取各來源數據流最后一個值合并為數組新聞熱點
疑難解答
圖片精選