React 中使用 RxJS 優化數據流的處理方案
正文
現在我們比較熟悉的是使用 functional component 和 hooks 來處理 react 邏輯。熟悉 Angular 的用戶可能比較熟悉通過 RxJS 來處理異步和數據狀態。那麼我們看一下 React 中使用 RxJS 會不會有什麼優勢呢?
一般來說,處理組件中的數據流無非三種情況:
- Component 中 props 的變化
- 用戶在界面上操作,觸發 event 修改 component 的數據
- Component 中監聽的 store 觸發數據變化
下面我們看一個很簡單的例子:
有一個 component,顯示 input 中輸入的數據。邏輯也很簡單:
export function ShowInput(props: { data: string; }): JSX.Element { return <>{props.data}</>; }
也就是第一種情況,component 的狀態是通過,props 傳遞進來的。
這當然沒有問題,當數據變化的時候重新渲染即可。假設我們每一次輸入就會觸發一次 api call,然後把 api 返回的內容顯示在界面上。這裡就需要處理兩個問題:
- 盡可能減少 api call 的次數(比如用戶輸入有 500ms 的停頓以上時,我們認為用戶已經輸入結束,才開始 call api)
- 用戶如果多次輸入,會有多次 api call,那麼後面 api 返回的數據應該永遠覆蓋前面 api 返回的數據。
- 暫時不考慮 api 可能出錯,需要重新 call api 的情況
熟悉 RxJS 的話,會知道,這是一個非常簡單的數據流的問題,如果我們把 props 的數據看作是一個數據流的話,就可以非常簡單的解決瞭。
const apiRespons$ = data$.pipe( debounceTime(500), switchMap(data => getApiResponse(data)), ); // Mock API call function getApiResponse(data: string) { return of(data + ' data from api').pipe(delay(1000)); }
那麼,問題就來瞭,如何將 props data 轉換成 stream, 又如何將處理完的 stream 轉換成 component state 呢。
這裡就需要引入一個庫: rxjs-hooks
用法一: 將 stream 轉換為 componet state.
比如我們已經得到瞭 apiResponse$,如何在 component 中顯示的呢?
const apiRespons$ = data$.pipe( debounceTime(500), switchMap(data => getApiResponse(data)), ); const apiResponse = useObservable(() => apiRespons$);
那麼如何結合 props 的變化使用呢?
用法二: 將 props 轉換為 stream useObservable 還可以輸入兩個參數:
- 狀態的初始值 (類似,useState)
- 監聽變量(類似 useEffect 的數組參數),轉換為 stream 作為函數的參數
完整的代碼會變成這樣:
export function ShowInput(props: { data: string; }): JSX.Element { const apiResponse = useObservable((_, input$) => input$.pipe( debounceTime(500), switchMap(([data]) => getApiResponse(data)), ), '', [props.data]); return <>{apiResponse}</>; }
當然,也有可能,數據的變化時當前 component 的,不是 props 傳進來的。也就是說這個 input 可能會是在當前 component 中。
當然,我們簡單的把 input 放在當前的 componnet 中,把監聽內容從 props 換成 state. 也比較簡單。
const [data, setData] = useState<string>(); const apiResponse = useObservable((_, input$) => input$.pipe( debounceTime(500), switchMap(([inputData]) => getApiResponse(inputData || '')), ), '', [data]);
那麼,有沒有更簡單一點的方法呢?
就涉及到用法三:將 event 函數的調用自動轉換為 stream
const [onInputChange, apiResponse] = useEventCallback((data$: Observable<string>) => data$.pipe( debounceTime(500), switchMap((data) => getApiResponse(data || '')), ), '');
這就將 useState 和 useObservable 合為一體。第一個參數時 event 函數,第二個參數時 state。
當然,如果有使用 redux observable 的話,就可以很好的跟 rxjs-hooks 合為一體。
那麼,問題來瞭,使用數據流的方式來處理數據有什麼好處呢?
- RxJS 內置瞭很多數據流的處理方式,可以大大的簡化我們處理數據的流程。類似於異步中的 lodash.
- 在 React 中我們往往會同時使用 Redux 和 Hooks, 某種程度上說,我們會使用 Redux 處理全局或者說大的狀態管理,hooks 處理 component 層,或者說小的數據狀態管理。使用 redux observable 和 rxjs hooks 不失為一種溝通全局狀態和局部狀態的好的方式。
- 我們直到 redux 時跨平臺的。但是有些時候我們並不希望把所有的數據狀態都封裝在 redux 中。如果要實現數據狀態的跨平臺,而不使用 redux 的話,rxjs 實現一個狀態關機工具無非是最簡單的。因為一個 subject 就是一個最簡單的 store. 讓我們的主要邏輯不依賴於框架,是最好的多平臺共享的方式。
對於 component 層的局部狀態,邏輯共享:
react angular | / hooks component store | / js rxjs store
對於 redux 狀態共享
react angular | / redux observable
以上就是React 中使用 RxJS 優化數據流的處理方案的詳細內容,更多關於React RxJS 優化數據流的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- Rxjs map, mergeMap 和 switchMap 的區別與聯系
- Angular 與 Component store實踐示例
- JavaScript中rxjs與 Observable 兩大類操作符解析
- Rxjs監聽精確使用版本上線
- React全局狀態管理的三種底層機制探究