ReactNative with Mobx

李亚飞

连续创业者, 全栈开发工程师, 专注于 web app & native app.

创业作品: cywin(创业赢), 8020(八十二十) 等

Github:  @windy

Why not Swift&Java?

• 开发效率
• 开发效率
• 开发效率

Why React Native?

• 开发效率

• 运行性能

• JS 全栈

And why mobx?

• FRP
• Auto binding
• Simple
• Scalable

// a very simple mobx example
import { observable, computed, autorun } from 'mobx'

class A {
  @observable a = "a";
  @observable b = "b";
  @observable c = "c";

  @computed get sum() {
    return this.a+this.b;
  }
}

let classA = new A();

// output "ab"
autorun( ()=> {
  console.log(classA.sum);
})

// output "aab"
classA.a = "aa";

// nothing output
classA.c = "cc";

// counter_store.js

import {observable} from 'mobx'
import api from './api'

class CounterStore {
  @observable counter = 0;
  @observable remoteCounter = 0;

  constructor() {
  }

  increment() {
    this.counter++;
  }

  decrement() {
    this.counter--;
  }

  incrementAsync() {
    setTimeout(() => {
      this.counter++;
      }, 500);
  }

  getFromRemote() {
    api.get('/hello')
      .then( (r)=> {
        if(r.ok)
          this.remoteCounter = r.data;
        else
          this.remoteCounter = 'error';
      });
  }
}

const counterStore = new CounterStore;

export default counterStore;

// counter_screen.js
import React, { Component, PropTypes } from 'react'
import { Text, View, StyleSheet } from 'react-native'
import Button from 'react-native-button'
import { observer } from 'mobx-react/native'
import ApplicationStyles from '../styles'
import Icon from 'react-native-vector-icons/FontAwesome'

@observer
export default class CounterScreen extends Component {

  render() {
    return (
      <View>
        <Text>Clicked: <Text>{this.props.counterStore.counter}</Text> times</Text>
        <Button style={ApplicationStyles.button} onPress={() => this.props.counterStore.increment()}>
          |   +1   |
        </Button>
        <Button style={ApplicationStyles.button} onPress={() => this.props.counterStore.incrementAsync()}>
          |   +1 async  |
        </Button>
      </View>
    )
  }
}

React Native Mobx template

https://github.com/80percent/mobx-react-native-template

• 极速上手
• 极简理念
• 性能优异

Mobx data-flow

Vs Redux

Vs Flux

Thank you

github: @windy