React + hook + mobx + mobx-react-lite 使用

定义store

import {makeAutoObservable} from 'mobx';
import monment from 'moment';

class AppStore {
    secondsPassed = 0;
    count = 0;
    time = monment().format('YYYY/MM/DD HH:mm:ss');

    constructor() {
        makeAutoObservable(this);
    }

    getSecondsPassed() {
        this.secondsPassed += 1;
    }
    getNow() {
        this.time = monment().format('YYYY/MM/DD HH:mm:ss');
    }
    // 数量 + 1
    setCount = () => {
        this.count++;
    };
}

const store = new AppStore();

setInterval(() => {
    store.getSecondsPassed();
    store.getNow();
}, 1000);


export {store};

入口文件

import {FC} from 'react';
import Layout from '../components/Layout';

const App: FC = () => {
    return (
        <Layout />
    );
};

export default App;

使用

import React from 'react';
import {observer} from 'mobx-react-lite';
import {store} from '../../store';

const Layout: React.FC = () => {
    const {secondsPassed, time, count, setCount} = store;

    return (
        <div>
            <p>数字: {secondsPassed}</p>
            <span>时间: {time}</span>
            <p>{count}</p>
            <button onClick={setCount}>点击数字加一</button>
        </div>
    );
};

export default observer(Layout);