1.レビュー
高次成分、diffのアルゴリズム、仮想DOM、非制御部品
図2は、状態マネージャmobxの反応
VUEファミリーバケット：VUE-CLI + VUE + VUE -router + axios /フェッチ+ vuex + vant /ミント-UI /要素-UI /のiView + SCSS /以下/ CSS /スタイラス+ .. ...
桶全家反応：作成反応するアプリ+反応+反応-DOM +反応ルータ-DOM + axios /フェッチ+（Reduxの+ Reduxの-サンク+反応-Reduxの）+ antd / antdモバイル+プロパタイプ+ .. ....
桶全家反応：作成反応するアプリ+は+反応する反応-DOM +反応ルータ-DOM + axios /フェッチ+（mobx + mobx反応する）+ antd / antdモバイル+小道具-タイプ+ ......
2.1デコレータ（デコ）ES7構文
装飾のために、機能です|クラスのメンバ
シンタックスシュガー（Object.defineProperty）であります
Object.defineProperty（パラメータ）：対象不動産に編集または追加
パラメータ：対象の説明のためのプロパティ記述子の目標ゴール小道具
どのように（使用方法）：
デコレータ名@
デコレータのクラス名@プロパティの例|静的プロパティ
デコレータのクラス名@方法の例|静的メソッド
使用シナリオ（使用する場合）
mobx / angluar + Tsの
2.2コンフィギュレーション・
インストール：NPM I @バベル/ plugin-提案型のデコレータ--save
配置：package.json
バベル：{
"プリセット"：...
- "プラグイン"：[
[ "@バベル/プラグイン提案-デコレータ"、{ "レガシー"：真}]]
....
}
構成：vscode->設定- >検索セット入力：experimentalDecorators->フックを設定せずwebstrom
3人のmobxメンバー：観測可能なアクション
、MobXのアイデアは、観察可能な属性や参照に変更を加える時に、オブザーバーモードを追跡することによって、データの処理を行うことで、その依存性モニタ機能をトリガ：それをやって
全体のコンテキスト転送に設けられた射出機構を使用して反応保存
使用方法：クラスの定義を
メンバーは、観測用デコレーションストアのカテゴリを@observable
@Actionの例示的な方法、変性状態、同期非同期修正は、内部コンポーネントを変更することは推奨されません
反応：どこ付き
4メンバーをmobx反応する：注入、観察者、プロバイダ
プロバイダ：、サービスを提供するために最上層を格納プロバイダストア= {店}
注入：注入アセンブリのストアプロバイダの小道具、使用される内部部品に設けられました
高次成分リターンの高次成分を注入すると、パッケージング成分の役割において、構成要素であります
シーン：エクスポートデフォルト注入（「ストア」）（機能性成分を反応させます）
@Injectがデコレータである、装飾が、自身とクラスメンバーであるクラス
@Inject（「ストア」）クラスのクラスコンポーネント
オブザーバー：オブザーバーに設定した電流成分、店舗における変化の発生時に監視され、強制的にリフレッシュ@Observerクラスのクラスコンポーネントのビューに検出されます。..
CONST成分=オブザーバ（（店舗）=> {JSX}）
3 / mobx考え方
3.1インストールモジュール
cnpm I mobx mobx反応する-S
cnpm I @バベル/プラグイン・提案型のデコレータ--save
3.2修改package.json文件
"バベル"：{
"プリセット" [
"アプリを反応"
]
// ++++++++++++++++++++
"プラグイン"：[
[
"@バベル/プラグイン提案-デコレータ"、
{
"レガシー"：真
}
]
]
}
3.3 SRC /ストア/ index.js
クラスストア{
}
エクスポート新しい新しいデフォルトのストア（）
3.4は、入口ページストアで導入された
{プロバイダ「mobx-REACT」からのインポート}
ストア「./store」からのインポート
reactDOM.render（
<プロバイダストア= {店}>
、
のdocument.getElementById（「ルート」）
）
ストアの3.5 /代表ホーム状態が必要home.js
クラスHomestore {
コンストラクタ（ストア）{
this.store =ストア
}
}
エクスポートデフォルトHomestore
同時に書き込まれた状態の分類
クラスKindStore {
コンストラクタ（店舗）{
this.store =ストア
}
}
エクスポートデフォルトKindStore
3.6ストア/ index.js引入分模块
'./home'からインポートHomeStore
'./kind'からインポートKindStore
ストア{クラス
this.home Homestore新しい新=（この）
this.kind =新新KindStore（この）
}
輸出新しい新しいデフォルトストア（）
初期状態および機能ストア/ home.js設定3.7
//観察可能な状態
//アクション機能の
インポート{観測可能'mobx'から、アクション}
クラスHomestore {
コンストラクタ（ストア）{
this.store =ストア
this.getBannerlist = this.getBannerlist.bind（本）
}
//初期状態
@observable bannerlist：[1,2,3]
@observable prolist：[]
// 函数
@action
getBannerlist() {
this.bannerlist = [4, 5, 6]
}}
エクスポートデフォルトHomestore
SRC / index.js状態3.8を使用する内部コンポーネント
「mobx-REACT」からインポート{オブザーバー、注入します}。
// +依存性注入オブザーバ
@Inject（「店」）
@Observer経由
クラスコム拡張React.Component {
//取得状況this.props.store.home.bannerlist
this.props.store.home.getBannerlist //機能
レンダリング（ ）{
LET {ストア：ホーム{：{bannerlist、getBannerlist this.props} =}}
}
}