AntDesign（リアクト）-11 mobxを使用することを学ぶためのシンプルな

Mendix、Coinbase、Facebookや多くのオープンソースの個人スポンサーによるMobXが後援しました。

mobx Reduxのなど、状態管理のためにも使用することができ、より簡単でより柔軟。初期の研究では、最初は文字列値を変更する簡単な関数を達成するために

公式サイト：httpsを：//cn.mobx.js.org

1、インストール

糸追加--save mobxは反応する
糸アドオンmobx --save

 

...

 2、追加のインポート

インポート{観察} mobx反応する」から、
インポート{観察、計算、アクション}「mobx」。

図3に示すように、次のコードが変更されるのUserRole

「が反応」からの輸入が反応します。
インポート{観察}から「mobx反応します」。
インポート{飾り、観察、計算、アクション}「mobx」。
インポート{ボタン、入力}「antd」。
@Observerの
クラスのUserRoleはReact.Component {延び
  コンストラクタ（小道具）{ 
    スーパー（小道具）。
  } 
  @observableのroleName = "123" 。
  handleTestClick = E => {
     この .roleName = "234" 。
    console.log（この.roleName）。
  }。
  レンダリング（）{ 
    リターン（
      の<div>角色管理
       の<div> { この .roleName} </ div> 
      <ボタン型= "プライマリ"スタイル= {{marginTop：10、幅：300}}のonClick = { この .handleTestClick}>测试</ボタン> 
      </ DIV >     ）; 
  } 
} 
輸出デフォルトのUserRole。

テストをクリック4.、あなたは自動的にレンダリング、割り当ての新しい状態から見ることができません