比Redux更容易上手的狀態管理庫

前言

當項目愈加複雜時，咱們發現僅僅是提高狀態已經沒法適應如此複雜的狀態管理了，程序狀態變得比較難同步，操做，處處是回調，發佈，訂閱，這意味着咱們須要更好的狀態管理方式，因而就引入了狀態管理庫，如Redux，Mobx，Jumpsuit，Alt.js等。

Mobx是什麼

對於我來講Mobx幾乎和Vue同樣，經過監聽數據的屬性變化，能夠經過直接在數據上更改就能觸發UI的渲染，從而作到MVVM、響應式、上手快，Api簡單等等。

• 安裝 npm install mobx --save
• 原則

mobx支持單向數據流也就是動做改變狀態，而狀態的改變會更新全部受影響的視圖。以下圖

一個簡單的react+mobx的計算實例

npm install mobx-react --save // 下載mobx
import { observable, action } c // 應用mobx
const counter = {
    state: observable({
        count: 0
    }),
        
    add: action(function() {
        this.state.count ++ 
    })
}
export default counter

// 這時候 counter的結構是這樣的
{
    state: { count: 0 }
    add: function
}

// 如今咱們將mobx和react聯繫起來；
import { observer } from 'mobx-react'
import counter from './counter'
const CouterView = () => {
return (
    <div>
      <span>{ counter.state.count }</span> //這裏的count時計數器裏的數據
          <button onClick={() => counter.add()} > + </button> // 點擊按鈕會把數字加1
        </div>
    )
}

export default observer(CouterView);
// 這樣就實現了一個簡單的mobx的數據管理庫

小結

在mobx中沒有reducer這一層，因此不須要爲了action和reducer之間的通訊而使代碼高度抽象。
mobx裏state的更新是很直觀的，經過賦值行爲便可，而不須要dispatch或者setState這樣的方法。

寫的不詳細，若有須要者，請前往官方文檔

來源：http://www.javashuo.com/article/p-mwmsvevb-dg.html