比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