介绍
RxJS是一个流式编程库,它提供了一种基于观察者模式的抽象概念,使得我们可以更加容易的处理异步数据流。在RxJS 5和RxJS 6之间,有一些重要的区别,这篇文章将会对这些区别进行详细的介绍。
Observable
在RxJS 5中,Observable是一个类,它提供了许多操作符来处理数据流。而在RxJS 6中,Observable被改为了一个接口,使得我们可以更加方便的实现自定义的Observable。
RxJS 5
import { Observable } from 'rxjs/Observable'; const myObservable = new Observable(observer => { observer.next(1); observer.next(2); observer.next(3); observer.complete(); });
RxJS 6
import { Observable } from 'rxjs'; const myObservable = new Observable(observer => { observer.next(1); observer.next(2); observer.next(3); observer.complete(); });
Pipeable Operators
在RxJS 5中,我们使用链式调用来使用操作符,这会导致一些问题,比如说可读性差,难以重用等等。而在RxJS 6中,我们使用管道操作符(pipeable operators),使得代码更加易读和易维护。
RxJS 5
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/filter'; const myObservable = Observable.from([1, 2, 3, 4, 5]); const myNewObservable = myObservable .filter(x => x % 2 === 0) .map(x => x * 2);
RxJS 6
import { from } from 'rxjs'; import { filter, map } from 'rxjs/operators'; const myObservable = from([1, 2, 3, 4, 5]); const myNewObservable = myObservable.pipe( filter(x => x % 2 === 0), map(x => x * 2) );
Creation Operators
在RxJS 6中,创建Observable的操作符被拆分成了两个类别:creation operators和pipeable creation operators。这样做的好处是,我们可以更加方便的重用这些操作符。
RxJS 5
import { Observable } from 'rxjs/Observable'; const myObservable = Observable.create(observer => { observer.next(1); observer.next(2); observer.next(3); observer.complete(); });
RxJS 6
import { of } from 'rxjs'; const myObservable = of(1, 2, 3);
Conclusion
RxJS 6是RxJS 5的升级版本,它在性能和可读性方面都有所改进。通过本文的介绍,我们了解了RxJS 5和6的主要区别,包括Observable的改变,管道操作符的引入以及创建操作符的拆分。希望这篇文章能够对你在学习RxJS时有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/679783a7504e4ea9bde9f0d5