react-native + mobx 入門到放棄

作為一個剛開始看react-native的小白，找到的原始碼我都看不太懂，還有涉及redux的知識。後面同事介紹mobx，因此記錄一下學習過程。

redux 和 mobx

過多的內容這裡不做敘述，請看下面連結(可以知道是什麼和為什麼，很短)
如何理解 Facebook 的 flux 應用架構？
理解 React，但不理解 Redux，該如何通俗易懂的理解 Redux？
MobX vs Redux: Comparing the Opposing Paradigms – React Conf 2017 紀要
(對於redux，請參看Redux 入門教程（三）：React-Redux 的用法）

務必多看幾遍，下面開始。

react-native

安裝好所需的環境。
選擇一個目錄，執行

react-native init FirstReact
cd FisrtReact
npm install 
react-native run-adnroid
複製程式碼

至此RN的demo可以正常啟動。

mobx

安裝mobx：
npm i mobx mobx-react --save
安裝mobx相關的包

npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev
安裝一些 babel 外掛，以支援 ES7 的 decorator 特性(後面有不用的方法， ES6)

然後開啟 .babelrc 檔案配置 babel 外掛：

{
  "presets": ["react-native"],
  "plugins": [
    "syntax-decorators",
    "transform-decorators-legacy"  ]
}
複製程式碼

依賴安裝完成。

在根目錄下建立mobxDemo資料夾。
新建AppState.js檔案:

import {action, observable, useStrict} from "mobx";
import {extendObservable} from "mobx";

class AppState {
    @observable
    timer = 101;
    
    addTimers() {
        this.timer += 1
    }
    resetTimer() {
        this.timer = 0;
    }
}
export default new AppState()
複製程式碼

@observable 指明需要觀察的物件(值，列表，陣列，類等。)
其他的 action， computed可以後面去了解。

同目錄下新建檔案：MobxDemo.js

@observer
class App extends React.Component {
    render() {
        return (
            <View>
                <Text>當前的數是：{AppState.timer}</Text>
                <Button
                    onPress={() =>
                        AppState.addTimers()}
                    title=`add`
                />
                <Button
                    onPress={() =>
                        AppState.resetTimer()
                    }
                    title=`reset`
                />
            </View>
        );
    }
}
export default App;
複製程式碼

在需要觀察的地方加@observer。

end

修改index.js檔案：

import { AppRegistry } from `react-native`;
import App from `./mobx/MobxDemo`;
AppRegistry.registerComponent(`FirstReact`, () => App);
複製程式碼

重新整理執行程式，完成對timer的加和重置。

ES6

在找資料的過程中，基本沒有es6的相關實現。
中文文件：http://cn.mobx.js.org/

下面是ES6不帶裝飾器的寫法：
AppState.js

import {action, observable, useStrict} from "mobx";
import {extendObservable} from "mobx";
class AppState {
    constructor() {
        let that = this;
        extendObservable(this, {
            timer: 11,
            get tenTimer() {
              return that.timer * 2
            },
            addTimers: action(function () {
                this.timer += 1
            }),
            resetTimer: action( () => {
                that.timer = 0
            })
        })
    }
}
export default new AppState()
複製程式碼

MobxDemo.js

import React from "react";
import {observer} from "mobx-react";
import {View, Text, Button} from "react-native";
import AppState from `./AppState`
const App = observer( class MobxDemo extends React.Component {
    render() {
        return (
            <View>
                <Text>當前的數是：{AppState.tenTimer}</Text>
                <Button
                    onPress={() =>
                        AppState.addTimers()}
                    title=`add`
                />
                <Button
                    onPress={() =>
                        AppState.resetTimer()
                    }
                    title=`reset`
                />
            </View>
        );
    }
})
export default App;
複製程式碼

result: 統一資料處理，觀察。