React中如何使用RxJS優化數據流

這篇文章主要介紹了React中如何使用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優化數據流”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。