MOBXを使用してJavaScriptアプリケーション状態を管理する方法

この記事は、ミシェル・ウェストストレートとアーロン・ボイヤーによって査読されました。 SetePointのコンテンツを完璧にしてくれたSetePointのすべてのピアレビューアに感謝します！

jQueryを使用して非常に単純なものよりも複雑なアプリケーションを作成したことがある場合は、UIの異なる部分を同期させるという問題があった可能性があります。多くの場合、データの変更は複数の場所に反映される必要があり、アプリケーションが成長するにつれて、トラブルに陥る可能性があります。この混乱を制御するために、イベントを使用して、アプリケーションのさまざまな部分に変更がいつ発生したかを知らせることができます。

では、今日どのようにアプリケーションステータスを管理しましたか？私はあなたが変更を過剰に登録していると言うために自由を取ります。それは正しい。私もあなたを知りませんが、私はそれを指摘するつもりです。もしあなたが過度にサブスクライブしていないなら、あなたはあまりにも一生懸命働いたと確信しています。

もちろん、

mobxを使用しない限り…

キーポイント

• MOBXで国家管理を簡素化：観察可能なオブジェクトを介してアプリケーション状態を効率的に管理し、Reduxなどの他の州の管理ライブラリにある複雑さとボイラープレートコードを削減します。
• mobx自動更新： MOBXのautorun機能を実装して、MOBXの
関数を実装して、手動イベント処理なしの状態の変更に応じてUIコンポーネントを自動的に更新し、アプリケーション全体の同期プロセスを簡素化します。
• 計算値を使用してパフォーマンスを向上させる：
MOBXからの計算値を使用して状態からデータを導出し、必要な場合にのみコンポーネントが再レンダリングされるようにし、全体的なアプリケーションパフォーマンスを改善します。
• mobxは簡単に開始できます。
標準オブジェクトを観測可能なオブジェクトに変換して、既存のJavaScriptアプリケーションにMOBXをシームレスに統合し、完全な書き換えなしで徐々に採用できるようにします。
• MOBX操作によるトランザクション修正：
MOBX操作を適用して、トランザクションの状態変更をカプセル化し、それによりバッチ更新をバッチ更新し、冗長レンダリングを最小限に抑え、より効率的でエラーが発生するコードが少なくなります。

「状態」とは何ですか？

fullName()これはキャラクターです。ねえ、それは私です！私は最初の名前、最後の名前、年齢を持っています。また、問題がある場合は、

関数が表示される場合があります。

var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};

この人への変更のさまざまな出力（ビュー、サーバー、デバッグログ）にどのように通知しますか？これらの通知をいつトリガーしますか？ Mobxの前に、カスタムJQueryイベントまたはJS-Signalsをトリガーするセッターを使用します。これらのオプションは私によく役立ちますが、それらの私の使用は細心の注意とはほど遠いものです。人オブジェクトの一部が変更された場合、「変更された」イベントをトリガーします。

自分の名前を表示するビューコードがあるとします。年齢を変えると、その人の変更されたイベントに縛られているため、ビューは更新されます。

var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};

このオーバートリガーをどのように締めますか？単純。各フィールドにセッターを設定し、各変更に対して個別のイベントを設定するだけです。待ってください - 年齢と最初の名前を一度に変更したい場合は、オーバートリガーを開始できます。両方の変更が完了するまで、イベントの発砲を遅らせる方法を作成する必要があります。それは仕事のように聞こえます、そして私は怠け者です...

Mobxが救助に来ます

Mobxは、Michel Weststrateが開発したシンプルで、集中的で、効率的で目立つ州管理ライブラリです。

mobxドキュメントから：

州について何かをするだけで、Mobxはあなたのアプリケーションがこれらの変更を尊重することを確認します。

person.events = {};

person.setData = function (data) {
  $.extend(person, data);
  $(person.events).trigger('changed');
};

$(person.events).on('changed', function () {
  console.log('first name: ' + person.firstName);
});

person.setData({age: 38});

違いに気づきましたか？ mobx.observable私が行った唯一の変更です。もう一度console.logの例をチェックしてみましょう：

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
});

