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

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

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

もちろん、

mobxを使用しない限り…

キーポイント

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

「狀態(tài)」とは何ですか？

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

関數(shù)が表示される場合があります。

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

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

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

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

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

Mobxが救助に來ます

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

mobxドキュメントから：

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

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!'; // 此處觸發(fā)

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

mobx coreコンセプト

観察可能

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

person.age = 38; // 打印為空
person.lastName = 'RUBY!'; // 觸發(fā)
person.firstName = 'Matthew!'; // 也觸發(fā)

MOBX観測可能なオブジェクトは、単なるオブジェクトです。この例では、私は何も観察していません。この例は、既存のコードベースにMOBXを統(tǒng)合する方法を示しています。開始するには、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機(jī)能を見ましたか？パラメーターがないことに注意してください。 MOBXは、自動的に計算値を作成します。これは私のお気に入りのMOBX機(jī)能の1つです。 getについて奇妙なことがあることに注意してください。もう一度見てください。これは関數(shù)です、あなたはそれを呼ぶことなく結(jié)果を見ることができます！通常、person.fullNameの代わりにperson.fullName()を呼び出します。あなたはちょうどあなたの最初のJSゲッターに會いました。 person.fullName

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

ここでは、

計算を複數(shù)回ヒットしたことがわかりますが、機(jī)能が実行されるのは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文書を書き続けません。観察可能なオブジェクトを使用および作成するためのより多くの方法については、ドキュメントをご覧ください。

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

mobxを使用する

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

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

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

これは、mobx：

で構(gòu)築された同じ例です

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

少し些細(xì)なものを構(gòu)築しましょう：

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

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

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

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

autorun()あなたはこの點に來たので、ここではReactとMobxで構(gòu)築された同じ例です

スライドショーを構(gòu)築しましょう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jQueryスライドショーの例

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

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

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

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

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

mobx

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

FAQ

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

以上がMOBXを使用してJavaScriptアプリケーション狀態(tài)を管理する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。