React Mobx常用简介

Mobx是以数据驱动视图，通过简单的数据绑定，我们只需要修改数据本身，便可自动更新视图

@observer

import React from 'react';
import {observer} from 'mobx';
import { View, Text } from 'react-native';
import Store from './Store.js';

@observer
class MobCounter extends React.Component{

 constructor() {
     this.store = new Store();
  }

  render(){
    return(
        <View>
            <Text>{this.store.count}</Text>
            <Text onPress={() => this.store.increase()}>自增</Text>
        </View>
    );
  }
}

export default MobCounter;

定义一种数据逻辑的store

import {observable} from 'mobx';
class Store{
    @observable count = 0;//添加observable属性，赋予count可以被外部观察的属性

    increase(){
        this.count++;
    }
}

export default Store;

@observer　给予组件响应数据变更的能力
@observable　给予数据被外部观察变更的特性

@computed

被@computed修饰的变量可以基于其他可观测的变量动态计算出一个值，同时这个值也是可观察的。

@observable first = 'hello';
@observable second = ' world';

@computed get all(){
    return this.first + this.second;
}

改变first或者second的值，all的值也会随之改变，并且这两个变量都是可观察的，任何观察了这两个变量的组件都会同步更新。

autorun

autorun 接收一个函数作为参数。autorun 会读取函数内部可观察的属性，并将此属性与函数绑定，任何有关此属性的变化，都将会自动执行绑定的函数。

autorun(() => {
    console.log(this.count);//count 是observable变量
});

以上介绍了Mobx的基本用法，更详细的用法可查看 Mobx官网