As a newcomer to React-Native, I couldn’t understand any of the source code I found, as well as the redux knowledge. Mobx will be introduced in the back, so take notes on the learning process.

Story and mobx

Too much content is not described here, please see the link below (can know what and why, very short) how to understand Facebook flux application architecture? React but not Redux. How to understand Redux? “MobX vs Redux: Comparing the Undefined Paradigms-react Conf 2017”

Make sure you watch it several times. Here we go.

react-native

Install the required environment. Select a directory and run

react-native init FirstReact
cd FisrtReact
npm install 
react-native run-adnroid
Copy the code

At this point, the RN demo can start normally.

mobx

Install mobx: NPM I mobx mobx-react –save Install mobx packages

NPM I babel-plugin-transform-decorators-legacy babel-react-native stage-0 –save-dev Install some Babel plugins, To support the ES7 decorator feature.

Then open the.babelrc file to configure the Babel plugin:

{
  "presets": ["react-native"]."plugins": [
    "syntax-decorators"."transform-decorators-legacy"]}Copy the code

Dependency installation is complete.

Create the mobxDemo folder in the root directory. Create a new appstate.js file:

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()
Copy the code

Observable specifies which object (values, lists, arrays, classes, etc.) to observe. Other action, computed, can be learned later.

Create a new file in the same directory: mobxdemo.js

@observer
class App extends React.Component {
    render() {
        return<View> <Text> The current number is: {appstate.timer}</Text> <Button onPress={() => Appstate.addtimers ()} title='add'
                />
                <Button
                    onPress={() =>
                        AppState.resetTimer()
                    }
                    title='reset'/> </View> ); }}export default App;
Copy the code

Add @observer where you need to observe.

end

Modify the index.js file:

import { AppRegistry } from 'react-native';
import App from './mobx/MobxDemo';
AppRegistry.registerComponent('FirstReact', () => App);
Copy the code

Refresh the running program to complete the addition and reset of the timer.

ES6

In the process of looking for information, there is basically no relevant implementation of ES6. Chinese document: http://cn.mobx.js.org/

Here’s how ES6 is written without decorators: 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()
Copy the code

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> The current number is: {appstate.tentimer}</Text> <Button onPress={() => Appstate.addtimers ()} title='add'
                />
                <Button
                    onPress={() =>
                        AppState.resetTimer()
                    }
                    title='reset'/> </View> ); }})export default App;
Copy the code

Result: Unified data processing and observation.