React Native 之 mobx使用

此文档主讲的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); 
  };
}