MboX環(huán)境配置：

1.npm i mobx mobx-react --save //引入mobx
2.npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev //能夠使用@標(biāo)簽
3.在.babelrc文件中修改為{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}

mobx常用的標(biāo)簽

@observable: 使用此標(biāo)簽監(jiān)控要檢測(cè)的數(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)控)

注：簡(jiǎn)單的數(shù)據(jù)，可以直接進(jìn)行讀取和復(fù)制操作贝润，View也會(huì)變化；

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},
];

/*
* 對(duì)整個(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>
        );
    }
}



/*
* 對(duì)每一個(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 {

    /*
    * 商品名稱（此值是不變的所以不需要檢測(cè)此值）
    * */
    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);
    };
}