react-native + mobx 入門到放棄
標(biāo)簽（空格分隔）： react mobx Android
作為一個(gè)剛開始看react-native的小白，找到的源碼我都看不太懂，還有涉及redux的知識(shí)。后面同事介紹mobx，因此記錄一下學(xué)習(xí)過(guò)程。
redux 和 mobx
過(guò)多的內(nèi)容這里不做敘述，請(qǐng)看下面鏈接(可以知道是什么和為什么，很短)
如何理解 Facebook 的 flux 應(yīng)用架構(gòu)？
理解 React，但不理解 Redux，該如何通俗易懂的理解 Redux？
MobX vs Redux: Comparing the Opposing Paradigms - React Conf 2017 紀(jì)要
（對(duì)于redux，請(qǐng)參看Redux 入門教程（三）：React-Redux 的用法）
務(wù)必多看幾遍，下面開始。
react-native
安裝好所需的環(huán)境。
選擇一個(gè)目錄，執(zhí)行
react-native init FirstReact
cd FisrtReact
npm install
react-native run-adnroid
至此RN的demo可以正常啟動(dòng)。
mobx
安裝mobx：
npm i mobx mobx-react --save
安裝mobx相關(guān)的包
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" ]
}
依賴安裝完成。
在根目錄下創(chuàng)建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 指明需要觀察的對(duì)象(值，列表，數(shù)組，類等。)
其他的 action， computed可以后面去了解。
同目錄下新建文件：MobxDemo.js
@observer
class App extends React.Component {
render() {
return (
<View>
<Text>當(dāng)前的數(shù)是：{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);
刷新運(yùn)行程序，完成對(duì)timer的加和重置。
ES6
在找資料的過(guò)程中，基本沒有es6的相關(guān)實(shí)現(xiàn)。
中文文檔：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>當(dāng)前的數(shù)是：{AppState.tenTimer}</Text>
<Button
onPress={() =>
AppState.addTimers()}
title='add'
/>
<Button
onPress={() =>
AppState.resetTimer()
}
title='reset'
/>
</View>
);
}
})
export default App;
