Mobx概要とmobxとReduxの違い

Mobx問題

データ管理は、従来の反応Reduxのを使用することです。解決すべきReduxの問題は、データが完全に制御可能とトレーサブル流れ、統一されたデータフローです。この目標を達成するために、我々は、関連する制約する必要があります

ディスパッチアクション減速の概念にこのリードをReduxのというように、状態の概念はしかし、あまりにも強いいくつかのプロジェクトのために、彼らは柔軟性を失い、強い制約です。Mobxは、この欠員を埋めるためにあります

ReduxのとMobxの簡単な比較：

オブジェクト指向とモックスの1.Redux関数型プログラミングパラダイム。

2.そのため、データは理想的なReduxのは、毎回新しいデータ復帰不変ですが、Mobx開始から終了まで引用されます。Reduxのはそのためであるデータバックトラッキングをサポートしています。

Reduxのは、対応する放送dispathであり、プロバイダによって制御偏差前後の粒径比を更新するために接続するために、時々; 3.しかし、Reduxのとmobxコンポーネントを使用して比較し、正確な、これはMobx観測のおかげになるように更新することができますSCUは、自分自身を記述する必要があります。モックスは、より洗練されました。

コア原理Mobxは派生オブジェクト（計算値＆反応）の状態をトリガする状態の処置の変化によってトリガされます。

状態

　　Moxbxでは、対応するサービスの元の状態への状態、法により観察、これらの状態が観察可能になることができます。

3つのタイプ、すなわちオブジェクト、配列、地図に観察されている一般的にサポートしています。

プリミティブ型の場合、あなたはObserable.boxを使用することができます。
特定のデータが観測パッケージ化されたときに、彼の復帰が観察梱包を可能にするタイプが実際にあることは注目に値します

CONST Mobx =（ "mobx"）を必要とします。
CONST {観察、オートラン} = Mobx。
CONSTオブジェクト配列=観察（[1、2、3]）。
console.log（ "OBが配列である："、Array.isArray（オブジェクト配列））。偽：// OBは、Arrayです
console.log（ "OB"、オブジェクト配列）; // OB：ObservableArray {}

この問題のために、溶液はobservable.toJS Mobxは、直接、決定またはネイティブAPIisObservableArray Mobxが決意によって提供JSに）元の（によって提供することができる、簡単です。

計算されました

　　Mobx設計原理状態でかつReduxの一つの共通点を持っている、それは状態を確保するために、可能な限り、ある小さな十分、十分な原子です。この設計原理は、メンテナンスやパフォーマンスか、自明です。次に、データの依存性は、状態データを計算に使用することができる由来しました。

要するに、あなたが値を持って、結果の値は、状態に依存しており、この値はまた、その後、使用して計算、obserableする必要があります。通常、計算プロパティとして使用し、その機能的特性のためにする必要があり、パフォーマンスを最大化するように最適化することができます。

計算された属性に依存する状態が変更されていないか、計算された値が他の計算値または応答（反応）によって使用されていない場合場合、計算は実行されません。この場合には、サスペンド状態で計算しない場合は、もはや属性観察算出された場合、。そして、それはMobxのガベージコレクションになります。

簡単には、シーンを使用して計算しました

あなたは、配列を観察し、あなたが使用していないので、コードを計算する場合、配列の長さの変化に反応するようにしたい場合

CONST Mobx =（ "mobx"）を必要とします。
CONST {観察、自動実行、計算} = Mobx。
VAR番号=観察（[1、2、3]）。
オートラン（（）=>にconsole.log（numbers.length））。
//出力 '3'
numbers.push（4）。
//出力 '4'
番号[0] = 0;
//出力 '4'

最後の行は、実際には、配列内の値を変更するだけでなく、自動実行の実行をトリガされます。このとき、計算された場合、問題を解決します。

CONST Mobx =（ "mobx"）を必要とします。
CONST {観察、自動実行、計算} = Mobx。
VAR番号=観察（[1、2、3]）。
VaRの和=計算（（）=> numbers.length）。
オートラン（（）=>はconsole.log（sum.get（）））。
//出力 '3'
numbers.push（4）。
//出力 '4'
番号[0] = 1;

