一分钟搞定 react-native mobx

这里简单介绍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");//修改变量
    }
}

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