Mobx最核心就是解决React组件中的状态管理，外部的数据管理.它是一个独立的库，并不单单只适用于React.数据与视图分开。MobX管理数据，而React专注于视图

使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import {makeAutoObservable} from "mobx";
import {observer} from 'mobx-react-lite'

// 1. 数据以类形式编写，并编写维护内部数据的方法
class EchoTimeStore {
    now = 0;

    constructor() {
       makeAutoObservable(this)
    }

    add = () => {
        this.now++
    }

    // 函数变成属性，类似Python的@property装饰器
    get double() {
        return this.now * 2;
    }

}


// 实例化数据存储
const store = new EchoTimeStore();

// 2. 视图
const EchoTime = () => {
    console.log("store is ",store.now);
    return (
        <div>
            now {store.now} <br/> Double: {store.duble}
            <button onClick={store.add}>+</button>
        </div>
    )
}

// 导入的React视图需要用observer函数包装一下
export default observer(EchoTime);