React Nativeのmobx使用

このドキュメントの主なmobxは、現在2つのReact Nativeがステータスデータ管理を行っているライブラリの1つであり、成熟した長兄reduxよりもmobxの方が新しいため、成熟度、拡張性などについてはreduxに及ばないが、mobxは実行時に常に最小のデータ依存を維持しているため、効率が非常に高く、リストのサポートが非常に良い.コードも少ないので、まだ足りませんか?
mobxでよく使われるラベル:@observable:このラベルを使用して検出するデータを監視します.@observer:このラベルを使用して、データの変更が更新されるComponent(コンポーネントクラス)@action:このラベルを使用してデータの変更を監視するカスタムメソッド(データの変更が必要な場合にこのメソッドを実行すると、Viewレイヤも自動的に変更され、デフォルトではこのViewレイヤは@observerラベルを監視します)を使用します.
注意:簡単なデータは、直接読み取りとコピー操作を行うことができ、Viewも変化します.
例1:実現機能:1変数count+1以上の場合-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 (
      
        {this.count}
         +
         -
      
    );
  }
}

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 (
       
        
            
            
         
        
          {
            this.dataManager.dataSource.slice(0).map(
              (item,i)=> 
            )              
           }
        
      
    ); 
  }
}

/*
*      Item     ,     
* */
@observer
class ItemView extends Component {

  countAdd = () => { 
    this.props.item.add();
  };
 
 countDec = () => { 
   this.props.item.dec();
 };

 render() {
   const {item} = this.props; 
   return (
      
       {item.name} 
       {item.count}
        +  
        -  
     
   ); 
 }
}

/*
*            
* */
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); 
  };
}