RxJS（Reactive Extensions for JavaScript）是一个流行的 JavaScript 库，用于处理异步数据流和事件处理。RxJS v5 是当前主流版本，但是现在几乎所有的框架和库都开始逐步升级到 RxJS v6。
本文将介绍 RxJS v5 到 v6 的变化和使用方法，为那些想要了解如何升级到 RxJS v6 的前端开发人员提供指导。
RxJS v6 中的重要变化
RxJS v6 变化较大，其中最显著的变化是 RxJS 操作符的引入，这使得特定的操作可以更加清晰地定义。
以下是从 RxJS 中删除的一些方法：
rxjs/observable/ArrayObservable: 数组可观察者rxjs/observable/ConnectableObservable: 可连接的可观察者rxjs/observable/ErrorObservable: 错误可观察者rxjs/observable/ForkJoinObservable: ForkJoin 可观察者rxjs/observable/PromiseObservable: Promise 可观察者
以下是添加到 RxJS 中的一些新的操作符：
- pipeable 操作符
通过使用 pipe() 方法调用新的操作符，可以更方便地对 Observable 进行操作。RxJS v6 允许使用 pipe() 方法对多个操作符进行排序，从而减少了 RxJS v5 中大量嵌套的问题。
以下是使用 RxJS v6 中的 pipe() 方法的示例：
-- -------------------- ---- -------
------ - ---- - ---- -------
------ - ---- ------- ---- - ---- -----------------
-------- -- -- -- ---
------
-------- -- - - - --- ---
----- -- - - ---
-------- -- -- - - --
-
------------ -- ----------------
-- --- - -- --- lettable 操作符
RxJS v6 引入了一种称为“lettable 操作符”的新类型的操作符。这些操作符与 pipeable 操作符非常相似，但是更加易于读取且更加先进。
以下是使用 RxJS v6 中的 lettable() 操作符的示例：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ------- ---- ---- - ---- ----------------- -------- -- -- -- --- ------------- -- - - - --- --- ---------- -- - - --- ------------- -- -- - - --- ------------ -- ---------------- -- --- - -- --
此外，RxJS v6 还提供以下新特性：
- 可观察对象不在具有“马上执行”的能力
- 使用
fromEventPattern()方法来创建 Observable subscribe()方法在取消订阅之后和错误发生之后仍会继续工作rxjs/Observable会转移到rxjs导出名称空间中
RxJS v6 的使用方法
除了引入新的操作符和更改某些方法之外，RxJS v6 的使用方法基本上与 RxJS v5 内容相同。
下面是使用 RxJS v6 中的 Observable 的示例：
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ---------- - -------------------------- -- - ----------------- ----------------- ----------------- ------------- -- ----------------- ------ --- ------------------------- -- ------------------- -- --- - - - ------------- -- ------------------------- -- ------------------- ------ -- --- -
上面的示例创建了一个新的 Observable，然后分别传入了 1、2 和 3 个参数，最后添加了一个 setTimeout 接收器。
使用上面的代码可以创建一个 observable，从而调用 subscribe 函数来打印输出其值。
RxJS v5 到 v6 升级指南
如果您目前正在使用 RxJS v5，那么升级到 RxJS v6 可能会面临一些挑战。
以下是升级 RxJS v6 的步骤：
- 安装新版本
您可以使用以下命令升级到 RxJS v6：
npm install rxjs@6 rxjs-compat@6 --save
- 更改 import 语句
使用 RxJS v6 时，你必须相应地更改 import 语句。
在 RxJS v5 中，您可能会使用以下导入语句：
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';在 RxJS v6 中，您需要使用以下导入语句：
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';- 根据需要替换操作符
在 RxJS v5 中，你可能会使用以下操作符：
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/mergeMap';
由于 RxJS v6 中的新操作符已引入，因此您需要根据需要将这些操作符替换为相应的新操作符。
以下是一个替换示例：
-- -------------------- ---- -------
------ - ---- - ---- -------
------ - ---- ------- -------- - ---- -----------------
-------- -- -- -- ---
------
-------- -- - - - --- ---
----- -- - - ---
---------- -- --- - - ---
-
------------ -- --------------------- ----
-- --- ------ - ------ - ------ - ------ - ------ -- ------ --- 使用
rxjs-compat
对于那些使用大量的 RxJS v5 操作符的开发者来说，升级到 RxJS v6 意味着需要在项目中更改很多代码。为了解决这个问题，RxJS 提供了一个名为rxjs-compat的包，它允许开发者在 RxJS v5 和 v6 之间轻松切换。
为了使用 rxjs-compat，您需要保留 RxJS v5 的导入语句，但需要在 rxjs-compat 之前添加前缀。这样就可以在不更改代码的情况下将应用程序迁移到 RxJS v6。
以下是在应用程序中使用 rxjs-compat 的示例：
-- -------------------- ---- -------
------ - ---------- - ---- ------------------
------ - --- - ---- ---------------------------
------ - ------ - ---- ------------------------------
---------------- -- --
------
-------- -- - - - --- ---
----- -- - - --
-
------------ -- ----------------- 调试您的代码
最后，通过仔细调试代码，确保它在新的 RxJS v6 版本中正常工作。请注意，RxJS v6 更改许多内部实现和结构，因此在进行迁移时可能会遇到问题。
结论
RxJS v6 引入了一些新的值得欢迎的功能，例如更好的性能和更加易于使用的操作符。虽然升级到 RxJS v6 可能需要一些精力和时间，但这么做可以实现更好的代码优化和更高的工作效率。本篇文章的指导可以帮助您解决升级 RxJS v6 的问题，提高 RxJS 的使用能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b45759babaf620faa72d2