一、定義

mobx通過透明的函數(shù)響應式編程，使得狀態(tài)管理變得簡單和可擴展：

任何源于應用狀態(tài)的東西都應該自動地獲得。（其中包括UI、數(shù)據(jù)序列化、服務器通訊等等）

React和Mobx是一對強力組合。
React和Mobx都提供了最優(yōu)和獨特的解決方案。React提供了優(yōu)化UI渲染的機制，這種機制就是通過使用虛擬DOM來減少昂貴的DOM變化的數(shù)量。Mobx提供了優(yōu)化應用狀態(tài)與React組件同步的機制，這種機制就是使用響應式虛擬依賴狀態(tài)圖表，它只有在真正需要的時候才更新并且永遠保持最新。

二、observable 可觀察的狀態(tài)

mobx為現(xiàn)有的數(shù)據(jù)結(jié)構(gòu)添加可觀察的功能時，通過使用@observable裝飾器來給你的類屬性添加注釋就可以簡單地完成。

import { observable } frorm 'mobx';
 
class Todo {
  id = Math.random();
  @observable title = "";
  @observable finitshed = false;
 }

使用observable很像把對象的屬性變成excel的單元格，但和單元格不同的是，這些值不只是原始值，還可以是引用值，比如對象和數(shù)組。

如果你的環(huán)境不支持裝飾器語法，也不必擔心，mobx可以通過decorate工具在不支持裝飾器語法的情況下使用。（但是多數(shù)mobx用戶更喜歡裝飾器語法，因為更簡潔）

例如上面那段代碼，ES5的版本應該是：

import { decorate, observable } from "mobx";

class Todo {
  id = Math.random();
  title = "";
  finished = false;
}

decorate(Todo, {
  title: observable,
  finished: observable
 })

三、computed 計算值

使用mobx，你可以定義在相關(guān)數(shù)據(jù)發(fā)生變化時自動更新的值。通過@computed裝飾器或者利用（extend）Observable時調(diào)用的getter / setter函數(shù)來進行使用。

class Todo {
  @observable todos = [];
  @computed get unfinishedTodoCount() {
  return this.todos.filter(todo => !todo.finished).length;
}
}

mobx會對在執(zhí)行跟蹤函數(shù)期間讀取的任何現(xiàn)有的可觀察屬性做出反應。

四、優(yōu)點

• 簡單且可擴展
  Mobx是狀態(tài)管理庫中侵入性最小的之一。這使得mobx的方法不但簡單，而且可擴展性也非常好。
• 使用類和真正的引用
  使用mobx不需要使用數(shù)據(jù)標準化。這使得十分適合那些異常復雜的領(lǐng)域模型。
• 保證參照完整性
  因為數(shù)據(jù)不需要標準化，所以mobx會自動跟蹤狀態(tài)和衍生之間的關(guān)系。
• 更簡單的actions更便于維護
  使用mobx修改狀態(tài)是非常簡單的，你只需要簡單的寫出你的目的，mobx會替你處理好剩下的事情。
• 細粒度的可觀測性是高效的
  mobx構(gòu)建應用中所有衍生的圖形，以找到保持最新狀態(tài)所需的重新計算的最少次數(shù)?！把苌磺小被蛟S聽上去開銷很昂貴，但mobx構(gòu)建虛擬衍生圖保持衍生于狀態(tài)同步所需的沖計算的數(shù)量最小化。

簡單來說，是因為mobx會在數(shù)據(jù)上建立更細粒度的"監(jiān)聽器"，而不是通過程序來控制。
其次，mobx看到衍生之間的因果關(guān)系。因此它可以為衍生排序，使得衍生不會運行多次或引入缺陷。