autorunを使用して、mobxはアクセスされたコンテンツのみを観察します。

これがきれいだと思うなら、次のことをチェックしてください：

mobx.autorun(function () {
  console.log('first name: ' + person.firstName);
});

person.age = 38; // 打印为空
person.lastName = 'RUBY!'; // 仍然为空
person.firstName = 'Matthew!'; // 此处触发

興味がありますか？私はあなたが興味を持っていることを知っています。

mobx coreコンセプト

観察可能

mobx.autorun(function () {
  console.log('Full name: ' + person.fullName);
});

person.age = 38; // 打印为空
person.lastName = 'RUBY!'; // 触发
person.firstName = 'Matthew!'; // 也触发

MOBX観測可能なオブジェクトは、単なるオブジェクトです。この例では、私は何も観察していません。この例は、既存のコードベースにMOBXを統合する方法を示しています。開始するには、mobx.observable()またはmobx.extendObservable()を使用してください。

autorun

var log = function(data) {
  $('#output').append('' +data+ '');
}

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 34
});

log(person.firstName);

person.firstName = 'Mike';
log(person.firstName);

person.firstName = 'Lissy';
log(person.firstName);

あなたの観測可能性が変わったら何をしたいですか？参照された観測可能な値が変更されたときにコールバックをトリガーするautorun()を紹介させてください。上記の例では、年齢が変わったときにautorun()が発砲しないことに注意してください。

計算

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 0
});

mobx.autorun(function () {
  log(person.firstName + ' ' + person.age);
});

// 这将打印Matt NN 10次
_.times(10, function () {
  person.age = _.random(40);
});

// 这将什么也不打印
_.times(10, function () {
  person.lastName = _.random(40);
});

そのfullName機能を見ましたか？パラメーターがないことに注意してください。 MOBXは、自動的に計算値を作成します。これは私のお気に入りのMOBX機能の1つです。 getについて奇妙なことがあることに注意してください。もう一度見てください。これは関数です、あなたはそれを呼ぶことなく結果を見ることができます！通常、person.fullNameの代わりにperson.fullName()を呼び出します。あなたはちょうどあなたの最初のJSゲッターに会いました。 person.fullName

ここでは楽しみが終わりません！ MOBXは、計算された値の依存関係を変更の依存関係を監視し、変更時にのみ実行されます。何も変わらない場合、キャッシュされた値が返されます。次の状況を参照してください：

ここでは、

計算を複数回ヒットしたことがわかりますが、機能が実行されるのはFirstNameまたはLastNameが変更されたときだけです。これは、MOBXがアプリケーションを大幅にスピードアップできる方法の1つです。

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 0,
  get fullName () {
    return this.firstName + ' ' + this.lastName;
  }
});
log(person.fullName);

person.firstName = 'Mike';
log(person.fullName);

person.firstName = 'Lissy';
log(person.fullName);

もっと！ person.fullName

私はもう素晴らしいmobx文書を書き続けません。観察可能なオブジェクトを使用および作成するためのより多くの方法については、ドキュメントをご覧ください。

（以下のコンテンツはいくつかのコードの例と詳細な説明を省略し、コアコンテンツと構造を保持します）

mobxを使用する

あまりにも退屈になる前に何かを作りましょう。

これは、変化するたびにその人のフルネームを表示する単純な非MOBXの例です。

名前を変更したことはありませんが、名前は10回レンダリングされたことに注意してください。多くのイベントを使用してこの問題を最適化するか、何らかの変更ペイロードを確認することができます。これはあまりにも多くの作業です。

これは、mobx：

で構築された同じ例です

イベント、トリガー、またはオンがないことに注意してください。 Mobxを使用すると、最新の価値とそれが変わったという事実を扱っています。一度だけレンダリングされたことに注意してください。これは、私が監視しているものを変更していないためです。 autorun

少し些細なものを構築しましょう：

ここでは、個人全体を編集し、データ出力を自動的に監視することができます。この例にはいくつかのソフトポイントがあり、最も注目すべきことは、入力値が人物と同期していないことです。この問題を解決しましょう：

