此文檔主講的mobx是目前兩大React Native進(jìn)行狀態(tài)數(shù)據(jù)管理的庫之一 ,相比成熟的老大哥redux,mobx較新御铃，所以論成熟度饺窿、擴(kuò)展性等不如redux，但是mobx基于運(yùn)行時(shí)始終保持最小的數(shù)據(jù)依賴移斩，所以效率非常高肚医，而且對列表的支持非常好 ;使起來代碼也很少，所以這還不夠么?
mobx 常用的標(biāo)簽：
@observable: 使用此標(biāo)簽監(jiān)控要檢測的數(shù)據(jù);
@observer: 使用此標(biāo)簽監(jiān)控當(dāng)數(shù)據(jù)變化是要更新的 Component(組件類)
@action:使用此標(biāo)簽監(jiān)控?cái)?shù)據(jù)改變的自定義方法(當(dāng)在需要數(shù)據(jù)改變的時(shí)候執(zhí)行此方法向瓷，那么View層也會(huì)跟著自動(dòng)變化肠套，默認(rèn)此 View 層已經(jīng)使 @observer標(biāo)簽監(jiān)控)
注:簡單的數(shù)據(jù)，可以直接進(jìn)行讀取和復(fù)制操作猖任，View也會(huì)變化;
例子1:實(shí)現(xiàn)功能:讓一個(gè)變量 count +1 或者大于 0 的情況下-1
import React, {Component} from 'react';
import {
View,
StyleSheet,
Text,
} from 'react-native';
/*
* 引入這個(gè)兩個(gè)頭文件
* */
import {observable, action} from 'mobx';
import {observer} from 'mobx-react/native';
/*
* 添加@observer 字段監(jiān)控 MobxTextOne 組件你稚，當(dāng)數(shù)據(jù)改變的時(shí)候更新界面
* */
@observer
export default class MobxTextOne extends Component {
/*
* 使用@observable 監(jiān)控?cái)?shù)據(jù)源
* */
@observable
count = 0;
/*
* 讓count加1
* */
add = () => {
this.count += 1;
};
/*
* 當(dāng)count大于0的時(shí)候，讓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';
/*
* 引入這個(gè)兩個(gè)頭文件
* */
import {observable, action} from 'mobx';
import {observer} from 'mobx-react/native';
/*
* 假數(shù)據(jù)
* */
const datas = [
{name:'蘋果',count:0},
{name:'梨',count:0},
{name:'香蕉',count:0},
{name:'草莓',count:0},
{name:'橘子',count:0},
];
/*
* 對整個(gè)列表添加觀察，觀察列表個(gè)數(shù)的變化
* */
@observer
export default class MobxTestSecond extends Component {
/*
* 數(shù)據(jù)管理器
* */
dataManager = new DataSource();
componentWillMount() {
/*
* 賦值初始數(shù)據(jù)
* */
this.dataManager.replace(datas);
}
/*
* 添加一個(gè)新的 Item
* */
addItem = () => {
let item = {name:'西瓜',count:0}; this.dataManager.addItem(item)
};
/*
* 刪除第一個(gè) 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>
);
}
}
/*
* 對每一個(gè) Item 添加觀察,改變個(gè)數(shù)
* */
@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>
);
}
}
/*
* 整個(gè)列表頁數(shù)據(jù)管理器
* */
class DataSource {
// 本地?cái)?shù)據(jù)源
@observable
dataSource = [];
// 添加初始數(shù)據(jù)
@action
replace = (items) => {
// 1. 清空原數(shù)據(jù)
this.dataSource.splice(0, this.dataSource.length);
// 2. 加載新數(shù)據(jù)
items.map((item, i) => {
this.dataSource.push(new Item(item));
});
};
// 添加新數(shù)據(jù)
@action
addItem = (item) => {
this.dataSource.unshift(new Item(item));
};
// 刪除一條數(shù)據(jù)
@action
deleteItem = (idx) => {
this.dataSource.splice(idx, 1);
};
}
/*
* 單條 Item 數(shù)據(jù)管理器
* */
class Item {
/*
* 商品名稱(此值是不變的所以不需要檢測此值)
* */
name;
/*
* 監(jiān)控商品個(gè)數(shù)
* */
@observable
count;
constructor(item) {
this.name = item.name;
this.count = item.count;
};
/*
* 商品個(gè)數(shù)+1
* */
@action
add = () => {
this.count += 1;
}
/*
* 商品個(gè)數(shù)-1
* */
@action
dec= () => {
this.count > 0 && (this.count -= 1);
};
}
