JavaScript と RxJS を使用したリアクティブプログラミング-jsチュートリアル-php.cn

JavaScript と RxJS を使用したリアクティブプログラミング

PHPz

リリース： 2023-09-09 18:37:02

転載

1080 人が閲覧しました

使用 JavaScript 和 RxJS 进行响应式编程

リアクティブプログラミングは、非同期データフローを処理するプログラミングパラダイムです。これは、変更により迅速に対応し、イベントとデータフローをより効率的に処理するコードを作成する方法です。

リアクティブプログラミングでは、データはイベントのストリームとして表されます。これらのイベントには、ユーザー入力からネットワーク要求、データベース更新まで、あらゆるものが含まれます。次に、プログラムはこれらのイベントをサブスクライブし、イベントが発生したときに反応します。

このプログラミング方法には多くの利点があります。まず、非同期データの操作が容易になります。従来のプログラミングでは、データがいつ利用可能になるかを知ることが難しいため、非同期データの処理が難しい場合があります。一方、リアクティブプログラミングは、非同期データをイベントのストリームとして扱うことで、より自然な方法で処理します。

第二に、リアクティブプログラミングはコードのパフォーマンスの向上に役立ちます。イベントをサブスクライブすると、新しいデータが利用可能になるとすぐにコードに通知されるため、データをポーリングしたり、イベントの発生を待つ必要がなくなります。

最後に、リアクティブプログラミングは、コードの保守性を高めるのに役立ちます。データをイベントのストリームとして扱うことで、コードがより宣言的になり、コードのさまざまな部分がどのように相互作用するかを理解しやすくなります。

RxJS

RxJS は、リアクティブプログラミング API を提供する JavaScript ライブラリです。これは、Angular や React などの多くの人気のある JavaScript フレームワークで使用される人気のあるライブラリです。

RxJS は、リアクティブプログラミングに最適な多くの機能を提供します。これらの機能には -

が含まれます

Observable オブジェクト− Observable は RxJS の基本的な構成要素です。これらはイベントのストリームを表し、数値、文字列、オブジェクト、配列などのあらゆる種類のデータを表すために使用できます。
演算子− 演算子は、Observable の変換、フィルター、結合に使用できる関数です。 RxJS では多数の演算子を使用でき、Observable でさまざまな操作を実行できます。
スケジューラ− スケジューラは、Observable の時間を制御するために使用されます。これらを使用すると、Observable を特定の時間に起動したり、イベントの発行を遅らせたりすることができます。

RxJSをインストールする

RxJS の使用を開始するには、RxJS をインストールする必要があります。ターミナルを開いて次のコマンドを実行します -

リーリー

インストールが完了したら、RxJS リアクティブプログラミングの力を試し始めることができます。

監視可能なオブジェクトを作成する

Observable は RxJS の中心です。これらは、サブスクライバーが観察できるデータのストリームを表します。

まず、一連の数値を出力する単純な Observable を作成しましょう -

Example

リーリー

イラスト

上記のコードでは、RxJS の Observable クラスを使用して Observable を作成します。コンストラクター内で、値を出力するためのロジックを定義します。この例では、setInterval を使用して 1 秒ごとに数値を出力します。カウントが 5 に達すると、間隔を停止し、observer.complete() を呼び出してストリームの終了を通知します。

Observable によって発行された値を観察するには、subscribe メソッドを呼び出し、コールバック関数を提供します。この場合、コールバック関数は単に出力された数値をコンソールに記録します。

＃＃＃出力＃＃＃リーリー

RxJS の演算子

RxJS は、Observable によって発行されたデータを変換、フィルター、結合、操作できるようにする幅広い演算子を提供します。いくつかの一般的な演算子を見てみましょう。

マップ演算子

マップ演算子を使用すると、Observable によって発行された値を変換できます。たとえば、前の例を変更して、出力される数値を 2 倍にしてみましょう -

Example

リーリー

イラスト

このコードでは、パイプラインメソッドを使用してマッピングオペレーターを Observable にリンクします。マッピング演算子は、出力された各数値を 2 倍にして変換するコールバック関数を受け取ります。結果の値は、サブスクライバーのコールバック関数に渡されます。

＃＃＃出力＃＃＃リーリー

フィルター演算子

フィルター演算子を使用すると、条件に基づいて Observable によって出力される値を選択的にフィルターで除外できます。偶数のみを出力するフィルターを前の例に追加しましょう -

示例

import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable
   .pipe(filter((number) => number % 2 === 0))
   .subscribe((number) => {
      console.log(number);
   });

ログイン後にコピー

说明

在提供的代码中，我们创建了一个名为 numberObservable 的 Observable，它发出一系列数字。 Observable 使用 setInterval 发出从 0 开始的数字，每秒递增 1。发出数字 5 后，间隔被清除，Observable 使用observer.complete() 发出完成信号。

接下来，我们使用管道方法将过滤运算符应用于 numberObservable。过滤器运算符采用定义条件的回调函数。它过滤掉不满足条件的值，只允许偶数通过。

最后，我们订阅过滤后的 Observable，并使用订阅者的回调函数将每个发出的数字记录到控制台。