如何在 React 中使用 RxJS-JavaScript中文网-JavaScript教程资源分享门户

什么是 RxJS

RxJS是ReactiveX操作符的JavaScript实现。 ReactiveX是具有面向数据流和异步编程思想的应用程序编程接口。 ReactiveX使用Observables观察数据流并尽可能减少需要代码的数量和复杂性。

RxJS的目标是解决对异步和事件驱动的程序的挑战，RxJS帮助开发者进行更容易、更简单、更直接的编程。而React，是一个JavaScript库，它使开发者能够构建高性能、使用模块化和可重用组件的web应用程序。

React与RxJS的兼容性允许我们将Observable对象与React组件结合使用，方便地管理数据流和组件的行为。这样，获取便捷地组件状态、异步行为和事件。

如何使用RxJS

安装RxJS

我们可以使用NPM (npm install rxjs)来安装RxJS。这些操作将在您的代码中使RxJS变为可用的依赖项。

建立一个Observable

Observable是一个异步可观察对象，它可以发出零到任意数量的值，这些值可以在任何给定的时间间隔内虽然订阅。这是一个创建简单的Observable：

import { Observable, from } from 'rxjs';

const data$ = from([1, 2, 3, 4, 5]);

接下来是在React组件中订阅Observable。如果我们想要的是一次性订阅，那我们可以这样做：

componentDidMount() {
  this.subscription = data$.subscribe(data => this.setState({ data }));
}

componentWillUnmount() {
  this.subscription.unsubscribe();
}

如果我们想要在组件的生命周期内订阅多次，那我们可以使用一个更好的方法——使用React Hook：

-- -------------------- ---- -------
------ - --------- --------- - ---- --------

-------- ------------- -
  ----- ------ ----------- - -------------
  
  ------------ -- -
    ----- ------------ - ----------------------------
    ------ -- -- ---------------------------
  -- ----

  ------ -
    ----
      --------------- -- -
        --- ------------------------
      ---
    -----
  --
-

向Observable发送事件

输出一个TypeScript类型为Rx.Subject<number>的对象：

const data$ = new Rx.Subject<number>();

向这个对象中派发事件，即向计划的组件中提供期望的道德。这是发送一个新值的例子：

data$.next(6);

使用操作符

Observables提供了各种操作符，可以对流进行转换，归约等操作。 RxJS 提供了许多操作符，使您可以轻松地组合您的数据，从而减少代码复杂性。

在我们的Observable发送数字之前，我们可以通过下面的代码更改它们：

const modifiedData$ = data$.pipe(
  filter(value => value % 2 === 0),
  map(value => `Even: ${value}`),
);

modifiedData$.subscribe(data => console.log(data));

这里的filter和map操作符接收“完整”的（即不是单个值的）数据流，并返回一个过滤或转换的数据流。

示例代码

以下是一个完整的使用React和RxJS的示例：

-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----------- ---- - ---- -------
------ - ------- --- - ---- -----------------

----- ----- - -------- -- -- -- ----

------ ------- -------- --------------- -
  ----- ------ -------- - -------------

  ------------ -- -
    ----- ------------ - -------------------------
    ------ -- -- ---------------------------
  -- ----

  ----- ----------- - -- -- -
    ------------------------ - --- - -- - ---
  --

  ----- ------------- - -----------
    ------------ -- ----- - - --- ---
    --------- -- ------ ----------
  --

  ------ -
    -----
      ----
        --------------- -- -
          --- ------------------------
        ---
      -----
      ------- ------------------------------ -------------
      --- --
      --------------- ----------
      ----
        ------------------------------ -- -
          --- ------------------------
        ---
      -----
    ------
  --
-

总结

在React中使用RxJS非常有用，它可以轻松地创建一个可观察的组件，处理异步数据，响应事件等等。使用React Hook和RxJS工具箱，您可以轻松地构建可重用、且复杂功能的React组件。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6482d10348841e989422cc84