RxJS 6有哪些新变化？

　　　我们的前端工程由Angular4升级到Angular6，rxjs也要升级到rxjs6.  rxjs6的语法做了很大的改动，幸亏引入了rxjs-compact包，否则升级工作会无法按时完成。

按照官方的建议，逐步将原rxjs语法改为rxjs6后，要去掉rxjs-compact包。 rxjs-compact包无法转换一些语法，我们的工程中没用到这些特性，原rxjs代码可以转为rxjs6.

原文链接：https://segmentfault.com/a/1190000014956260

RxJs 6于2018年4月24日正式发布，为开发人员带来了一些令人兴奋的增补和改进。Ben Lesh, rxJS核心开发成员，强调：

  1. RxJS 6在拥有更小API的同时，带来了更整洁的引入方式
  2. 提供一个npm包，该package可以处理RxJS的向后兼容性，使得开发人员可以在不更改代码的情况下进行更新，同时还可以帮助TypeScript代码自动迁移。

RxJs 6这些新的改动为开发人员提供了以下三方面的优化：模块化方面的改进、性能提升、调试更方便。RxJs团队尽力保持新版本的向后兼容性，但是为了减少RxJs的API数量，还是引入了一些重大修改。

下面让我们一起来看一下RxJs团队在新版本中引入了哪些修改。

RxJS 6的向后兼容性

为了便捷地从RxJS 5迁移到RxJS 6，RxJS团队发布了一个名为rxjs-compat的兄弟软件包。该软件包在v6和v5的API之间创建了一个兼容层。
RxJs团队建议开发人员通过安装^6.0.0版本的rxjs和rxjs-compat包来升级现有应用:

npm install [email protected] [email protected] --save

此包允许您在升级RxJS 6的同时继续运行现有代码库，而不会出现问题。他支持在RxJs 6中移除掉的功能。
安装rxjs-compat会导致打包后代码包体积的增加，如果你使用的是4.0.0版本以下的Webpack，该影响会被放大。
因此建议升级完成后将rxjs-compat移除。

使用rxjs-compat升级RxJS的限制

只有两个重大修改在rxjs-compat中未覆盖：

TypeScript原型操作符

在极少数情况下，您的代码库定义了它自己的TypeScript原型操作符并修改了Observable命名空间。该情况下，您需要更新你的操作符相关代码才能使TypeScript正常编译。

在版本发布说明中，用户自定义的原型操作符可按如下方式创建：

Observable.prototype.userDefined = () => {
  return new Observable((subscriber) => {
    this.subscribe({
      next(value) { subscriber.next(value); },
      error(err) { subscriber.error(err); },
      complete() { subscriber.complete(); },
   });
  });
});

source$.userDefined().subscribe();

为编译该类型的自定义操作符，需要做如下修改：

const userDefined = <T>() => (source: Observable<T>) => new Observable<T>((subscriber) => {
    this.subscribe({
      next(value) { subscriber.next(value); },
      error(err) { subscriber.error(err); },
      complete() { subscriber.complete(); },
   });
  });
});

source$.pipe(
  userDefined(),
)

同步错误处理

不再支持在try / catch块内调用Observable.subscribe()。使用用Observable.subscribe()方法中的错误回调方法替换原先的try / catch块来完成的异步错误的处理。
示例如下：

// deprecated
try {
  source$.subscribe(nextFn, undefined, completeFn);
} catch (err) {
  handleError(err);
}

// use instead
source$.subscribe(nextFn, handleError, completeFn);

现在在Observable.subscribe()中必须定义一个错误回调方法来异步处理错误。

删除RxJs兼容层前需要做的修改

如上所诉，rxjs-compat提供了V5与v6API间的临时兼容层，实质上rxjs-compat为您的代码库提供了所需的v5版本功能，使得您可以逐步将您的代码库升级到v6版本。为了完成升级并移除rxjs-compat依赖，您的代码库需要重构并停止使用v5版本中的如下功能：

修改import路径

建议TypeScript开发人员使用rxjs-tslint来重构import路径。
RxJS团队设计了以下规则来帮助JavaScript开发人员重构import路径：

  • rxjs: 包含创建方法，类型，调度程序和工具库。

    import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from‘rxjs‘;
  • rxjs/operators: 包含所有的管道操作符 
    import { map, filter, scan } from ‘rxjs/operators‘;
  • rxjs/webSocket: 包含websocket subject实现. 
    import { webSocket } from ‘rxjs/webSocket‘;
  • rxjs/ajax: 包含Rx ajax实现. 
    import { ajax } from ‘rxjs/ajax‘;
  • rxjs/testing: 包含RxJS的测试工具库. 
    import { TestScheduler } from ‘rxjs/testing‘;

  • 使用管道操作而不是链式操作

    使用新的管道操作符语法替换旧有的链式操作。上一个操作符方法的结果会被传递到下一个操作符方法中。
    不要移除rxjs-compat包，直到你将所有的链式操作修改为管道操作符。如果您使用TypeScript, ts-lint会在某种程度上自动执行此项重构。
    Ben Lesh在ng-conf 2018上解释了为什么我们应该使用管道操作符。

    请按照如下步骤将您的链式操作替换为管道操作：

    • 从rxjs-operators中引入您需要的操作符

      注意：由于与Javascript保留字冲突，以下运算符名字做了修改：do -> tap, catch ->
      catchError, switch -> switchAll, finally -> finalize

      import { map, filter, catchError, mergeMap } from ‘rxjs/operators‘;
    • 使用pipe()包裹所有的操作符方法。确保所有操作符间的.被移除，转而使用,连接。记住！！！有些操作符的名称变了！！！
      以下为升级示例： 
      // an operator chain
