React-Native Mobx

记录一下在学习React-Native所需要的技能.
在用mobx之前一定要对mobx 有一些初步了解,慢慢去敲代码,才能发现这个东西的妙处!

什么是mobx?
mobx:一种状态监听.在我理解,例如,它是监听对象里的某一个属性.如果被监听的对象属性发生了改变,会触发对应的render(重新渲染).这种监听机制类似于iOS的KVC.

为什么用mobx不用state?
mobx 会render对应的子页面,而且状态管理一目了然,对于状态多的界面mobx性能更优,状态管理更方便.而state 会渲染整个父页面,如果状态多了.

运用 mobx :

1.首先导入mobx 库

"dependencies": {
    "mobx": "^3.1.9",
    "mobx-react": "^4.1.8",
  },
  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4"
  }

babel-plugin-transform-decorators-legacyES7的装饰器模式插件,也就是@observable 这种,同时需要在package.json同级目录下创建一个.babelrc文件,文件里的内容如下

  "presets": ["react-native"],
  "plugins": [
    "syntax-decorators",
    "transform-decorators-legacy"
  ]
}

在package.json里对应写入,然后npm install

mobx 几种关键字:
网上搜索了很多,发现不好理解,下面是我自己的理解
observable:监听的对应属性
computed:根据监听属性,计算出来的新值
action:对监听属性的对应操作
runInAction:在action里,在一个loop event里返回处理属性(意思等等被监听属性修改完,一起返回);
computed 和 runInAction 可以没有,剩下两个在没有你也没法监听了

举例:运用在列表请求里,对应标注↓

<1>请求一个列表

//导入
import {observable, computed, action, runInAction} from 'mobx';

export default class HJNetListUtil{
    @observable listData = [];//监听的数组
    @observable errorMsg = ''//监听的错误信息
    @observable page = 1 //监听的上下拉页数
    @observable loading = false //监听是否正在请求
    @observable isMore = true //是否是最后一页
    @observable refreshing = false; //是否正在刷新
  
        //构造函数,比如new HJNetListUtil(),对应传的参数
    constructor(url,params,listKey) {
        url = gBaseUrl.baseUrl + url;//拼接URL baseUrl是域名, url是链接
        this.listKey = listKey;//对应的解析字段(比如list:[],data:[]看你们服务器返回的是什么)
        this.url = url;
        this.params = params;
        this.params['page'] = this.page;
        this.POST();
    }

    @action //对应的POST 请求 用了action
    POST(params){
        if (!this.loading) {
            this.loading = true;
            if (params) {
                this.params = params;
                this.params['page'] = this.page;
            }
            if (this.page ==1 ) {this.refreshing = true}
            NetUtil.POST(
            this.url,
            this.params,
            (data)=>this.successCallback(data),
            (error)=>this.failCallback(error)
            );
        }
    }
    

    successCallback(data){

        this.errorMsg = '';
        this.refreshing = false;
        var list = [];
        if (this.listKey) {
            list = data.data[listKey];
        }else{
            list = data.data.list;
        }
        
    //这个地方可以用@computed 计算list.length的长度

        if (!list.length) {
            this.isMore = false;
            this.loading = false;
            return;
        }
        if (this.page == 1) {
            this.listData.replace(list);//第一页刷新
        }else{
            this.listData.push(...list);//拼接数组
        }
        this.loading = false;
    }

    failCallback(error){
        this.loading = false;
        this.errorMsg = error;
    }
}

对应的控件↓,我将没用的删除掉

'use strict';
import {observer} from 'mobx-react/native';

@observer
export default class HomeCategoryList extends React.Component {

  static defaultProps = {
      listStore:Object,
    };