私は知っています、あなたは別の不満を持っています：「あなたは過度にレンダリングされています！」これが、多くの人がReactを使用することを選択する理由です。 Reactを使用すると、個別にレンダリングできるウィジェットに出力を簡単に分割できます。

完全性については、ここに私が最適化したjQueryの例があります。

実際のアプリでこのようなことをしますか？おそらくそうではありません。この粒度が必要な場合は、いつでもReactを使用します。実際のアプリケーションでMobxとjQueryを使用するとき、私はそれを変更するたびにDOM全体を再構築しないほど十分に微妙に微妙に使用されます。

autorun()あなたはこの点に来たので、ここではReactとMobxで構築された同じ例です

スライドショーを構築しましょう

スライドショーのステータスをどのように表現しますか？単一のスライド工場から始めましょう：

すべてのスライドを集約するための何かが必要です。今すぐ構築しましょう：

スライドショーが始まりました！これは、コレクションからスライドを追加および削除し、それに応じてUIを更新できるスライドの観測可能な配列があるため、より興味深いものです。次に、計算された値を追加します。これは、必要に応じて最新の状態に保ちます。

スライドショーをレンダリングしましょう。 HTML出力の準備ができていないため、コンソールにのみ印刷します。 activeSlide

かっこいいです、いくつかのスライドがあります

現在のステータスを印刷しました。 1つまたは2つのスライドを変更しましょう：

私たちのautorunが機能しているように見えます。監視が何かを変更すると、発射されます。コンソールからHTMLへの出力派生を変更しましょう：

このスライドショーの基本的なディスプレイがありましたが、相互作用はまだありません。サムネイルをクリックしてメイン画像を変更することはできません。ただし、画像テキストを簡単に変更して、コンソールを使用してスライドショーを追加できます。 autorun選択したスライドショーをセットアップするための最初で唯一のアクションを作成しましょう。次の追加を追加してautorunを変更する必要があります

尋ねることができます、なぜ操作を使用する必要があるのですか？良い質問！ MOBX操作は、観察可能な値の変化の他の例に示されているように、必要ありません。

操作はいくつかの面で役立ちます。まず、すべてのMOBX操作はトランザクションで実行されます。これは、私たちのautorunおよび他のMOBX反応が、トリガーする前に操作が完了するのを待つことを意味します。それについて考えてください。トランザクションの外側のアクティブなスライドを無効にして、次のスライドをアクティブにしようとするとどうなりますか？私たちのautorunは2回トリガーされます。表示可能なアクティブなスライドがないため、最初の実行は厄介です。

トランザクションの性質に加えて、MOBX運用はデバッグを容易にする傾向があります。 mobx.actionに渡した最初のオプションパラメーターは、文字列「アクティブスライドを設定」です。この文字列は、mobxのデバッグAPIを使用して出力できます。

では、操作があります。JQueryを使用して次のように接続しましょう。

それだけです。これで、サムネイルをクリックすると、アクティビティが予想どおりに伝播されます。これがスライドショーの実用的な例です。

これは、Reactを使用した同じスライドショーの例です。

メモ、モデルをまったく変更しませんでしたか？ MOBXに関しては、ReactはjQueryやコンソールなどのデータのもう1つの派生語です。

jQueryスライドショーの例

の警告 jQueryの例を何らかの形で最適化しなかったことに注意してください。スライドショーDOM全体を変更するたびに破壊します。壊すことで、スライドショーのすべてのHTMLをクリックするたびに置き換えることを意味します。強力なjQueryベースのスライドショーを構築している場合は、アクティブなクラスを設定および削除し、

の属性を変更することにより、最初のレンダリング後にDOMを調整できます。

mainImageもっと知りたいですか？ src

mobxの詳細については、以下の便利なリソースをご覧ください。

ご質問がある場合は、以下のコメントでお知らせいただくか、Mobx Gitterチャンネルで見つけてください。

mobx

でJavaScriptアプリケーションステータスの管理に関する

FAQ

（記事が長すぎてコアコンテンツとはほとんど関係がないため、FAQパーツは次のコンテンツから省略されています。）

以上がMOBXを使用してJavaScriptアプリケーション状態を管理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。