这里简单介绍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");//修改变量
}
}
- 总的来说，哪里需要，就哪里引入它。。。