  render() {
    const {listData,loading,refreshing} = this.props.listStore;
    return (
      <View style={styles.containStyle}>
        <FlatList
            numColumns={2}
            data={listData.slice()}
            renderItem={this._renderItem}
            ItemSeparatorComponent={this._renderSeparator}
            ListFooterComponent={this._renderFooter}
            onEndReached={()=>this._onEndReach()}
            onEndReachedThreshold={0.1}
            onRefresh={()=>this._onRefresh()}
            refreshing={refreshing}
            keyExtractor={(item, index) => index}
          />
      <Loading isShow={this.props.listStore.isMore && loading} />
      </View>
    );
  }

1.import {observer} from 'mobx-react/native';导入
2.@observer监听的类
3.const {listData,loading,refreshing} = this.props.listStore;从对象中取出对应被监听的属性,这时只要属性一变,就会重新渲染该控件,this.props.listStore是父控件传过来的,如果是本类应该写

var params = {
        keyWord:'',
    }
this.listStore = new HJNetListUtil('url',params);

不过new HJNetListUtil一定要在render 之前创建,一般写在constructor ()函数里.
4.listData.slice() 数组拷贝,如果不写拷贝,那么数组即使变化也不会触发控件render.(应该是地址没变就不会触发render)

<2>.滑动条,选项卡,最好用第二种方法

8F76D445-7985-4784-A086-92382F215D5B.png

对应的界面应该这样写

'use strict';

import {observable, computed, action, runInAction,autorun} from 'mobx';

import React,{Component} from 'react';
import {observer} from 'mobx-react/native';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Alert,
  Image,
  TouchableOpacity,
  ListView
} from 'react-native';


//待办事项行数据
class TodoListItem {

    index;

    @observable
    title;

    @observable
    seleted = false;

    @action
    toggleFinish() {
        if (!this.seleted) {this.seleted = true}
    }    
}

//待办事项列表数据
class TodoListHolder {
    @observable
    dataList = [];
    @computed
    get taskLeft() {
        return this.dataList.filter((it) => it.seleted == true);
    }
    @action
    clear(){}
}



@observer
export default class HomeSlider extends React.Component {

  todoList = new TodoListHolder();



  static defaultProps = {
      list :[
          'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ]
  };

  ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

  pre = 0;

  // 初始化模拟数据
  constructor(props) {
    super(props);
    for (let i = 0; i < this.props.list.length; i++) {
            let listItem = new TodoListItem();
            if (i == 0) {listItem.seleted = true}
            listItem.title = this.props.list[i];
            listItem.index = i;
            this.todoList.dataList.push(listItem)
        }

    autorun(() => {
    var arr = this.todoList.dataList.filter((it) => it.seleted == true);
    var c = 0;
    if (arr.length>1) 
    {
        // console.log('保持的',this.pre);

      for (var i = 0; i < arr.length; i++) {
        var item = arr[i];

        if (item.index === this.pre) {
          // console.log('上一个',this.pre);
          this.todoList.dataList[this.pre].seleted = false;
        }else{
          c = item.index;
          // console.log('现在的',this.pre);
        }

      }
      this.pre = c;
       // console.log('-----------')

    }
  })

  };
   

  render() {
    return (
      <View style={styles.containStyle}>
        <ListView
          dataSource={this.ds.cloneWithRows(this.todoList.dataList.slice())}
          renderRow={this.renderRow.bind(this)}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
        />
      </View>
    );
  }

  renderRow(rowData,sectionID,rowID){
    return(
      <Item rowData={rowData}/>
    )
  }

  
}




@observer
export class Item extends React.Component {
  render(){
    return(
      <TouchableOpacity activeOpacity={0.5} onPress={()=>this.props.rowData.toggleFinish()}>
        {this.renderItem()}
      </TouchableOpacity>
    )
  }

  renderItem(){

    if (this.props.rowData.seleted) {
      return(
        <View style={styles.topClickStyle_S}>
        <Text style={styles.topTextStyle}>{this.props.rowData.title}</Text>
        </View>
      )
    }else {
      return(
        <View style={styles.topClickStyle}>
        <Text>{this.props.rowData.title}</Text>
        </View>

      )
    }
  }
}

const styles = StyleSheet.create({
  containStyle:{
    flex:1,
    marginLeft:10,
    marginRight:10,
  },

  SeparatorComponent:{
    height:10,
    backgroundColor:'#dddddd'
  },
  topClickStyle:{
    height:30,
    width:60,
    marginRight:5,
    backgroundColor:'white',
    justifyContent:'center',
    alignItems:'center',

  },
  topClickStyle_S:{
    height:30,
    width:60,
    marginRight:5,
    backgroundColor:'white',
    justifyContent:'center',
    alignItems:'center',
    borderBottomWidth:2,
    borderBottomColor:'red',
  },
  topTextStyle:{

    color:'red',
  }
})

监听属性改变会触发autorun.在这里可以做很多事情

第二种方法,比较简单

'use strict';

import {observable, computed, action, runInAction,autorun} from 'mobx';

import React,{Component} from 'react';
import {observer} from 'mobx-react/native';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Alert,
  Image,
  TouchableOpacity,
  ListView
} from 'react-native';


