此文档主讲的mobx是目前两大React Native进行状态数据管理的库之一 ,相比成熟的老大哥redux,mobx较新，所以论成熟度、扩展性等不如redux，但是mobx基于运行时始终保持最小的数据依赖，所以效率非常高，而且对列表的支持非常好 ;使起来代码也很少，所以这还不够么?
mobx 常用的标签：
@observable: 使用此标签监控要检测的数据;
@observer: 使用此标签监控当数据变化是要更新的 Component(组件类)
@action:使用此标签监控数据改变的自定义方法(当在需要数据改变的时候执行此方法，那么View层也会跟着自动变化，默认此 View 层已经使 @observer标签监控)
注:简单的数据，可以直接进行读取和复制操作，View也会变化;
例子1:实现功能:让一个变量 count +1 或者大于 0 的情况下-1
import React, {Component} from 'react';
import {
View,
StyleSheet,
Text,
} from 'react-native';
/*
* 引入这个两个头文件
* */
import {observable, action} from 'mobx';
import {observer} from 'mobx-react/native';
/*
* 添加@observer 字段监控 MobxTextOne 组件，当数据改变的时候更新界面
* */
@observer
export default class MobxTextOne extends Component {
/*
* 使用@observable 监控数据源
* */
@observable
count = 0;
/*
* 让count加1
* */
add = () => {
this.count += 1;
};
/*
* 当count大于0的时候，让count减1
* */
dec = () => {
this.count > 0 && (this.count -= 1);
};
render(){
return (
<View style={styles.container}>
<Text>{this.count}</Text>
<Text style={styles.btn} onPress={this.add}> +</Text>
<Text style={styles.btn} onPress={this.dec}> -</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
},
btn: {
borderWidth: StyleSheet.hairlineWidth,
borderColor: 'blue',
color: 'blue',
alignItems: 'center',
justifyContent: 'center',
margin: 20,
textAlign:'center',
padding:20,
}
});
例子2:购物车
import React, {Component} from 'react';
import {
View,
StyleSheet,
ScrollView,
Text,
} from 'react-native';
/*
* 引入这个两个头文件
* */
import {observable, action} from 'mobx';
import {observer} from 'mobx-react/native';
/*
* 假数据
* */
const datas = [
{name:'苹果',count:0},
{name:'梨',count:0},
{name:'香蕉',count:0},
{name:'草莓',count:0},
{name:'橘子',count:0},
];
/*
* 对整个列表添加观察，观察列表个数的变化
* */
@observer
export default class MobxTestSecond extends Component {
/*
* 数据管理器
* */
dataManager = new DataSource();
componentWillMount() {
/*
* 赋值初始数据
* */
this.dataManager.replace(datas);
}
/*
* 添加一个新的 Item
* */
addItem = () => {
let item = {name:'西瓜',count:0}; this.dataManager.addItem(item)
};
/*
* 删除第一个 Item
* */
deleteItem = () => {
this.dataManager.deleteItem(0);
};
render() {
return (
<View style={styles.container}>
<View style={styles.addItemView}>
<Text style={styles.addItem} onPress={this.addItem}>增加</Text>
<Text style={styles.addItem} onPress={this.deleteItem}>删除</Text>
</View>
<ScrollView>
{
this.dataManager.dataSource.slice(0).map(
(item,i)=> <ItemView key = {i} item = {item}/>
)
}
</ScrollView>
</View>
);
}
}
/*
* 对每一个 Item 添加观察,改变个数
* */
@observer
class ItemView extends Component {
countAdd = () => {
this.props.item.add();
};
countDec = () => {
this.props.item.dec();
};
render() {
const {item} = this.props;
return (
<View style={styles.itemContainer}>
<Text>{item.name}</Text>
<Text>{item.count}</Text>
<Text style={styles.btn} onPress={this.countAdd}> + </Text>
<Text style={styles.btn} onPress={this.countDec}> - </Text>
</View>
);
}
}
/*
* 整个列表页数据管理器
* */
class DataSource {
// 本地数据源
@observable
dataSource = [];
// 添加初始数据
@action
replace = (items) => {
// 1. 清空原数据
this.dataSource.splice(0, this.dataSource.length);
// 2. 加载新数据
items.map((item, i) => {
this.dataSource.push(new Item(item));
});
};
// 添加新数据
@action
addItem = (item) => {
this.dataSource.unshift(new Item(item));
};
// 删除一条数据
@action
deleteItem = (idx) => {
this.dataSource.splice(idx, 1);
};
}
/*
* 单条 Item 数据管理器
* */
class Item {
/*
* 商品名称(此值是不变的所以不需要检测此值)
* */
name;
/*
* 监控商品个数
* */
@observable
count;
constructor(item) {
this.name = item.name;
this.count = item.count;
};
/*
* 商品个数+1
* */
@action
add = () => {
this.count += 1;
}
/*
* 商品个数-1
* */
@action
dec= () => {
this.count > 0 && (this.count -= 1);
};
}
