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 = ; // 注意这里不能调用super(props),否则报错
constructor(props) {
// 一秒递增
setInterval(()=>{
this.timer += ;
}, );
} // 重置计数器
resetTimer() {
this.timer = ;
}
} 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: }}>
<Text>
当前的值是: {APPState.timer}
</Text>
<TouchableOpacity onPress={()=>{this.onReset()}}>
<Text style={{backgroundColor: 'green', color: 'white', marginLeft: , fontSize: }}>
重置
</Text>
</TouchableOpacity>
</View>
</View>
);
} // 重置
onReset() {
APPState.resetTimer();
}
} const styles = StyleSheet.create({
container: {
flex: ,
// justifyContent: 'center',
backgroundColor: 'white',
alignItems: 'center'
},
welcome: {
marginTop: ,
fontSize: ,
}
});
二.总结:
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这个项目,里面的注释和知识对于初学者还是蛮不错的,以后项目中用到的知识和自己学习的知识也会在里面,持续更新哟!!!
gitHub: https://github.com/PengSiSi/PSMeiTuan
欢迎加QQ,一起交流学习哟 : 1299625033 彭思
最新文章
- my_strstr()
- Linux下修改进程名称
- B 倒不了的塔
- 批量修改文件夹及文件用户权限和用户组权限 centos
- centos ssh 无密码登录
- 发几个Flex的学习资源
- 靶形数独 (codevs 1174)题解
- mouseover,mouseout和mouseenter,mouseleave
- 201521123008 《Java程序设计》第十四周学习总结
- 仿京东树形菜单插件hovertree
- 5分钟入门LingaScript-尝鲜中文版TypeScript
- PTA编译总结求最大值及其下标
- 史上最全脉搏心率传感器PulseSensor资料(电路图+中文说明书+最全源代码)
- 20172306《Java程序设计与数据结构》第十周学习总结
- 【python】正则表达式-常用函数
- Security4.1.3实现根据请求跳转不同登录页以及登录后根据权限跳转到不同页配置
- Spring的@ModelAttribute注解
- C语言 &#183; 分糖果
- 自定义ISO结构
- bzoj 1030 ac自动机