source
  .map(x => x + x)
  .mergeMap(n => of(n + 1, n + 2)
    .filter(x => x % 1 == 0)
    .scan((acc, x) => acc + x, 0)
  )
  .catch(err => of(‘error found‘))
  .subscribe(printResult);

// must be updated to a pipe flow

source.pipe(
  map(x => x + x),
  mergeMap(n => of(n + 1, n + 2).pipe(
    filter(x => x % 1 == 0),
    scan((acc, x) => acc + x, 0),
  )),
  catchError(err => of(‘error found‘)),
).subscribe(printResult);

      注意我们在以上代码中嵌套使用了pipe()。

    使用函数而不是类

    使用函数而不是类来操作可观察对象(Observables)。所有的Observable类已被移除。他们的功能被新旧操作符及函数替代。这些替代品的功能与之前的类功能一模一样。
    示例如下：

    // removed
ArrayObservable.create(myArray)

// use instead

from(myArray)

// you may also use

new operator fromArray().

    有关替换v5类为v6函数的完整列表，请查看RxJS文档。

    特殊情况

    • ConnectableObservable在v6中不能直接使用，要访问它，请使用操作符multicast，publish，publishReplay和publishLast。
    • SubscribeOnObservable在v6中不能直接使用，要访问它，请使用操作符subscribeOn

    移除resultSelector

    Result Selectors是一项没有被广泛使用甚至没有文档说明的RxJs特性，同时Result Selectors严重的增加了RxJs代码库的体积，因此RxJs团队决定弃用或删除他。

    对于使用到该功能的开发人员，他们需要将esultSelector参数替换为外部代码。

    对于first(), last()这两个函数，这些参数已被移除，在删除rxjs-compat之前务必升级代码。

    对于其他拥有resultSelector参数的函数，如mapping操作符，该参数已被弃用，并
    以其他方式重写。如果您移除rxjs-compat，这些函数仍可正常工作，但是RxJs团队声明他们必须在v7版本发布之前将其移除。

    针对该情况的更多详情，请查阅RxJs文档

    其他RxJs6弃用

    Observable.if and Observable.throw

    Observable.if已被iif()取代，Observable.throw已被throwError()取代。您可使用rxjs-tslint将这些废弃的成员方法修改为函数调用。

    代码示例如下：

    OBSERVABLE.IF > IIF()

    // deprecated
Observable.if(test, a$, b$);

// use instead

iif(test, a$, b$);

    OBSERVABLE.ERROR > THROWERROR()

    // deprecated
Observable.throw(new Error());

//use instead

throwError(new Error());

    已弃用的方法

    根据迁移指南，以下方法已被弃用或重构：

    merge

    import { merge } from ‘rxjs/operators‘;
a$.pipe(merge(b$, c$));

// becomes

import { merge } from ‘rxjs‘;
merge(a$, b$, c$);

    concat

    import { concat } from ‘rxjs/operators‘;
a$.pipe(concat(b$, c$));

// becomes

import { concat } from ‘rxjs‘;
concat(a$, b$, c$);

    combineLatest

    import { combineLatest } from ‘rxjs/operators‘;
a$.pipe(combineLatest(b$, c$));

// becomes

import { combineLatest } from ‘rxjs‘;
combineLatest(a$, b$, c$);

    race

    import { race } from ‘rxjs/operators‘;
a$.pipe(race(b$, c$));

// becomes

import { race } from ‘rxjs‘;
race(a$, b$, c$);

    zip

    import { zip } from ‘rxjs/operators‘;
a$.pipe(zip(b$, c$));

// becomes

import { zip } from ‘rxjs‘;
zip(a$, b$, c$);

    总结

    RxJS 6带来了一些重大改变，但是通过添加rxjs-compat软件包可以缓解这一问题，该软件包允许您在保持v5代码运行的同时逐渐迁移。对于Typescript用户，其他中包括大多数Angular开发人员，tslint提供了大量的自动重构功能，使转换变得更加简单。

    任何升级与代码修改都会引入一些bug到代码库中。因此请务必测试您的功能以确保您的终端用户最终接受到相同的质量体验。

原文地址：https://www.cnblogs.com/lnlvinso/p/11355269.html

时间： 2024-10-01 00:13:33

RxJS 6有哪些新变化？的相关文章

［转］Material Design Library 23.1.0的新变化与代码实战

