mobx6.x+react的简单使用

---

前言

这里是mobx数据流管理的简单应用，官网学习：https://zh.mobx.js.org/；
我这里的例子是react+mobx的例子

---

一、开始前的准备

1.npx create-react-app my-app 使用react脚手架生成react项目；
2.npm install mobx mobx-react-lite --save

二、使用

1.简单使用

（1）使用makeObservable

写一个mobx的store文件：

//counterStore.js
import { makeObservable, action, observable, computed, flow} from "mobx"
class CounterStore {
    value = 0
    name = "default"
    loading = false
    constructor(value = 0) {
        makeObservable(this, {
            value: observable,
            name: observable,
            loading: observable,
            add: action.bound,
            del: action.bound,
            doubleValue: computed,
            getBaseM: flow.bound,
            getOther: flow.bound,
        })
        this.value = value
        this.loading = false
    }

    add() {
        this.value++
    }

    del() {
        this.value--
    }

    get doubleValue() {
        return this.value * 2
    }
    getData() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(
                    {
                        "name": "yeld获取数据",
                        "age": 12,
                        "value": 1000
                    }
                )
            }, 2000);
        })
    }
    getData2() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(
                    {
                        "name": "async await获取数据",
                        "age": 16,
                        "value": 2000
                    }
                )
            }, 2000);
        })
    }
    *getBaseM() {
        const data = yield this.getData();
        this.value = data.value;
        this.name = data.name
    }
    async getOther() {
        const data = await this.getData2();
        this.value = data.value;
        this.name = data.name
    }
}
export default CounterStore

写一个counter的组件，再内部使用这个store做数据跟踪缓存

//counter.js

// import Store from "../store"
import Store from "../store/countStore"
import { observer } from "mobx-react-lite"
import { autorun, reaction } from "mobx";
import { useState } from "react"
const Counter = () => {
    const [storeInfo] = useState(new Store())
    const test = (state) => {
        state.name = "啊哈哈"
    }
    return <div>
        <p>name: {storeInfo.name}</p>
        <button onClick={() => test(storeInfo)}>测试</button>
        <button style={{
            width: "120px",
            margin: "10px"
        }} onClick={storeInfo.add}>+</button>
        <span>{storeInfo.value}</span>
        <button style={{
            width: "120px",
            margin: "10px"
        }} onClick={storeInfo.del}>-</button>
        <div>
            <p>二倍值：{storeInfo.doubleValue}</p>
        </div>
        <button onClick={storeInfo.getBaseM}>generator获取数据</button>
        <button onClick={storeInfo.getOther}>generator获取数据</button>
    </div >
}
export default observer(Counter)

使用makeObservable做数据绑定的话，需要手动指定每个属性和方法绑定的类型，observable属性绑定，action是给方法做注解，flow给异步方法做注解，其中.bound是因为react中是严格模式，class中的方法会丢失this指向，所以需要手动绑定this，*.bound可以自动给你绑定this

（2）使用makeAutoObservable（注意，继承不能使用这个注解方法）

//counter.js
import {  makeAutoObservable } from "mobx"
class CounterStore {
    value = 0
    name = "default"
    loading = false
    constructor(value = 0) {
        makeAutoObservable(this, {
            getData: false,
            getData2: false
        }, {
            autoBind: true
        })
        this.value = value
        this.loading = false
    }

    add() {
        this.value++
    }

    del() {
        this.value--
    }

    get doubleValue() {
        return this.value * 2
    }
    getData() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(
                    {
                        "name": "yeld获取数据",
                        "age": 12,
                        "value": 1000
                    }
                )
            }, 2000);
        })
    }
    getData2() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(
                    {
                        "name": "async await获取数据",
                        "age": 16,
                        "value": 2000
                    }
                )
            }, 2000);
        })
    }
    *getBaseM() {
        const data = yield this.getData();
        this.value = data.value;
        this.name = data.name
    }
    async getOther() {
        const data = await this.getData2();
        this.value = data.value;
        this.name = data.name
    }
}
export default CounterStore

makeAutoObservable这个注解方法是自动帮你做observable，action，flow的指定，第二个参数可以指定哪些属性或方法不需要做跟踪；

2.异步请求

如上的代码，使用flow注解的代码，就是异步的代码，可以支持异步跟中数据变更并刷新组件

3.继承

我们在建一个叫SonStore.js的文件

//SonStore.js
import { makeObservable, override } from "mobx"
import CounterStore from "./countStore"

class SonStore extends CounterStore {
    constructor() {
        super();
        makeObservable(this, {
            add: override
        })
    }
    add() {
        this.obj.value += 2
    }
}
export default SonStore

如上代码， SonStore继承了CounterStore，并可以使用makeObservable指定需要被重写的方法，相比于父class，子class多了super初始化父级到子级中

注意：继承不能使用makeAutoObservable

---

总结

更多请参考官网：https://zh.mobx.js.org/；