MobX实现全局统一加载动画

实现类似gitlab导航栏的全局加载动画效果

 

 参考文档: https://mobx.js.org/getting-started.html

 

 

npm install --save mobx

npm install --save mobx-react-lite

1. 创建Mobx组件

import {autorun, action, makeObservable, observable} from "mobx";

class GlobalLoading {
    loading = false;

    constructor() {
        makeObservable(this, {
            loading: observable,
            changeStatus: action
        });
　　　　　// 当loading属性改变时候会自动运行此段代码，将状态打印到控制台
        autorun(() => this.report);
    }

    get report() {
        console.log("状态" + this.loading);
    }

　　　// 外部调用此方法，用来改变状态
    changeStatus(status) {
        this.loading = status;
    }
}

export const globalLoading = new GlobalLoading();

2.在导航栏组件中调用在第一部中创建的MobX组件：globalLoading

import {globalLoading} from "../mobx/GlobalLoading";
......

export default function Navigate(props) {

    const [current, setCurrent] = useState('home');

    const navigate = useNavigate();

    const LoadingIcon = observer(({store}) => {
        return (<Loading3QuartersOutlined spin={store.loading}/>)
    });

    const items = [
        {

            key: 'logo',
            icon: <LoadingIcon store={globalLoading}/>,
            disabled: true,
        },
        {
            label: '总览',
            key: 'home',
            icon: <MailOutlined/>,
        },
        ....
    ];

....


    return (<Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal" items={items}/>);
}

3. 在其他应用页面改变 GlobalLoading 中的状态，在案例中直接定义一个按钮直接改变这个状态，实际中可以在请求后台开始和结束的时候改变这个状态，来实现动画效果的改变

import React from "react";
import {Button} from "antd";
import {globalLoading} from "../../components/mobx/GlobalLoading.jsx";

export default function Home(props) {

    return (<div>HOME

        <Button onClick={() => {
            globalLoading.changeStatus(!globalLoading.loading)
        }}>改变状态</Button>


    </div>);
}