前言
不知道從什么時候開始有了寫博客的想法，奈何自己的知識儲備還很薄弱，遲遲無法下筆。這是我的第一篇博客，算是記錄一下自己學習前端以來的一些知識吧。如有錯漏，懇請指出，您的批評和指正是我前進路上的一大動力！
在平時的開發過程中，我們需要異步等待數據，常常會利用loading圖來加強用戶的體驗，讓用戶知道我們有在加載，那么如何在開發過程中更為優雅地使用loading呢？開發小程序的時候我們只需要一句wx.showLoading()就完事兒了，而在web開發中也有相應的UI框架來幫我們完成這件事情。那究竟是怎么實現的呢，讓我們來一起看一下。
先實現一個簡單的loading
<div class="container"> <div class="loading"></div></div>.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的代碼，加上一點點邏輯
<script> export default { name: "loading", data() { return { show: false } } }</script>index.js
//先引入loading組件import LoadingComponent from './loading'const Loading = {}Loading.install = function (Vue) {// 生成一個Vue的子類 同時這個子類也就是組件const ToastConstructor = Vue.extend(LoadingComponent)// 生成一個該子類的實例const instance = new ToastConstructor()// 將這個實例掛載在我創建的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來模擬異步請求。
<script> export default { name: 'HelloWorld', data() { return { msg: '' } }, mounted() { this.$loading.show() setTimeout(()=>{ this.$loading.close() this.msg = '加載完遼！' },3000) } }</script>
奶思！測試成功！
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 (<div> <div className="container"> <div className="loading"></div> </div> </div>) } } }}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 ( <div> {this.state.msg} </div> ); } 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，但還是希望能分享給大家。寫完才真正體會到了那句老話，紙上得來終覺淺，絕知此事要躬行。
以上所述是小編給大家介紹的loading使用解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
