mobx react状态管理 1

1、介绍 

            MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:

        任何源自应用状态的东西都应该自动地获得

        其中包括UI、数据序列化、服务器通讯，等等。

2、安装     

        npm install mobx@4.4.0 react-mobx

3、使用例子 

        对于普通类型数据的监听 观察 .box()   先观察 然后  监听  改变

var observableNumber = observable.box(10)   //对于普通类型数据的观察 .box()

autorun(()=>{           //默认执行一次  数据改变后也会执行   监听 
    console.log(observableNumber.get())
})

setTimeout(()=>{  //改变数据 
    observableNumber.set(20)
},2000)

         对于对象类型数据的监听 观察     方案 1     先观察 然后  监听  改变

var observableObj = observable.map({   //对于对象类型数据的监听 观察 .map() === var observableObj = observable({}) 也可直接   
    id:5,
    name:'辞耳',
    age:18
})  

autorun(()=>{           //默认执行一次  数据改变后也会执行
    console.log('对象的name改变了',observableObj.get('name'))
})

setTimeout(()=>{  //改变数据 
    observableObj.set('name','哈哈')
},2000)

         对于对象类型数据的监听 观察     方案 2    简单方式     先观察 然后  监听  改变

var observableObj = observable({   //对于对象类型数据的监听 观察 
    id:5,
    name:'辞耳',
    age:18
})  

autorun(()=>{           //默认执行一次  数据改变后也会执行
    console.log('对象的name改变了',observableObj.name)
})

setTimeout(()=>{  //改变数据 
    observableObj.name = '啊哈哈'
},2000)

         对于数组类型数据的监听 观察    先观察 然后  监听  改变

var observableList = observable([1,2,5])  //对于数组类型数据的监听 观察 

autorun(()=>{           //默认执行一次  数据改变后也会执行
    console.log(observableList)
})

setTimeout(()=>{  //改变数据 
    observableList[2] = 88
},2000)

适用场景：

        修改主题颜色   在mobx.js中 创建store 对象 赋值 导出，在A组价导入 修改stroe 数据，

B组件订阅，监听 store的改变   autorun（） 。

也可参考  Mobx基本使用 - 掘金 (juejin.cn)