web-dev-qa-db-ja.com

rxJSのパイプとは

私は基本概念を持っていると思いますが、いくつかのあいまいさがあります

だから一般的にこれは私が観測量を使用する方法です：

observable.subscribe(x => {

})

データをフィルタしたい場合は、これを使用できます。

import { first, last, map, reduce, find, skipWhile } from 'rxjs/operators';
observable.pipe(
    map(x => {return x}),
    first()
    ).subscribe(x => {

})

私もこれを行うことができます：

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/first';

observable.map(x => {return x}).first().subscribe(x => {

})

だから私の質問は次のとおりです。

  1. 違いはなんですか？
  2. 違いがない場合、なぜ関数パイプが存在するのでしょうか。
  3. これらの関数が異なるインポートを必要とするのはなぜですか？
angularrxjsrxjs5
52
enno.void

"pipable"（以前の "lettable"）演算子は、RxJS 5.5以降、演算子を使用するための現在および推奨される方法です。

公式ドキュメントを読むことを強くお勧めします https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

主な違いは、2つの異なるパーティが同じ名前の演算子を作成したい場合に衝突を起こす可能性のあるグローバルなObservableオブジェクトを変更しないでカスタム演算子を作成する方が簡単で、ツリーシェイク可能になることです。

各演算子'rxjs/add/operator/first'に対して別々のimportステートメントを使用することは、より小さなアプリバンドルを作成するための方法でした。 RxJSライブラリ全体ではなく必要な演算子だけをインポートすることで、バンドルの合計サイズを大幅に減らすことができます。ただし、'rxjs/add/operator/first'をインポートしたかどうかをコンパイラが知ることはできません。これは、コード内で本当に必要なのか、コードをリファクタリングするときに削除するのを忘れたためです。これは、未使用のインポートが自動的に無視されるpipable演算子を使用する利点の1つです。

51
martin