一分钟搞定 react-native mobx

0.059字数 135阅读 1656

这里简单介绍mobx的用法

首先 要装几个第三方库

npm i mobx -save
npm i mobx-react -save
npm i babel-plugin-transform-decorators-legacy -save-dev

然后修改项目目录下的.babelrc

{
    "presets": ["react-native"],
    "plugins": ["transform-decorators-legacy"]
}

首先弄个类, Store.js

import { observable,computed,autorun,action,useStrict } from 'mobx';    
useStrict(true);//这里用到了严格模式,在修改类的成员属性的时候函数前面需要加上 @action    
  
class RoomStore {
    
    //定义几个可观察的成员变量
    @observable remoteList = {};
    
    @observable info = 'Initializing';
    
    //修改成员变量的值
    @action setRemoteList(remoteList) {
        this.remoteList = remoteList;
    }
     
    @action setInfo(info) {
        this.info = info;
    }
}

//导出类
export default new RoomStore();    

这里没介绍 computed和autorun

一个是用来计算的,一个是自动执行(每次变量的变化都能 fire 自动执行)

有兴趣的可以百度看一看,或者官方文档 http://cn.mobx.js.org/

最后在需要获取变量值的地方引入

...
import { observer } from 'mobx-react/native';
import {roomStore} from './Store';
...

@observer  //这里必须要写上,用来观察
class Test extends Component{
    render(){
        ....
        console.log(roomStore.info);
        if(roomStore.info == 'xxxx'){
          
        }else{
          
        }
        ....
        roomStore.setInfo("hello word");//修改变量
    }
}

  • 总的来说,哪里需要,就哪里引入它。。。

推荐阅读更多精彩内容