ネイティブ Observable、まだ存在しない Observable を RxRxnd します

現在、たくさんの興味深いことが起こっています。

RxJS 7 は素晴らしいです。RxJS 8 はアルファ版で、使えるようです。Chrome Today で利用できる新しい Native Observable も同様です。

一緒に使用できますか?
短い答えですが、ノーのようなものです。技術的には、それらはすべて Observable なので、同じ言語を話すはずですよね? .subscribe、.next、.error、.complete、そして出来上がりです...

そうですね、もうすぐです。ただし、RxJS は「安価なインポート」ではなく、真の Obsevable を確実に処理するために追加の努力を行っています。
したがって、Symbol.observable または @@observable が存在するかどうかを注意深くチェックするため、技術的には Observable.prototype['@@observable'] = function(){ return this } を実行することで、DOM Observable にそれらをモンキーパッチすることができますが、 ...成功し、document.when('click').subscribe(new Subject()) を介して両方を接続できたとしても、RxJS ストリームが参照を作成するため、再び失敗します。内部的には自分自身の this に設定されますが、これは別の場所を指すことになるため、壊れます。

ご苦労様です。Native Observable をサブスクライブし、データを RxJS ランドに転送するカスタム ブリッジが必要です。

なるほど、それを実行したとしましょう、確かにうまくいくでしょう。この愚かなラップ関数が完了していれば、突然次のようなことができるようになります:

const clickCount = rx(
  wrap(document.when('click')),
  scan(x=>x+1, 0),
);

clickCount.subscribe(doSomething);

とにかく、上記はすでにある種のニュースとして認定されている可能性がありますが、本当に興味深い部分はまだまったくありません!

興味深い部分

ここで興味深いのは、現実の世界、実際のアプリケーション (通常は Web フレームワークまたは小規模な UI ライブラリ内) での Observable の使用について話すときです。

JavaScript「コンポーネント」内で Observable を使用して、クリックカウンター ボタンのケースを考えてみましょう。

import { Subject, scan } from 'rxjs';
import { rml } from 'rimmel';

const Component = () => {
  const counter = new BehaviorSubject(0).pipe(
    scan(x=>x+1)
  );

  return rml`
    <button onclick="${counter}">hit me</button>
    Count: <span>${counter}</span>
  `;
}

Native DOM Observable には、いくつかの興味深い問題があります。 Subject は存在​​せず、BehaviorSubject も存在しません。
それに加えて、演算子を渡すための .pipe() メソッドさえありません。
最後に、ネイティブ演算子はすべて Observable クラスのメソッドであり、関数ではありません。

それで、大きな問題は、まだ存在しないオブジェクトのメソッドをどのように呼び出すかということです。

(おそらくこの時点で道に迷っているでしょう...わかっています、お待ちください)

Observable を作成する新しい方法は、element.when(eventName) のようになります。これは DOM へのネイティブ呼び出しです。
ただし、今はテンプレート内にあり、JavaScript コンポーネント内にいます。まだ HTML が DOM に追加されていないため、.when() の呼び出しが行われた可能性はありません。

そして、それに対して .map().inspect().filter() を呼び出したいと思います!

見落とし？ RxJS は数年前まで同じインターフェイスを使用していました (Bacon や Zen Observables などはまだ使用しています)。しかし、ツリーシェイキングを支援するために、すべての 演算子メソッド を 演算子関数 なので、必要なものだけをインポートできるようになり、アプリが軽量になります。素晴らしいです!

展望台

それでは、新しい状況に戻りますが、コンポーネント内からそれを解決するにはどうすればよいでしょうか?

確かに、まあ、それは簡単です！私たちは、WICG の提案で Subject と BehaviorSubject を取得するか (ネタバレ: 今のところは取得しません)、あるいは... 創造力を発揮してシステムをハッキングし、
ふりをする を助けるプロキシのようなものを考え出すかのどちらかです。ネイティブ DOM Observable は存在しない場合でも存在するため、そのネイティブ オペレーター メソッドを呼び出すことができます。 ?

私はそれを...天文台と呼びました。

観測可能な未来 = 観測。

Observaturusはラテン語で「観察する者」という意味なので、それを無理やり英語にするとこんな感じになるはずです。

それでは、コードではどのように見えるでしょうか?

const clickCount = rx(
  wrap(document.when('click')),
  scan(x=>x+1, 0),
);

clickCount.subscribe(doSomething);

そうだ、見てください!ここに何かがあります: new Observature(0).scan(x=>x 1).

これについて説明しましょう。
技術的には、新しい BehaviorSubject(0).scan(x=>x 1) を作成するのと似ていますが、1 つの点が異なります。それは、BehaviorSubject がもう存在しないということです。 ?
Observature は単なる代理です。これは、後のサブスクリプションと後のバインディングのために、Observable と Observer のメソッドを公開します!
.scan(fn) を呼び出すと、必要なときにサブスクライブされる実際の Observable に対して .scan を呼び出すことを記憶します。

では、Observatures はどのような興味深いものをもたらしてくれるでしょうか?

1 つ目は、これらが実際のサブジェクトではないという事実です。そのため、上記のコードを実行すると、指定した演算子関数はスタックのレベル 1/2 で実行されます。クリックからシンクまで、これまでに見たものよりも軽くて速いかもしれません。いいえ、まだベンチマークを実行していませんし、気にしていません。今のところ重要なのはコンセプトです。

ああ、もう一つ小さなメモです。現在の仕様には Observable.scan() も含まれていないため、現時点でできることの 1 つはモンキー パッチを適用することですが、繰り返しになりますが、これらはほんの小さな実装の詳細にすぎません。私たちはネイティブの Observable を持っています。それは大きな問題です!

他のユースケースでは 100% ネイティブを維持するには、.map() と .filter() を使用するだけで済みますが、私の経験では、scan() なしでは適切な生活を送ることはできません。

RxJS8

わかりました、それで...上記は RxJS ではなくネイティブのものを使用していました。

RxJS8 ではどのようになりますか?
私の答えは、「わかりません。@benlesh に聞いてください。彼はあなたの男です :)
」です。

現在の障害は同じです。ネイティブ Observable は RxJS によって認識されないため、少し作業が必要です。すべては次のようになります:

import { Subject, scan } from 'rxjs';
import { rml } from 'rimmel';

const Component = () => {
  const counter = new BehaviorSubject(0).pipe(
    scan(x=>x+1)
  );

  return rml`
    <button onclick="${counter}">hit me</button>
    Count: <span>${counter}</span>
  `;
}

どう思いますか？このようなものを使用しますか?

今のところ、この Stackblitz で DOM Observables、Observatures を使用して遊ぶことができます

メッセージをドロップして感想を残してください。

以上がネイティブ Observable、まだ存在しない Observable を RxRxnd しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。