优雅地使用加载(推荐)

前言

不知道从什么时候开始有写博客的想法，但是我的知识储备还是很薄弱，所以很长时间都写不下去。这是我的第一篇博客，所以我们来记录一下我学前端以来的一些知识。如有错漏，请指出，您的批评指正是我前进路上的巨大动力！

在正常的开发过程中，我们需要异步等待数据，我们经常使用加载图来增强用户的体验，让用户知道我们在加载，那么如何在开发过程中更优雅地使用加载呢？在开发一个小程序的时候，我们只需要一个单词wx.showLoading()就可以完成，web开发中也有相应的UI框架帮助我们完成。怎么会这样？让我们一起来看看。

首先实现一个简单的加载

div class=' container ' div class=' loading '/div/div . container { position : absolute；左侧：50%；top : 50%；transform: translate(-50%，-50%)；}.正在加载{ width: 100px高度： 100像素；边界半径： 100%；border: 5px #ffffff固体；边框-右侧-颜色： # 87CEEB；animation:加载1s线性无限；} @正在加载{ 0% { transform: rotate(0deg)的关键帧；} 100% { transform : rotate(360 deg)；}}所以我们实现了一个简单的圆形加载图，我将分别描述如何在vue和react中优雅地使用这个加载。

Vue零件

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

Loading.vue是用我们上面实现的简单加载代码，加上一点逻辑编写的

脚本导出默认值{ name: 'loading '，data(){ return { show : false } }/script index . js

//首先介绍加载组件导入加载组件自’。/loading ' const loading={ } loading . install=function(vue){//生成Vue的一个子类，这个子类也是组件const toast构造函数=vue。extend(加载组件)//生成这个子类的一个实例const instance=new toast构造函数()//在我创建的div上挂载这个实例//将这个div添加到全局挂载点内部实例。$ mount(文档。createelement ('div ')文档。尸体。appendchild(实例。$ El)//并注入原型链Vue.prototype.$loading={show()。{实例。show=true}，close () {instance。show=false } } } export default loading这里我们生成一个Vue的子类，然后把它的实例挂载到全世界。一些方法被注入到Vue的原型链中，这样加载图的显示和隐藏就可以通过类似这样的方法来控制。$loading.show()在任何组件中。最后，我们导出Loading对象。然后将Loading插件引入main.js，调用Vue.use()方法注册插件。

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

脚本导出默认{name:' hello world '，data () {return {msg:''}}，mounted () {this。$ loading . show()settimeout(()={ this。$ loading.close () this.msg=“廖已加载！”}，3000)} }/脚本

奈斯！测试成功！

反应部分

在此之前，我将首先介绍react中的高阶分量(HOC)

高阶分量

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

具体实现

首先，使用create-react-app生成一个测试支架，高级组件目录如下图所示

Index.css主要是加载的风格，index.js的代码如下

从“React”导入React；“进口”。/index . CSS ' function HOC(component CLaSS){ return CLaSS HOC扩展了ComponentClass { render() { if(！this . state . loading){ console . log(this . state . loading)return super . render()} else { return(Div class name=' container ' Div class name=' loading '/Div/Div/Div)} } } Export default ad hoc我们定义了一个ad hoc函数，并接受了一个组件作为参数。通过此. state操作组件的state属性，并通过super.render()呈现组件。最后，推导了自组织函数。然后将其引入组件，如下所示

从“”导入即席./ad hoc/loading/index ' class home扩展了组件{ constructor(props){ super(props)this。state={msg: '尚未加载'，load : true } } render(){ return(div { this . state . msg }/div)；} ComponentDidMount(){ let loading=this . state . loading setTimeout(()={ this . setState({ load :正在加载，msg:“廖已加载！”})}，3000)} } export default ad hoc(home)也使用setTimeout模拟异步请求，测试结果也是成功的。react部分没有使用decorator来使用高阶组件，不够优雅。(我尝试了create-react-app中的所有在线处理方法，但还是报告了一个错误。)

最后的

至此，如何在Vue和React中优雅地使用加载就结束了。这是一个超级简单的演示，但我仍然希望与您分享。写完之后才真正体会到那句老话。写在纸上总觉得浅，知道了一定要练。

以上是边肖给大家介绍的装载量。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！