Mobx与redux 的区别
1,Mobx写法更偏向于OOP
2,对一份数据直接进行修改操作,不需要始终返回一个新的数据
3,并非单一store,可以多store
4,Redux默认以JavaScript原生对象形式存储数据,而Mobx使用可观察对象

用法:
store.js

import {observable} from 'mobx'
1,box方法 ,只能观察简单数据类型
const store = observable.box(true)
2,map方法 ,观察复杂数据类型
const store = observable.map({
    isShow:true,
    list:[],
    roleList:[],
    rightList:[]
})
export default store

使用,在preview.js中

发布
componentDidMount(){
    //设置store中的布尔值
    store.set("isShow",false)
}
componentWillUnmount(){
    store.set('isShow',true)
}

订阅
在DashBoard.js中
import {autorun} from 'mobx'
componentDidMount(){
    this.cancel = autorun(() => {
        this.setState({
            isShow:store.get("isShow")
        })
    })
}
取消订阅
componentWillUnmount(){
    this.cancel() 
}
遇到的问题:
当切换list页面的时候,在网速很慢的情况下,会报错,请求数据是异步操作,
当list被销毁之后,数据才请求回来,然后再一次对状态进行修改
解决的方法:
componentWillUnmount(){
    this.setState = () =>{
        console.log("setState  被hack了")
        //由于javascript解释器在不bai同浏览器支持功能du(zhi尤其是DOM)不同dao,
        //为了能zhuan够使javascript代码能够在不同浏览器下正常shu运行,
        //就需要针对不同浏览器写兼容代码,还所谓的hack就是做这些兼容意思
    }
}
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