Mobx的简单使用（@ observable、@ observer、action）

@ observable

装饰器可以在 ES7 或者 TypeScript 类属性中属性使用，将其转换成可观察的。 @observable 可以在实例字段和属性 getter 上使用。

@ observer

observer 函数/装饰器可以用来将 React 组件转变成响应式组件。 它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件。

action

用法:
action(fn)
action(name, fn)
@action classMethod() {}
@action(name) classMethod () {}
@action boundClassMethod = (args) => { body }
@action(name) boundClassMethod = (args) => { body }
@action.bound classMethod() {}
任何应用都有动作。动作是任何用来修改状态的东西。 使用MobX你可以在代码中显式地标记出动作所在的位置。 动作可以有助于更好的组织代码。

定时器示例

states.js

import { observable, action } from 'mobx'

class States {

    @observable timer = null;
    @observable secend = 0;

    @action 
    add = () => {
        this.secend++
    }
}

export default new States()

index.js

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import { observer } from "mobx-react/native";
import states from './states'

@observer
export default class Index extends Component {

  componentDidMount(){
    states.timer = setInterval( () => { states.add() }, 1000 )
  }

  componentWillUnmount(){
    clearInterval(states.timer);
  }

  render() {
    return (
      
        {states.secend}
      
    );
  }

}