此文檔主講的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); 
  };
}