オートラン

状態およびオートランAPIに別の同様の応答が計算され、値が依存変化するたびに、それが変更されます。

違いは、ある自動実行が計算され最適化されていない（もちろん、変化なし値に依存し、再び実行されませんが、自動的に回復されることはありません）。したがって、シナリオの使用は、通常、いくつかの副作用を実行するために使用される自動実行です。例の印刷ログのために、UIなどを更新します。

アクション

　　Reduxのでは、変更する唯一の方法は、アクションの状態を派遣することです。この結合の利点は、保守性をもたらすことです。長い間、彼らは勇敢な行動でなければならないほどのカルマ全体の状態は、アクションの減速は、変更の影響の原因を見つけるためにデータを使用することができます見つけるために、この子を引き起こしました。

強い結合が良いですが、Reduxの結合の目的を達成するために、問題の多くのライブラリがありますが、Mobxは基本的に、よりエレガントになりますが、定型コードの多くを書くようです。

　　まずMobxは、主に小規模なプロジェクトの一部に適用されるアクションですべての状態を変更しなければならない変更を強制ではありません。大きいため、より協力的なプロジェクトを必要とする、Mobx力に設けられたAPIの構成を使用することができます。

Mobx.configure（{enforceActions：真}）

原理は簡単です

機能の設定（オプション）{
    （options.enforceActions！==未定義）の場合{
        globalState.enforceActions = !! options.enforceActions
        globalState.allowStateChanges =！options.enforceActions
    }
}

全体的特性strictMode allowStateChanges様式を変更することにより、アクションを強制。

Mobx非同期処理

Reduxのとの違いは、非同期処理のMobxが複雑ではありません、それは追加の同様のReduxの-サンク、Reduxの-佐賀ようなライブラリーの導入を必要としない、です。
唯一の注意点は、観察、その後の値があればstrictモードでは、コールバックで非同期アクションは、コールバックも改正されなければならないということである
コールバックはまた、アクションをバインドする必要があります。

CONST Mobx =（ "mobx"）を必要とします。
Mobx.configure（{enforceActions：真}）。
CONST {観察、自動実行、計算、extendObservable、アクション} = Mobx。
クラスストア{
  @observable A = 123。

  @アクション
  {（）変更
    this.a = 0;
    setTimeout（this.changeB、1000）;
  }
  @ action.bound
  changeB（）{
    this.a = 1000;
  }
}
sは新しい店を（）=でした。
オートラン（（）=>にconsole.log（SA））。
s.changeA（）;

ここでaction.bound糖衣構文で、目的は、問題のJavaScriptのスコープを解決することです。

シンプルな言葉遣いは、直接行動パッケージです

CONST Mobx =（ "mobx"）を必要とします。
Mobx.configure（{enforceActions：真}）。
CONST {観察、自動実行、計算、extendObservable、アクション} = Mobx。
クラスストア{
  @observable A = 123。
  @アクション
  {（）変更
    this.a = 0;
    setTimeout（アクション（ 'changeB'、（）=> {
      this.a = 1000;
    }）、1000）。
  }
}
sは新しい店を（）=でした。
オートラン（（）=>にconsole.log（SA））。
s.changeA（）;

あなたはどこにでも書き込み動作にはしたくない場合は、機能Mobxが提供するツールを使用することができますrunInActionを業務を合理化します

 @アクション
  {（）変更
    this.a = 0;
    setTimeout（
      runInAction（（）=> {
        this.a = 1000;
      }）、
      1000年
    ）;
  }

このツールの機能により、観測可能な値上のすべての操作ではなく、アクションのさまざまな名前を付けるよりも、プルバックの上に配置することができます。　

最後に、ユーティリティ関数Mobxの提供、原則Reduxの-佐賀は、非同期動作を実現するために、発電機ES6を使用して、あなたは完全に干渉作用を取り除くことができます。

@asyncAction
  {（）変更
    this.a = 0;
    CONSTデータ= Promise.resolveを得た（1）
    this.aは、データを=。
  }

Mobx原理分析

