什么是 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：
------ - ----------- ---- - ---- ------- ----- ----- - -------- -- -- -- ----
- 订阅
接下来是在React组件中订阅Observable。 如果我们想要的是一次性订阅，那我们可以这样做：
------------------- - ----------------- - -------------------- -- --------------- ---- ---- - ---------------------- - -------------------------------- -
如果我们想要在组件的生命周期内订阅多次，那我们可以使用一个更好的方法——使用React Hook：
------ - --------- --------- - ---- --------
-------- ------------- -
----- ------ ----------- - -------------
------------ -- -
----- ------------ - ----------------------------
------ -- -- ---------------------------
-- ----
------ -
----
--------------- -- -
--- ------------------------
---
-----
--
-- 向Observable发送事件
输出一个TypeScript类型为Rx.Subject<number>的对象：
----- ----- - --- ---------------------
向这个对象中派发事件，即向计划的组件中提供期望的道德。这是发送一个新值的例子：
--------------
- 使用操作符
Observables提供了各种操作符，可以对流进行转换，归约等操作。 RxJS 提供了许多操作符，使您可以轻松地组合您的数据，从而减少代码复杂性。
在我们的Observable发送数字之前，我们可以通过下面的代码更改它们：
----- ------------- - ----------- ------------ -- ----- - - --- --- --------- -- ------ ----------- -- ---------------------------- -- -------------------
这里的filter和map操作符接收“完整”的（即不是单个值的）数据流，并返回一个过滤或转换的数据流。
示例代码
以下是一个完整的使用React和RxJS的示例：
------ ------ - --------- --------- - ---- --------
------ - ----------- ---- - ---- -------
------ - ------- --- - ---- -----------------
----- ----- - -------- -- -- -- ----
------ ------- -------- --------------- -
----- ------ -------- - -------------
------------ -- -
----- ------------ - -------------------------
------ -- -- ---------------------------
-- ----
----- ----------- - -- -- -
------------------------ - --- - -- - ---
--
----- ------------- - -----------
------------ -- ----- - - --- ---
--------- -- ------ ----------
--
------ -
-----
----
--------------- -- -
--- ------------------------
---
-----
------- ------------------------------ -------------
--- --
--------------- ----------
----
------------------------------ -- -
--- ------------------------
---
-----
------
--
-总结
在React中使用RxJS非常有用，它可以轻松地创建一个可观察的组件，处理异步数据，响应事件等等。使用React Hook和RxJS工具箱，您可以轻松地构建可重用、且复杂功能的React组件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6482d10348841e989422cc84