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的要領:

１．定義你的狀態並讓它變爲可觀察的;

２．建立能響應狀態變化的視圖;

３．修改狀態.

 

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 彭思