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

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

Mobx data-flow

Vs Redux

Vs Flux

Is it the feature?

1. jQuery

2. MVC

3. MVVM

4. FRP

大公司 VS 小团队

Thank you

github: @windy

ReactNative with mobx

By Li Yafei

ReactNative with mobx

  • 1,853
Loading comments...

More from Li Yafei