正文

現(xiàn)在我們比較熟悉的是使用 functional component 和 hooks 來處理 react 邏輯。熟悉 Angular 的用戶可能比較熟悉通過 RxJS 來處理異步和數(shù)據(jù)狀態(tài)。那么我們看一下 React 中使用 RxJS 會(huì)不會(huì)有什么優(yōu)勢(shì)呢？

一般來說，處理組件中的數(shù)據(jù)流無非三種情況：

• Component 中 props 的變化
• 用戶在界面上操作，觸發(fā) event 修改 component 的數(shù)據(jù)
• Component 中監(jiān)聽的 store 觸發(fā)數(shù)據(jù)變化

下面我們看一個(gè)很簡(jiǎn)單的例子：

有一個(gè) component，顯示 input 中輸入的數(shù)據(jù)。邏輯也很簡(jiǎn)單：

export function ShowInput(props: { data: string; }): JSX.Element {
  return <>{props.data}</>;
}

也就是第一種情況，component 的狀態(tài)是通過，props 傳遞進(jìn)來的。

這當(dāng)然沒有問題，當(dāng)數(shù)據(jù)變化的時(shí)候重新渲染即可。假設(shè)我們每一次輸入就會(huì)觸發(fā)一次 api call，然后把 api 返回的內(nèi)容顯示在界面上。這里就需要處理兩個(gè)問題：

• 盡可能減少 api call 的次數(shù)（比如用戶輸入有 500ms 的停頓以上時(shí)，我們認(rèn)為用戶已經(jīng)輸入結(jié)束，才開始 call api）
• 用戶如果多次輸入，會(huì)有多次 api call，那么后面 api 返回的數(shù)據(jù)應(yīng)該永遠(yuǎn)覆蓋前面 api 返回的數(shù)據(jù)。
• 暫時(shí)不考慮 api 可能出錯(cuò)，需要重新 call api 的情況

熟悉 RxJS 的話，會(huì)知道，這是一個(gè)非常簡(jiǎn)單的數(shù)據(jù)流的問題，如果我們把 props 的數(shù)據(jù)看作是一個(gè)數(shù)據(jù)流的話，就可以非常簡(jiǎn)單的解決了。

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 轉(zhuǎn)換成 stream, 又如何將處理完的 stream 轉(zhuǎn)換成 component state 呢。

這里就需要引入一個(gè)庫： rxjs-hooks

用法一： 將 stream 轉(zhuǎn)換為 componet state.

比如我們已經(jīng)得到了 apiResponse$，如何在 component 中顯示的呢？

const apiRespons$ = data$.pipe(
  debounceTime(500),
  switchMap(data => getApiResponse(data)),
);
const apiResponse = useObservable(() => apiRespons$);

那么如何結(jié)合 props 的變化使用呢？

用法二： 將 props 轉(zhuǎn)換為 stream useObservable 還可以輸入兩個(gè)參數(shù)：

• 狀態(tài)的初始值 (類似，useState)
• 監(jiān)聽變量（類似 useEffect 的數(shù)組參數(shù)），轉(zhuǎn)換為 stream 作為函數(shù)的參數(shù)

完整的代碼會(huì)變成這樣：

export function ShowInput(props: { data: string; }): JSX.Element {
  const apiResponse = useObservable((_, input$) => input$.pipe(
    debounceTime(500),
    switchMap(([data]) => getApiResponse(data)),
  ), '', [props.data]);
  return <>{apiResponse}</>;
}

當(dāng)然，也有可能，數(shù)據(jù)的變化時(shí)當(dāng)前 component 的，不是 props 傳進(jìn)來的。也就是說這個(gè) input 可能會(huì)是在當(dāng)前 component 中。

當(dāng)然，我們簡(jiǎn)單的把 input 放在當(dāng)前的 componnet 中，把監(jiān)聽內(nèi)容從 props 換成 state. 也比較簡(jiǎn)單。

const [data, setData] = useState<string>();
const apiResponse = useObservable((_, input$) => input$.pipe(
  debounceTime(500),
  switchMap(([inputData]) => getApiResponse(inputData || '')),
), '', [data]);

那么，有沒有更簡(jiǎn)單一點(diǎn)的方法呢？

就涉及到用法三：將 event 函數(shù)的調(diào)用自動(dòng)轉(zhuǎn)換為 stream

const [onInputChange, apiResponse] = useEventCallback((data$: Observable<string>) => data$.pipe(
  debounceTime(500),
  switchMap((data) => getApiResponse(data || '')),
), '');

這就將 useState 和 useObservable 合為一體。第一個(gè)參數(shù)時(shí) event 函數(shù)，第二個(gè)參數(shù)時(shí) state。

當(dāng)然，如果有使用 redux observable 的話，就可以很好的跟 rxjs-hooks 合為一體。

那么，問題來了，使用數(shù)據(jù)流的方式來處理數(shù)據(jù)有什么好處呢？

• RxJS 內(nèi)置了很多數(shù)據(jù)流的處理方式，可以大大的簡(jiǎn)化我們處理數(shù)據(jù)的流程。類似于異步中的 lodash.
• 在 React 中我們往往會(huì)同時(shí)使用 Redux 和 Hooks, 某種程度上說，我們會(huì)使用 Redux 處理全局或者說大的狀態(tài)管理，hooks 處理 component 層，或者說小的數(shù)據(jù)狀態(tài)管理。使用 redux observable 和 rxjs hooks 不失為一種溝通全局狀態(tài)和局部狀態(tài)的好的方式。
• 我們直到 redux 時(shí)跨平臺(tái)的。但是有些時(shí)候我們并不希望把所有的數(shù)據(jù)狀態(tài)都封裝在 redux 中。如果要實(shí)現(xiàn)數(shù)據(jù)狀態(tài)的跨平臺(tái)，而不使用 redux 的話，rxjs 實(shí)現(xiàn)一個(gè)狀態(tài)關(guān)機(jī)工具無非是最簡(jiǎn)單的。因?yàn)橐粋€(gè) subject 就是一個(gè)最簡(jiǎn)單的 store. 讓我們的主要邏輯不依賴于框架，是最好的多平臺(tái)共享的方式。

對(duì)于 component 層的局部狀態(tài)，邏輯共享：

react   angular  
|       /
hooks  component store
|      /
js rxjs store

對(duì)于 redux 狀態(tài)共享

react     angular
|         /
redux observable

以上就是React 中使用 RxJS 優(yōu)化數(shù)據(jù)流的處理方案的詳細(xì)內(nèi)容，更多關(guān)于React RxJS 優(yōu)化數(shù)據(jù)流的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論