React Native使用Mobx总结

参考博客:

http://www.jianshu.com/p/505d9d9fe36a    这是我看的学习Mobx目前为止觉得最详细学习的博客了.

下面只是记录下我的学习和一些简单的使用:

需要引入的库:

"mobx": "^3.1.16",
"mobx-react": "^4.2.2",
"mobx-react-devtools": "^4.2.15",

一.计数器的Mobx实现 :

AppState.js实现:这里主要是监听属性变化.

复制代码
import { observable,computed,autorun,action,useStrict } from 'mobx';

// useStrict(true);//这里用到了严格模式,在修改类的成员属性的时候函数前面需要加上 @action
 
class AppState {
    
    @observable timer = 0;

    // 注意这里不能调用super(props),否则报错
    constructor(props) {
        // 一秒递增
        setInterval(()=>{
            this.timer += 1;
        }, 1000);
    }

    // 重置计数器
    resetTimer() {
        this.timer = 0;
    }
}

export default AppState;
复制代码

模块使用:

复制代码
/**
 * Created by 思思 on 17/5/7.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';

import Color from './../../../Config/Color';
import AppState from './../../../Mobx/AppState';
import { observer } from 'mobx-react';

// 实例化,这里当然也可以在AppState导出组件时进行new
const APPState= new AppState();

// 这里必须要写的,不然不能监听值的变化
@observer

export default class extends Component {

     static navigationOptions = ({navigation,screenProps}) => ({  
        headerTitle: 'Mobx学习', 
        headerTitleStyle: {
            color: 'white',
            alignSelf: 'center'  // 设置安卓端导航栏标题不居中显示
        },
        headerStyle: {
            backgroundColor: Color.kMainColor  // 设置导航栏的背景颜色,headerTintColor设置无效
        },
    }); 

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                   计数器的一个Mobx例子
                </Text>
                <View style={{flexDirection: 'row', justifyContent: 'space-around', marginTop: 40}}>
                    <Text>
                    当前的值是: {APPState.timer}
                    </Text>
                    <TouchableOpacity onPress={()=>{this.onReset()}}>
                        <Text style={{backgroundColor: 'green', color: 'white', marginLeft: 30, fontSize: 20}}>
                        重置
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    // 重置
    onReset() {
        APPState.resetTimer();
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // justifyContent: 'center',
        backgroundColor: 'white',
        alignItems: 'center'
    },
    welcome: {
        marginTop: 20,
        fontSize: 20, 
    }
});
复制代码

二.总结:

1> State状态:

state即数据,包括从服务端获取的数据,本地控制组件状态的数据.

2> @Action:

action就是改变state的代码。action就像是一个用户在单元格里输入一个新值。

明确定义你的action,这可以让你的代码结构更加清晰。在严格模式下,修改state的函数如果没有包裹在actions内,Mobx就不会执行state的修改操作。

换句话说,就是修改state的函数最好包裹在action内,这样可以让你清楚的知道什么地方是在修改状态,方便维护和调试。

3> 常用关键字:<暂时只了解和学习了这些>

@observale 修饰器或者 observable 函数让对象可以被追踪,用来观测一个数据,这个数据可以数字、字符串、数组、对象等类型;
@computed 修饰器创造了自动运算的表达式;
@autorun 函数让依靠 observable 的函数自动执行,当观测到的数据发生变化的时候,如果变化的值处在autorun中,那么autorun就会自动执行.这个用来写 log,发请求很不错;
@observer 修饰器让React Native组件自动起来,它会自动更新,即便是在一个很大的程序里也会工作的很好;需要注意的是如果组件采用封装,子组件也需要@observer

使用MobX的要领:

1.定义你的状态并让它变为可观察的;
2.创建能响应状态变化的视图;

3.修改状态.

 

Mobx想要入门上手可以说非常简单,只需要记住少量概念并可以完成许多基础业务了。但深入学习下去,也还是要接触许多概念的。例如Modifier、Transation等等。
貌似觉得还是比Redux方便简单.

Mobx实现计数器Demo:

https://github.com/PengSiSi/PSMeiTuan/blob/master/Component/Sections/Setting/Demos/MobxDemo.js

 

Mobx实现购物车Demo:

https://github.com/PengSiSi/PSMeiTuan/blob/master/Component/Sections/Setting/Demos/CartMobxDemo.js

 

因为这些是在自己学习练手的一个"仿美团"的项目中写的Demo,感兴趣的也可以clone这个项目,里面的注释和知识对于初学者还是蛮不错的,以后项目中用到的知识和自己学习的知识也会在里面,持续更新哟!!!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值