189 8069 5689
利用Vue中HOC技术开发一个无限加载列表的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！
成都创新互联2013年开创至今，是专业互联网技术服务公司，拥有项目做网站、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元连平做网站,已为上家服务,为连平各地企业和个人服务,联系电话:18982081108
在web开发上，我们都对数据采用分页加载的机制，一种变形就是在页面采用循环加载的机制，拉到页面最下方有个加载更多的按钮。问题在于，当不同的数据要展示时，就要写很多这种列表，但是其中的逻辑都是相似的。
维护一组数据
加载更多数据
将数据用对应的组件显示出来
处理加载状态等
那有没有这么一个组件，来完成这一切相同的逻辑呢？
需要有这么一个InfiniteList组件，它负责管理相关数据的加载和维护，然后以列表的形式显示出来，而列表项必须是由调用方决定的组件。
高阶组件的概念，是React里面经常提到的，类似于高阶函数。
高阶函数：(fn) => otherFn
高阶组件：component => otherComponent
高阶组件用是代码复用的优秀工具，主要在处理逻辑方面和普适性上，有着奇效。
所以我决定用HOC来实现这个需求
参考文章：http://hcysun.me/2018/01/05/%...
良心博客
vue
vue的render函数
我使用的是vue和iview UI库
先弄出UI框架先，我用一个vue文件来构建整个组件的基本框架。源代码地址
html部分
用一个slot来分发要循环渲染的项目
js部分
一些UI有关的数据（不是很重要）
props: {
loadTip: {
type: String,
default: "加载更多"
}
...
},
computed: {
loadButtonText() {},
tipIcon() {}
}这部分比较重要的只有一个事件发射，将点按钮的行为转换为 请求加载数据
handleClickLoad() {
// 发射 请求加载数据的 事件
this.$emit("on-load");
}css部分略
接下来就是最重要的部分，编写HOC
首先要明白，Vue中的组件，到底是什么。像我们写一个Vue文件，export出的是一个对象，所以我们现在写HOC，其实也是要最后返回一个对象。
所以我写了下面的函数来生成HOC
/**
* 使用高阶组件的办法实现了一个无限加载列表
* 可以根据数据循环渲染出特定的组件，并且管理加载状态
* @param component 具体项的组件 {props: {data}}
*/
function InfiniteList(listItem) {
return {
props:...
data(){}
...
}
}而我们如果渲染呢，当然是用Vue的render函数
render(h) {
return h(component, data, children);
}我们使用组合的方式，最外层需要用到我们第1步写到的模板，于是导入它，并注册它
import InfiniteListTemplate from "./InfiniteListTemplate";
function InfiniteList(listItem) {
return {
...
components: {
InfiniteListTemplate // 列表框架的模板，这个模板里面只有ui表现
},
...
}
}render函数对于熟悉React的程序员来说应该是不难的，官网也有很详细的介绍。
render(h) {
const self = this;
// 根据 data 的 dataList循环渲染子组件
const listItems = ...
return h(InfiniteListTemplate, {
props: {
...self.$props, // 传递所有参数
hasMore: self.hasMore, // 另外的hasMore和loading是这个HOC的state
loading: self.loading
},
attrs: self.$attrs,
on: {
// 监听加载按钮事件
"on-load": () => self.handleLoadData()
}
}, listItems);
},这里在最外层渲染我们的模板（且称为模板组件），并将当前HOC的props,attrs传递给模板组件。
这里提到了HOC的data，非常简单，就是两个状态和一个数据数组
data() {
return {
hasMore: true,
loading: false,
dataList: []
}
}然后呢，循环渲染在哪？别急，render中的listItems就是我们循环渲染出来的组件，这里使用了map，相信使用React的人非常熟悉这种风格
const listItems = this.dataList.map(item => h(component, {
props: {
data: item
}
})
);最终返回的就是
return h(InfiniteListTemplate, {options}, listItems);在哪里维护数据呢？当然是要传入一个加载数据的函数来进行管理，我们在HOC的props里面定义
props: {
tipColor,
loadTip,
loadingTip,
// 上面的数据都是为了传给模板（组件）
offset: {
type: Number,
default: 5
},
// 数据加载的函数，需要的是一个 (index, offset) => Promise<[]>
loadDataFunc: {
type: Function,
default() {
return (index, offset) => Promise.resolve(new Array(offset).map((o, i) => index + i));
}
}
},然后我们还记得模板函数发射了个on-load事件么？我们需要在HOC里监听它并且处理逻辑
render(h) {
return h(InfiniteListTemplate, {
...
on: {
'on-load': () => self.handleLoadData()
}
}, listItems);
},
methods: {
/**
* 监听模板点出了加载按钮时的操作
* 调用数据加载函数加载数据
* @return {Promise}
*/
async handleLoadData() {
try {
this.loading = true;
let res = await this.loadDataFunc(this.dataList.length, this.offset);
if (res && res.length) {
this.dataList = this.dataList.concat(res);
this.$Message.success(`成功获取到${res.length}条新数据`);
} else {
this.$Message.info(`已经获取了全部数据了`);
this.hasMore = false;
}
} catch (e) {
this.$Message.error("加载失败" + e.message);
} finally {
this.loading = false;
}
}
}, 完整InfiniteList.js代码
接下来使用一遍
MyComponent.vue是个非常简单的组件
Hello
效果图如下
在前端开发过程中，HOC是代码利用的利器，但是对抽象的要求高。
我觉得自己爱上了React...Vue实现这个HOC烦死了
感谢各位的阅读！看完上述内容，你们对利用Vue中HOC技术开发一个无限加载列表的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。