Design Library出来已经快有一个月了,当时大概看了一下介绍这个新版本变化的译文,内容不多,给我印象最深的就是Percent lib.AppBarLayout 和NavigationView的变化,当然还有Design Lib的一些控件内部实现的变化没有介绍,从而使得在使用新版本的控件时候难免因为版本的不同会发生一些异常,而本人正好在上个星期对一个项目换库时发现了这个问题,什么问题呢? NavigationView使用注意的问题 就是NavigationView的内部实现发生了改变,它

Material Design Library 23.1.0的新变化与代码实战

Design Library出来已经快有一个月了,当时大概看了一下介绍这个新版本变化的译文,内容不多,给我印象最深的就是Percent lib.AppBarLayout 和NavigationView的变化,当然还有Design Lib的一些控件内部实现的变化没有介绍,从而使得在使用新版本的控件时候难免因为版本的不同会发生一些异常,而本人正好在上个星期对一个项目换库时发现了这个问题,什么问题呢? NavigationView使用注意的问题 就是NavigationView的内部实现发生了改变,它

拥抱Android Design Support Library新变化（导航视图、悬浮ActionBar..）

转载 请注明 明桑Android Android 5.0 Loollipop作为Android最重要的版本之一,为我们带来了全新的界面风格和设计语言.看起来很受欢迎,可它的普及似乎不那么顺利,刚过去不久的Google I/O 2015都已经推出了新的Android M预览版.即使是这样,原生版本的Android推广似乎一直没取得google预期的结果-不管怎样,作为开发者我们关心的无非是这个平台是否好用,能否开发出精致而又有趣的应用.好在Material Design我认为是成功的,官方在And

Delphi XE7 GPS控件android下的新变化

Delphi XE7 GPS控件的Android新变化 GPS控件的Accuracy可以起作用了,Accuracy>0时:      1--100:ACCURACY_HIGH  101--500:ACCURACY_MEDIUM  其它值时:ACCURACY_LOW Accuracy=0时根据以下方式进行定位:1.GPS_PROVIDER2.NETWORK_PROVIDER3.PASSIVE_PROVIDER Delphi XE7以前版本GPS控件优先使用网络定位,而XE7是根据Accuracy来

[译] OpenStack Kilo 版本中 Neutron 的新变化

OpenStack Kilo 版本,OpenStack 这个开源项目的第11个版本,已经于2015年4月正式发布了.现在是个合适的时间来看看这个版本中Neutron到底发生了哪些变化了,以及引入了哪些新的关键功能. 1. 扩展 Neutron 开发社区 (Scaling the Neutron development community) 为了更好地扩展 Neutron 开发社区的规模,我们在Kilo开发周期中主要做了两项工作:解耦核心插件以及分离高级服务.这些变化不会直接影响 OpenStac

Swift2.2中的新变化

原文链接点击这里 Swift2.2已经更新了,这次更新去除了一些难用的语法还添加了一些缺失的特性,并且还弃用了一些有争议的语言特性.这篇文章将详细介绍Swift2.2中的一些主要的变化和一些细微的改变,还会展示一些实际的代码例子来让你更快的上手Swift2.2. 1. ++ 和 – 被弃用了 Swift 2.2正式地弃用了++和–操作符,意味着他们仍然可用但当你用到时会得到哦一条警告.弃用一般是完全移除的第一步,因此在这种情况下在Swift 3.0中这两个操作符将会被移除掉. 在使用这两个操作符

[译] OpenStack Liberty 版本中的53个新变化

一个新的秋季,一个新的OpenStack 版本.OpenStack 的第12个版本,Liberty,在10月15日如期交付,而且目前发行版本已经备好了.那么我们期望能从过去六个月时间的开发中获得些什么呢?  正如过去几年一样,每个版本都有大量的变化和引入新的功能,但是现在,OpenStack 已经达到一个新的位置,那就是大部分的必要功能都已经齐备了,因此,现在更多的是增量式的变化-只有一些偶然性爆发的领域是例外,比如容器.  当然,这不是说容器就是过去六个月内的所有值得期待的东西.除了容器,还有

iOS9编程GOGOGO:XCode7新变化

做一个关于栈视图 UIStackView的Demo,先看看XCode7的变化 关于StoryBoard: 启动画面由xib变为Storyboard StoryBoard引用: 如今能够在一个StoryBoard中加入对另外一个StoryBoard的引用,在多个SB中进行切换不用再写代码了.如图: 曾经的方式(SWIFT): override func viewDidLoad() { super.viewDidLoad() var sb : UIStoryboard let del = UIApp

用户将无法自行关闭 Win10专业版应用商店新变化

现在,Windows10专业版系统中已经有了一些新的变化,如果我们把系统升级到Windows10专业版Build 1511(也就是Win10 TH2),那么以后就无法关闭Win10应用商店了,即使是通过群组政策修改也不行. 经过365bet系统城查询更多信息,该政策仅适应于Win10专业版系统,而在Win10企业版和教育版中,Win10商店可关闭是一项保留功能.目前一位微软发言人已经确认此事: “微软给予企业级客户提供选择应用下载和安装环境配置选择,不管是工作中还是生活中.IT专业人员通过Win