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 这些方面的东西.