Mobx和Mobe-React傻瓜式教程

因为我也不怎么会，所以讲的很小白，但是我相信很多人都需要这种小白式的教程．而且趁着我还理的暂时清除，赶紧记下来，防止自己明天失忆．

这玩意是干嘛的？

很多教程都是直接讲怎么使用，但是我感觉应该先讲这玩意有什么用．

存放全局有效数据．

比如，在React中一个思想就是一个页面的数据保存在该页面的state中，但是假设更多更多页面，多到这些页面没有什么关联的情况下都需要使用相同的数据，而且在一个页面中进行数据修改后，在别的页面也能读取，这样就需要用这玩意，把我们需要共享的数据保存起来．

明确这一点后，问题就是如何保存数据．

装饰器以及我个人很满意的一个例子

首先，作为前端小白，第一次看见@action，@observable这些东西的时候，直接懵逼，这些是什么鬼？我的前端还在几年前的记忆里．

接着，我讲解的肯定是不对，或者不准确的，但是出发点是帮助你理解这玩意是怎么用的，对于我们小白来说，先能用，用着用着，原理就自然而然的出来了．你可以简单的理解，就是在你的函数之前运行了另一个函数，而这个函数到底干了什么，不用管，直接看他会对你的代码产生什么影响就好．

下面我列举一个银行取钱的例子，放心，不全是代码：

家里有很多家银行的帐号，但是有一些是父母专门用的，有一些是大家共用的，比如你的压岁钱．．．．．

为了做一个区分，大家在大家都可以用的帐号的存折上贴上@observable的Logo，大家看见这个Logo就标志这玩意是大家都共用的．接着大家规定了花这笔钱的渠道：

• 买菜：如果超过50则驳回，否则扣除相应的菜钱
• 去游乐园：如果今天不是周六周日则驳回，否则扣除相应的门票钱
• 等等等

大家把这些规则写成一个通告：

// 我最讨厌在看不懂代码的时候还要边看边翻译英文，我就拿中文写了，反正不用到机器上去跑.....
class 家庭规则{
    // 先看下去，别看到这里就放弃了
    @observable 公共账户金额;
    买菜=(菜钱)=>{
        if(菜钱>50){
            return false;
        }else{
            this.公共账户金额-=菜钱;
        }
    }
    去游乐圆=(门票钱)=>{
        if(今天不是周六，周日){
            return false;
        }else{
            this.公共账户金额-=门票钱;
        }
    }
}
// 下面我们让这个家庭规则生效
const 已通过家庭规则=new 家庭规则();
export default 已通过的家庭规则

好了，到这里我们已经定义好了家庭规则，然后在一个月黑风高的夜晚，你和你爸准备去突袭游乐园，而你妈准备去买菜：

import { inject, observer } from 'mobx-react'
import React from 'react'
// 家庭规则不止一条，上面我们只是展示了其中一条，而家庭规则集合则是上面多条类似的集合
@inject(家庭规则集合)
// 这个observer的作用等下再讲
@observer
class 突袭游乐园作战方案 extends React.Component{
    render(){
        {
            this.props.家庭规则集合.公共资金账户>=门票钱
            ?潇洒的给钱进门
            :回家洗洗睡吧
        }
    }
}
export default 突袭游乐园作战方案

好了，看完你和你爸的小计划后再来看看你妈：

import { inject, observer } from 'mobx-react'
import React from 'react'
@inject(家庭规则集)
@observer
class 主妇深夜逛菜场计划 extends React.Component{
    render(){
        if(如果隔壁老王在的话){
                return (
                    {/**嘿嘿嘿...**/}
                )
            }else{
                if(this.props.家庭规则集合.公共资金账户>=菜价){
                    return(良家主妇);
                }else{
                    return(泼妇骂街);
                }
            }
    }
}
export default 主妇深夜逛菜场计划

到这里我们来解释一下@observer的意义，首先，你们谁都没有现金！！！钱在哪里？在银行里，即，如果你妈先买了菜，那么你和你爸的钱就不够了，如果你和你爸先进了游乐园，那么你妈很有可能就买不起菜了．你们共用一个this.props.家庭规则集合.公共资金账户．

通过@inject()引入数据的方式，数据被自动保存在组件的this.props.中．

类比到Mobe-React上，那就是你需要的数据不再存储在this.state中，而是一个公共的缓存中了，其中缓存中数据的修改都会引起@observer中的数据．对应到React中就是会导致页面的视图重新渲染．

到这里我们再解释一下公共这两个字的含义：

• 第一，大家都有权知道这个账户里的具体余额，如果不是公共的，那么你可能是无权知道的，比如你妈有一个你小时候压岁钱红包累计起来的账户，但是你永远都不会知道里面到底多少钱，或者你爸的小金库里有多少钱等
• 第二，动用这笔金库里面的钱只能用大家规定的方法，除此之外，是没有办法修改这笔金库里面的钱的．

@action

上面是非严格模式，一旦开启了严格模式就是需要这个来声明你在该函数中对缓存数据做了修改了．听不懂也没关系，去看源码的，这个时候至少不会从入门到放弃了.