オートラン

Mobxコアは、1つの観察変数で観察されるオートラン内変化、対応するコールバック関数が変化するときに、変数が生成されます。

CONST Mobx =（ "mobx"）を必要とします。
CONST {観察、オートラン} = Mobx。
CONST OB =観察（{：1、B：1}）;
オートラン（（）=> {
  console.log（ "ob.b："、ob.b）。
}）;

ob.b = 2。

コードの実行は、二回ob.b.の値を記録し、検索します実際には、これは、推測することができMobx変数は、更新機能のためのゲッターとセッタープロキシを介して達成されます。まず最初にプロキシgetter関数変数の、その後、再び、それによってプロキシセッターのためには、観測値の収集を可能にするためにゲッター機能をトリガー、介入によって、コールバックの実行を自動実行。長いトリガーのようにセッターコレクト良いコールバックOK後に実行されます。
次のように特定のソース：

機能の自動実行（ビュー、OPTS）{
    反応=新しい反応（名前、関数（）{
           （reactionRunner）this.track。
    }、opts.onError）。
   機能reactionRunner（）{
        ビュー（反応）。
    }
}

このセクションでは、自動実行の中核であり、このビューの自動実行は、コールバック関数です。特定の機能を追跡するには、コードへのキーである比較：

Reaction.prototype.track =関数（FN）{
    VaRの結果= trackDerivedFunction（この、FN、未定義）。
}

trackDerivedFunctionの自動実行機能は、直ちにobserableエージェントに機能をトリガするコールバック関数内で実行されます。

関数generateObservablePropConfig（たpropName）{
    リターン（observablePropertyConfigs [たpropName] ||
        （observablePropertyConfigs [たpropName] = {
            設定可能：真、
            列挙：真、
            取得：関数（）{
                これを返す$ mobx.read（この、たpropName）を。
            }、
            セット：関数（V）{
                このmobx.write（この、たpropName、v）で$。
            }
        }））。
}

我々は、バインドにその後、ここで設定した値obserable意志トリガーの変化、すぐにトリガ関数の後に、その束縛にコールバックを取得しますとき。　

いくつかのピットをMobx

：自動実行の原理を実装することによって見つけることができる、私たちの多くは、それが引き金必要がありますが、シーンをトリガしませんでした、のような想像があるだろう

新しいプロパティを収集することができません。

CONST Mobx =（ "mobx"）を必要とします。
CONST {観察、オートラン} = Mobx。
せOB =観察（{：1、B：1}）;
オートラン（（）=> {
  IF（ob.c）{
    console.log（ "ob.c："、ob.c）。
  }
}）;
ob.c = 1

　　達成するためにextendObservable（ターゲット、小道具）法により、この問題を解決するために、

CONST Mobx =（ "mobx"）を必要とします。
CONST {観察、自動実行、計算、extendObservable} = Mobx。
VAR番号=観察（{：1、B：2}）。
extendObservable（数字、{C：1}）;
オートラン（（）=>にconsole.log（numbers.c））。
numbers.c = 3。

// 1

// 3

extendObservable APIは、新たにオブジェクトのobservalプロパティを追加されます。
変数の削除にあなたのエントリが非常に心配している場合は、オブジェクトの代わりに地図データ構造を使用する必要があります。
2.外部環境に依存してコールバック関数は、それが収集できない場合

CONST Mobx =（ "mobx"）を必要とします。
CONST {観察、オートラン} = Mobx。
せOB =観察（{：1、B：1}）;
x = 0のみましょう。
オートラン（（）=> {
  もし（x == 1）{
    console.log（ "ob.c："、ob.b）。
  }
}）;
X = 1。
ob.b = 2。

まあ、そうでない収集、事前に実行時にコードのob.b行に到達できないオートランコールバック関数を理解します。

[予約]説明リンクリンク：https://blog.csdn.net/weixin_44369568/article/details/90713881

Mobx問題

ReduxのとMobxの簡単な比較：

状態

計算されました

オートラン

アクション

Mobx非同期処理

Mobx原理分析

オートラン

いくつかのピットをMobx

おすすめ