React Mobx使用基础

前面写了一篇简单介绍React Mobx的文章，现在跟着大神做了几个页面，所以再加上一篇实例：

创建容器

// 把Provider包在你项目的入口处
import {Provider} from 'mobx-react'
// 这里的store就是配置文件，接下来展示
import store from './store/'
// React标配文件
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

ReactDom.render(
    <Provider
        store={store}
    >
        {/*Index就是你项目的入口文件，被Provider包裹*/}
        <Index/>
    </Provider>,
    document.getElementById("root")
);
registerServiceWorker();

上面我们就创建好了容器，接下来就是配置文件．

配置

没有Redux那么麻烦，就是很简单的写一些变量和函数，然后全局就可以调用了，下面展示配置文件的编写：

注意，这里只是配置文件，详细的信息都在配置文件指向的各个文件中：

// 引入真正的文件，具体的编写方式下面介绍，这里的文件名随便起，这里我是乱起的，明明不是学生了，还是摆脱不了起跟学校相关的变量名，哎
import className from 'real_info_1'
import teacher_Name from 'real_info_2'
// 注意，这里的stores只是一个汇总，具体的配置在各个文件中
const stores={
    class_Name,
    teacherName
};
export default stores

最后的文件

上面我们创建好了容器，也写好了配置文件，最后就是往配置文件中扔我们需要全局有效的变量和函数了，但是在这之前，需要介绍一个东西：严格模式

所谓严格模式就是不允许外界随便修改Mobx中缓存的数据，具体到代码中的体现等到下面代码中介绍，我也不知道为什么要开启这个模式，大神开着，那我也跟着开喽：

import {action,observable,useStrict} from 'mobx'
// 启动严格模式
useStrict(true)
class class_Name{
    // 创建全局变量
    @observable class=[];
    @action
    changeClass(new_class){
        // 这里的@action就是和严格模式配套使用的装饰器，表示允许该函数修改@observable的值
        this.class.unshift(new_class);
    }
    deleteClass(id){
        // 这里未使用@action，但是修改了@observable的值，所以会报错
        this.data.filter((Item)=>{
            if(Item.id===id){
                return true;
            }else{
                return false;
            }
        })
    }
}
// 上面的类创建好之后还需要new一下
const className=new class_Name();
export default class_Name

注意，一定要new，然后export

调用

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
// inject表示调用缓存,observer表示当缓存数据生效时，刷新当前页面
@inject("store")
@observer
class school extends Component{
    constructor(props,context){
        super(props,context);
        // 注意，这里开始调用
        this.state={
            data:this.props.store.class_Name.data
        }
    }
    render(){
        return(
            <div></div>
        )
    }
}
export default school

this.props.store.class_Name.data

• this.props：当使用@inject('store')后，缓存就自动被保存在this.props中
• 这个是规定，可以看我们创建容器时：<Provider store={}>
• className：这个是哪里来的呢？看我们的配置文件

const stores={
    class_Name,
    teacherName
};

其实就是调用我们class_Name中的值，看上面最后的文件中class_Name中就有data．

调用函数也是一样的方法：this.props.store.class_Name.changeClass("新教室");

到这里为止，我们就介绍了如何使用React Mobx的简单使用：

• 创建容器
• 编写配置文件
• 编写全局有效数据
• 引入，调用

下面是介绍一些我踩过的坑：

无意间触犯严格模式

看下面这个例子：

@action
@observable data;
getData(){
    fetch("http://anydomain.com")
        .then((returnData)=>{
            return returnData.json();
        })
        .then((data)=>{
            // 这里将后台返回的值赋值给变量，实际上已经触犯了严格模式
            this.data=data;
        })
        .catch((error)=>{
            console.error("获取数据时出错")
            console.error(error)
        })
}

很简单的一个获取后端数据的代码，在莫名之间就触犯了严格模式，因为在fetch函数中，是不允许修改@observable的值的，允许修改的是函数getData()，所以修改如下：

@action
@observable data;
getData(){
    fetch("http://anydomain.com")
        .then((returnData)=>{
            return returnData.json();
        })
        .then(action((data)=>{
            // 在这里加上action的函数
            this.data=data;
        }))
        .catch((error)=>{
            console.error("获取数据时出错")
            console.error(error)
        })
}

这是很不小心就会犯的错误，当时怎么也没想明白，后来问大神才知道的．当然这里只是一个例子，还有很多情况，这里只是介绍一下原理．