66

docsを読み、reactivity の背後にあるソースを見ましたが、理解できません。

私には魔法のように見えるので、誰かがこれが舞台裏でどのように機能するかを説明できますか:)。

4

1 に答える 1

99

したがって、実際にはかなり簡単です。基本的なレベルでは、2 種類の関数が関係しています。

  1. リアクティブ コンテキストを作成する関数 (リアクティブ関数)

  2. リアクティブ コンテキストを無効にする関数 (無効化関数)

  3. 両方できる機能。(3つあると嘘をついた)

を呼び出すと、meteor がグローバルに保存し、コールバックをサブスクライブするreactive functionが作成されます。リアクティブ関数に渡す関数、またはその中から実行される関数は、現在のものを取得してローカルに保存することができます。これらの関数は、データベースの更新や単にタイマー呼び出しのように、いつでもそれを無効にすることができます。その後、オリジナルはそのイベントを受け取り、それ自体を再評価します。contextreactive functioninvalidationinvalidating functioncontextcontextreactive function

以下は、流星関数を使用した段階的な手順です (Tracker.autorun以前は と呼ばれていたことに注意してくださいDeps.autorun)。

Tracker.autorun(function(){ 
  alert("Hello " + Session.get("name"));
});

Session.set("name", "Greg");
  1. autorun はパラメータとして関数を取ります
  2. autorun がこの関数を実行する前に、context
  3. autorun はcontextの無効化イベントにコールバックをアタッチします
  4. このコールバックは、autorun に渡された関数を再実行します
  5. 次に関数が でcontext初めて実行されます。
  6. Meteor はこれcontextを現在アクティブとしてグローバルに保存しますcontext
  7. 関数内には別の関数があります: Session.get()
  8. Session.get() は areactive functionとa の両方ですinvalidating function
  9. Session.get はそれ自身をセットアップし、それcontextをキー「name」と内部的に関連付けます
  10. Session.get は現在のコンテキスト (autorun のコンテキスト) を meteor からグローバルに取得します
  11. Session.get が独自のコンテキストに登録する無効化コールバックは、それを囲んでいるコンテキスト (この場合は autorun のコンテキスト) を単純に無効化します。
  12. これで、autorun と session.get の 2 つのコンテキストができました。

  13. これらの関数が戻ると、meteor はアクティブなコンテキスト グローバル変数をクリーンアップします。

  14. Session.set は、context.

  15. この場合context、キー「name」に関連付けられた Session によって作成されたすべてのを無効にしています
  16. これらはすべて、contexts無効化されると、無効化コールバックを実行します。
  17. これらのコールバックは、含まれているcontexts を無効にするだけです (これは Session.get の設計であり、無効化コールバックが行う必要があることではありません)。
  18. 囲んでcontextsいるものは、無効化コールバックを実行するようになりました。
  19. autorun の場合、そのコールバックは最初に autorun に渡した関数を実行し、context再度設定します。

実装全体も実際にはかなり単純です。ここで確認できます:
https://github.com/meteor/meteor/blob/master/packages/tracker/tracker.js

そして、それがどのように機能するかの良い例がここにあります:
https://github.com/meteor/meteor/blob/master/packages/reactive-dict/reactive-dict.js

リアクティブ プログラミングは、実際には meteor または JS 固有のものではありません
。 ここで読むことができます: http://en.wikipedia.org/wiki/Reactive_programming

于 2012-04-24T07:43:35.740 に答える