很简单的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 appStore2、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‘)@observerexport 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();

原文地址：https://www.cnblogs.com/jingguorui/p/11511143.html