现在我们比较熟悉的是使用 functional component 和 hooks 来处理 react 逻辑。熟悉 Angular 的用户可能比较熟悉通过 RxJS 来处理异步和数据状态。那么我们看一下 React 中使用 RxJS 会不会有什么优势呢？
有一个 component，显示 input 中输入的数据。逻辑也很简单：
export function ShowInput(props: { data: string; }): JSX.Element {
return <>{props.data}</>;
}
也就是第一种情况，component 的状态是通过，props 传递进来的。
这当然没有问题，当数据变化的时候重新渲染即可。假设我们每一次输入就会触发一次 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 还可以输入两个参数：
完整的代码会变成这样：
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 合为一体。
对于 component 层的局部状态，逻辑共享：
react angular | / hooks component store | / js rxjs store
对于 redux 状态共享
react angular | / redux observable
以上就是React 中使用 RxJS 优化数据流的处理方案的详细内容，更多关于React RxJS 优化数据流的资料请关注脚本之家其它相关文章！
编程 | 2023-02-24 21:36
编程 | 2023-02-21 12:51
编程 | 2023-02-21 12:47
编程 | 2023-02-21 00:15
编程 | 2023-02-21 00:08
编程 | 2023-02-20 21:46
编程 | 2023-02-20 21:42
编程 | 2023-02-20 21:36
编程 | 2023-02-20 21:32
编程 | 2023-02-20 18:12
Python之列表推导式最全汇总(上篇)
加载中,请稍侯......
网友评论