//待办事项行数据
class TodoListItem {

    redModel = null;

    constructor(redModel) {
      this.redModel = redModel;
    }

    @action
    select=()=>{

      if (this.redModel.selectedItem == this) {
        this.redModel.selectedItem = null;
      }else {
        this.redModel.selectedItem = this
      }
    }

    @computed
    get seleted(){
      return this.redModel.selectedItem === this;
    }

    title;   
}

//待办事项列表数据
class TodoListHolder {

    @observable
    selectedItem=null;


    @observable
    dataList = [];
}



@observer
export default class Slider extends React.Component {

  todoList = new TodoListHolder();

  constructor(props) {
      super(props);
      for (let i = 1; i < 30; i++) {
          let listItem = new TodoListItem(this.todoList);
          listItem.title = `待办事项${i}`;
          this.todoList.dataList.push(listItem)
      }
      this.todoList.selectedItem = this.todoList.dataList[0];
  }

  ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => {
            return r1 !== r2
        }
  });
   

  render() {
    return (
      <View style={styles.containStyle}>
        <ListView
          dataSource={this.ds.cloneWithRows(this.todoList.dataList.slice())}
          renderRow={this.renderRow.bind(this)}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
        />
      </View>
    );
  }

  renderRow(rowData,sectionID,rowID){
    return(
      <Item rowData={rowData}/>
    )
  }

  componentDidMount() {

  }
  
}




@observer
export class Item extends React.Component {
  render(){
    return(
      <TouchableOpacity activeOpacity={0.5} onPress={()=>this.props.rowData.select()}>
        {this.renderItem()}
      </TouchableOpacity>
    )
  }

  renderItem(){

    if (this.props.rowData.seleted) {
      return(
        <View style={styles.topClickStyle_S}>
        <Text style={styles.topTextStyle}>{this.props.rowData.title}</Text>
        </View>
      )
    }else {
      return(
        <View style={styles.topClickStyle}>
        <Text>{this.props.rowData.title}</Text>
        </View>

      )
    }
  }
}

const styles = StyleSheet.create({
  containStyle:{
    flex:1,
    marginLeft:10,
    marginRight:10,
  },

  SeparatorComponent:{
    height:10,
    backgroundColor:'#dddddd'
  },
  topClickStyle:{
    height:30,
    marginRight:15,
    backgroundColor:'white',
    justifyContent:'center',
    alignItems:'center',

  },
  topClickStyle_S:{
    height:30,
    marginRight:15,
    backgroundColor:'white',
    justifyContent:'center',
    alignItems:'center',
    borderBottomWidth:2,
    borderBottomColor:'red',
  },
  topTextStyle:{

    color:'red',
  }
})

总结

仔细看会发现其实主要就这几步

1.定义一个对象,在对象里监听你想监听的属性(@observable 属性)
2.@observer对应的控件,在render() 里将你监听的属性取出来
3.然后赋值到控件上,赋值数组的时候要注意拷贝

最后编辑于：2018.01.12 09:21:15

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,013评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,205评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,370评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,168评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,153评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,954评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,271评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,916评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,382评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,877评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,989评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,624评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,209评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,199评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,418评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,401评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,700评论 2赞 345

React-Native Mobx

<1>请求一个列表

<2>.滑动条,选项卡,最好用第二种方法

第二种方法,比较简单

总结

仔细看会发现其实主要就这几步

推荐阅读更多精彩内容