优雅地使用loading-白红宇

前言

不知道从什么时候开始有了写博客的想法，奈何自己的知识储备还很薄弱，迟迟无法下笔。这是我的第一篇博客，算是记录一下自己学习前端以来的一些知识吧。如有错漏，恳请指出，您的批评和指正是我前进路上的一大动力！

在平时的开发过程中，我们需要异步等待数据，常常会利用loading图来加强用户的体验，让用户知道我们有在加载，那么如何在开发过程中更为优雅地使用loading呢？开发小程序的时候我们只需要一句wx.showLoading()就完事儿了，而在web开发中也有相应的UI框架来帮我们完成这件事情。那究竟是怎么实现的呢，让我们来一起看一下。

先实现一个简单的loading

代码如下


      
     
    
.container {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);}.loading {  width: 100px;  height: 100px;  border-radius: 100%;  border: 5px #ffffff solid;  border-right-color: #87CEEB;  animation: loading 1s linear infinite;}@keyframes loading {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}复制代码

这样我们就实现了一个比较简单的转圈圈loading图，下面我将分别叙述在vue和react中如何优雅地使用这个loading。

Vue部分

首先先用vue init webpack生成一个vue脚手架，插件的目录如下图所示

loading.vue里写进了我们上面实现的简单loading的代码，加上一点点逻辑

复制代码

index.js

//先引入loading组件import LoadingComponent from './loading'const Loading = {}Loading.install = function (Vue) {// 生成一个Vue的子类 同时这个子类也就是组件const LoadingConstructor = Vue.extend(LoadingComponent)// 生成一个该子类的实例const instance = new LoadingConstructor()// 将这个实例挂载在我创建的div上// 并将此div加入全局挂载点内部instance.$mount(document.createElement('div'))document.body.appendChild(instance.$el)//注入vue的原型链Vue.prototype.$loading = {    show() {        instance.show = true    },    close(){          instance.show = false        }    }}export default Loading复制代码

这里我们生成个一个Vue的子类，然后将它的实例挂载到全局。将一些方法注入到Vue的原型链中，这样就可以在任何组件中通过类似于this.$loading.show()的方法来控制loading图的显示和隐藏。最后我们导出Loading对象。然后在main.js中引入Loading插件，并调用Vue.use()方法来注册插件

最后，让我们来测试一下吧。测试代码如下，用setTimeout来模拟异步请求。

复制代码

奶思！测试成功！

React部分

在此之前，我先介绍一下react中的高阶组件(HOC)

高阶组件

在React中，多个不同的组件中如果需要用到相同的功能，这个解决方法，通常有Mixin和高阶组件。但是由于Mixin过多会使使得组件难以维护，在React ES6中Mixin不再被支持。高阶组件是一个接替Mixin实现抽象组件公共功能的好方法。高阶组件其实是一个函数，接收一个组件作为参数，返回一个包装组件作为返回值，类似于高阶函数。

具体实现

先用create-react-app 生成一个测试脚手架，高阶组件目录如下图所示

index.css主要是loading的样式，index.js的代码如下

import React from 'react';import './index.css'function hoc(ComponentClass) {    return class HOC extends ComponentClass {        render() {            if (!this.state.loading) {                console.log(this.state.loading)                return super.render()            }            else {                return (
                        
                             
      
                    
     
                
    
)            }        }    }}export default hoc复制代码

我们定义了一个hoc函数，接受一个组件作为参数。通过this.state来操作组件的state属性，通过super.render()来渲染组件。最后导出hoc函数。然后在组件中引入，如下

import hoc from '../hoc/loading/index'class Home extends Component {    constructor(props) {        super(props)        this.state = {            msg: '还没加载好',            loading: true        }    }    render() {        return (            
    
                     {this.state.msg}            
    
        );    }    componentDidMount() {        let loading = this.state.loading        setTimeout(() => {            this.setState({                loading: !loading,                msg: '加载完辽!'            })        }, 3000)    }}export default hoc(Home)复制代码

同样是采用setTimeout来模拟异步请求，测试结果也是成功的。react部分并没有用装饰器来使用高阶组件，还不够优雅。。。（在create-react-app中把网上的处理方法都试了一遍，还是报错。。）

最后

至此，在Vue和React中如何优雅地使用loading就到此结束辽。这是一个超简易版的demo，但还是希望能分享给大家。写完才真正体会到了那句老话，纸上得来终觉浅，绝知此事要躬行。