很简单的mobx状态管理工具

mobx是一个状态管理系统，从mobx引入observable和action；

store页面的observable是定义数据的东西，action是执行者；类似于redux

在app页面需要引入import {Provider} from "mobx-react"，利用Provider的机制来给子传值

home页面的observer是一个类似于监听者，类似于redux里面的reducers，inject引入的是store

　　通过@inject（‘store’）引入store

　　　　　@observer来监听组件里面的变化

一、安装

1、init创建项目版本0.59.9

2、npm i [email protected] @[email protected] --save    （@babel/core版本为7.4.0）

3、配置装饰器yarn add  @babel/plugin-proposal-decorators --save

　　然后需要在babel.config.js文件中添加如下代码

"plugins": [
    [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ]
二、创建文件
　　src{
　　appstore/index.js
　　pages/home.js
}
三、文件中书写
1、appstore.js中的书写

import {observable,action} from 'mobx';
let appStore = observable({
    counter: 0,
    str:"荆国瑞",
    list:["as"]
});
appStore.addCount = action(()=>{
    appStore.counter+=1;
});
appStore.subCount = action(()=>{
    if(appStore.counter<=0){
        return;
    }
    appStore.counter-=1;
});
appStore.changeCount = action((key)=>{
    if(key<=0){
        appStore.counter=0;
    }
    appStore.counter=parseInt(key);
});
appStore.changeStr = action((key)=>{
    if(!key)return
    appStore.str=key
});

appStore.clickhand=action(()=>{
    appStore.list.push(appStore.str)
    appStore.str=""
})
export default appStore
2、home文件中的书写
　　

import React, {Component} from 'react';
import { StyleSheet, Text, View,TouchableOpacity,TextInput,Button,Alert} from 'react-native';
import {observer, inject} from 'mobx-react';

@inject('store')
@observer
export default class Home extends Component{
    constructor(props){
        super(props);
        this.state={
            value:0,
            str:"荆国瑞"
        }
    }
    componentWillMount(){
        console.log(this.props.store.counter)
    }
    sub=()=>{
        let {store}=this.props;
        store.subCount()
    }
    add=()=>{
        let {store}=this.props;
        store.addCount()
    }
    changehand=(e)=>{
        let {store} = this.props
        store.changeStr(e)
    }
    clickhand=()=>{
        let {store} =this.props
        store.clickhand()
    }
    render() {
        let {store}=this.props
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this.sub}>
                    <Text style={styles.txt}>-</Text>
                </TouchableOpacity>
                <TextInput style={{width:100,height:35,borderWidth:1}} value={store.counter.toString()}/>
                <TouchableOpacity onPress={this.add}>
                    <Text style={styles.txt}>+</Text>
                </TouchableOpacity>
                <TextInput value={store.str} style={styles.inp} onChangeText={this.changehand}/>
                <Button title="添加" onPress={this.clickhand}/>
                <View>
                    {
                        store.list.map((item)=>{
                            return <Text>{item}</Text>
                        })
                    }
                </View>
            </View>
        );
    }
}



最后写在app文件内就可以了

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Home from "./src/pages/home"

import {Provider} from "mobx-react"
import Appstore from "./src/store/appStore"

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Provider store={Appstore}>
        <Home/>
      </Provider>
    );
  }
}

最后：store的另一种写法：
通过

observable 来定义数据内容，

action 来执行

class appStore{
    @observable counter = 0; @observable themeType = 'light'; @observable theme=themeData['light']; @action changeTheme=(themeType)=>{ this.themeType=themeType this.theme=themeData[themeType]; } } export default new appStore();