そこに新しいRxJS 6は何ですか？

その他 2019-08-15 08:03:34 訪問数: null

　　　Angular4からAngular6に当社のフロントエンドエンジニアリングのアップグレードは、rxjsは文法rxjs6にアップグレードする必要があります。Rxjs6は多くの変更を行った、の導入のおかげrxjs、コンパクトなパッケージを、そうでない場合はアップグレードが時間通りに完了しません。

    元rxjsが徐々にrxjs-コンパクトなパッケージを削除するには、rxjs6を変え文法後、公式の提案によれば。rxjs-コンパクトなパッケージには、いくつかの構文の変換に失敗しました、私たちのプロジェクトは、これらの機能に無用である、元rxjsコードがrxjs6に変換することができます。

 

    オリジナルリンク：https://segmentfault.com/a/1190000014956260

    

正式に2018年4月24日にリリースさRxJs 6は、開発者のためのいくつかのエキサイティングな追加や改善をもたらしました。ベン・レッシュ、rxJSのコア開発者は、強調しました：

 

  1. 同時にRxJS 6は、導入のクリーンな方法をもたらし、小さなAPIを持っています
  2. コードはまた、活字体自動移行を助けることができる一方で、開発者は、コードを変更せずに更新することができるようにNPMパッケージは、パッケージには、RxJS下位互換性を扱うことができます。

 

改善されたモジュール性とパフォーマンス、デバッグが容易：これらの新しい変化のRxJs 6は、開発者のために最適化された3つの方法を提供しています。RxJsチームは、下位互換性の新しいバージョンを保持しようとするが、APIのRxJsの数を削減するために、またはいくつかの大きな変化を紹介します。

 

私たちは新しいバージョンで導入RxJsチームを変更するものを見てみましょう。

 

RxJSの下位互換性6

 

簡単RxJS 6にRxJS 5から移行するためには、RxJSチームが呼ばれるリリースrxjs-compaパッケージトンの弟。パッケージv6とv5互換性レイヤを作成するためのAPIの間。
RxJsチームはお勧めしインストールすることで、開発者^6.0.0バージョンをrxjsしてrxjs-compat、既存のアプリケーションパッケージをアップグレードします。

 

npm install rxjs@6 rxjs-compat@6 --save

 

問題なく、既存のコードベースを実行するために継続しながら、このパッケージを使用するには、RxJS 6にアップグレードすることができます。彼はRxJs 6関数の中で出て取り除くサポート。
インストールは、rxjs-compatあなたがWebPACKの次バージョン4.0.0を使用している場合、この効果は増幅され、パッケージ化されたコードのパッケージの量を増加させます。
アップグレードが完了しますであることが推奨されてrxjs-compat削除されます。

 

rxjs-compatのアップグレードの制限事項RxJS

 

内2つだけ大きな変化rxjs-compatの非カバレッジ：

 

プロトタイプオペレータ活字体

 

まれに、あなたのコードライブラリは、独自の活字体のプロトタイプオペレータと改訂された定義Observableの名前空間を。このケースでは、オペレータ関連する活字体のコンパイルに、コードを更新する必要があります。

 

リリースノートでは、ユーザ定義のプロトタイプ演算子は、以下のように作成することができます。

 

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してv6、本質的に、APIの間の一時的な互換性レイヤrxjs-compatコードベースのために必要な提供していv5ますが、バージョンV6にアップグレードするためにあなたのコードベースをステップ実行することができますので、バージョン機能。アップグレードを完了し、除去するためにrxjs-compat、依存関係を、あなたは、コードベースを再構築し、使用を中止する必要がありv5、以下の機能のバージョンを：

 

変更importパスを

 

活字体は、開発者が使用をお勧めし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の対象実現が含まれています。

    import { webSocket } from 'rxjs/webSocket';

  • rxjs/ajax：RxのAJAX実装が含まれています。

    import { ajax } from 'rxjs/ajax';

  • rxjs/testing：RxJSテスト・ツール・ライブラリが含まれています。

    import { TestScheduler } from 'rxjs/testing';

  • 代わりに、パイプライン演算子のチェーンを使用しての

    新しいパイプライン演算子の構文を使用して、古いチェーンオペレーションを交換してください。オペレータの方法の結果は、次のプロセスオペレータに渡されます。
    削除しないでくださいrxjs-compatあなたはパイプライン演算子のためのすべてのチェーンオペレーションを修正するまで、袋を。あなたは活字体を使用している場合、  ts-lintそれは自動的にある程度、この再構築を実行します。
    ベンレッシュ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()。

    クラスの代わりに関数を使用してください

    機能ではなく、観察対象を動作させることができるクラス（観測）。すべての観察可能なクラスが削除されました。それらの機能は古いものと新しい演算子と関数に置き換えられています。これらの機能と代替機能前回の正確。
    例としては、次のとおりです：

    // 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

    RxJsチームは彼を放棄または削除することを決めたので、結果のセレクタは、広く使用されていなくてもRxJs特性は、文書化、深刻な結果セレクタはボリュームRxJsコードベースを増加しています。

    開発者はこの機能を使用するには、彼らがする必要がesultSelector外部コードにパラメータを交換してください。

    以下のためにfirst()、  last()この2つの機能は、これらのパラメータを削除し、削除されたrxjs-compat前のコードをアップグレードする必要があります。

    有する他のためresultSelectorのようなパラメータの関数mapping演算子を、パラメータが廃止されている
    他の方法で書き換えます。あなたは、削除した場合rxjs-compat、まだ、これらの機能を動作しますが、RxJsチームは、彼らがV7リリース前に除去しなければならないことを示します。

    例詳細については、ご相談RxJsドキュメントを

    その他RxJs6は捨てられました

    Observable.if そして 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());

    推奨されない方法

    移行ガイドによると、以下の方法が放棄さまたは再構築されています：

    マージ

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

// becomes

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

    連結

    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$);

    レース

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

// becomes

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

    ジップ

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

// becomes

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

    概要

    RxJS 6は、いくつかの重要な変化をもたらしていますが、徐々に移行V5ながら実行しているコードを維持することができますrxjs-compatのパッケージを追加することによってこの問題を軽減することができます。活字ユーザー、ほとんど角度の開発者を含む他の人のために、tslint変換を容易に自動化されたリファクタリング機能を多数提供しています。

    任意のアップグレードやコードの変更は、コードライブラリ内のいくつかのバグを紹介します。だから、エンドユーザーが最終的に同じ品質の経験を受け取ることを保証するために、あなたの機能をテストしてください。

 

おすすめ

転載: www.cnblogs.com/lnlvinso/p/11355269.html
おすすめ
ランキング
Javaのデザインパターンプロトタイプモード
パンダのデータ処理| apply（）関数の使用ガイド！
C＃02
同じフォームを使用してレコードを追加し、更新するPHPのフォームは、クエリパラメータに依存します
1807512-43-1，Dde Biotin-PEG4-DBCO可切割的生物素试剂
LINUXは、一時的にユーザーIDを切り替えるためにsuコマンドを使用します
例题8-15(uva-12174)
VTK-vtk質量特性
DockfileとDockerのデータボリューム
SQLの分離レベル
アーカイブ
もっと
2024-06-16(0)
2024-06-15(0)
2024-06-14(0)
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)

コードワールド

© 2018 codetd.com