RN: 模拟 Mobx

前言

看过 [React Native 使用 Mobx] 这篇博客的同学, 对 Mobx 应该有了一个简单直观的认识.

其实, 我们完全可以使用 RN 中的 State 来达到同样的效果.

今天的主要内容是使用 State 来模拟 Mobx, 也算是对 Mobx 的进一步认识.

效果

实现效果和 [React Native 使用 Mobx] 中的效果一致, 只是代码没有使用 Mobx 框架.

实现

LegacyCounter.js

Add 和 Minus 两个按钮分别触发各自的回调, 来更新 state.
使用 state 的变化来到达更新 View (计数的 Text 会相应的做出变化)的目的.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/**
* 模拟 Mobx 在 ReactNative 上的一个小例子.
*
* state -> view
*/
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TouchableHighlight
} from 'react-native';
class LegacyCounter extends Component {
//构造方法
constructor(props) {
super(props);
this.state = {
//计数
counter: 0
};
}
render () {
return (
<View style = {styles.container}>
{/*加一*/}
<TouchableHighlight
onPress = {() => {this.setState({
counter: ++this.state.counter
})}}>
<Text>Add</Text>
</TouchableHighlight>
{/* 显示处理结果 */}
<Text style = {styles.resultTxtStyle}>
{this.state.counter}
</Text>
{/*减一*/}
<TouchableHighlight
onPress = {() => {this.setState({
counter: --this.state.counter
})}}>
<Text>Minus</Text>
</TouchableHighlight>
</View>
);
}
}
export default class LegacyComponent extends Component {
render () {
return (
<View style = {{flex: 1, marginTop: 64}}>
<LegacyCounter/>
</View>
);
}
}
/* 样式定义 */
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-around'
},
resultTxtStyle: {
fontSize: 22,
color: 'red'
}
});

index.ios.js

这个文件很简单, 只是调用 LegacyCounter 中的组件.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
//引入自定义模块
import LegacyComponent from './js/Mobx/LegacyCounter'
import {
AppRegistry
} from 'react-native';
class RNMobxDemo extends Component {
render() {
return(
<LegacyComponent/>
);
}
}
AppRegistry.registerComponent('RNMobxDemo', () => MZRNTutorial);

后记

如果你想了解更多关于 RN 中 State 的知识, 请移步官方文档查阅 State 的用法.

后续会给大家带来更多关于 RN 这些方面的东西.

坚持原创技术分享!