React实现全局Loading

css

#__loading {
  position:fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
}

注意：css样式放到全局样式文件中。

页面代码

使用了antd的Spin组件

import React from 'react'
import ReactDOM from 'react-dom'
import { Spin } from 'antd'

class Loading {
    show (timeout) {
        const config = {
            tip: 'Loading...',
        }
        if (timeout) {
            window.setTimeout(() => {
                document.body.removeChild(document.getElementById('__loading'))
            }, timeout)
        }
        const dom = document.createElement('div')
        dom.setAttribute('id', '__loading')
        document.body.appendChild(dom)
        ReactDOM.render(<Spin {...config} />, dom)
    }
    hide() {
        document.body.removeChild(document.getElementById('__loading'))
    }
}

export default new Loading()

其实是没有必要使用antd的Spin组件，自己通过css实现一个Loading效果，网上百度一堆这种代码，我这里使用antd的组件是因为我自己项目使用了antd，保证组件风格统一性。

使用ReactDOM.render是因为原生dom节点是没办法直接使用jsx组件的，所以需要ReactDOM.render。

注意点：

刚开始我使用的css样式是position:absolute; 然后我发现我的Loading一会在页面中间，一会不在顶部。

通过查看css发现，自己的页面的body是可以滑动的，导致Loading位置时不时变化，如果页面不滑动Loading在页面中间，如果滑动就不在了。所以应该把css样式修改成position:fixed;就没问题了。（至于为啥自己页面body为啥可以滑动，是因为自己项目问题）。

推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