How Vue's HOC technology develops an infinite loading list (code example)

The content of this article is about how to develop an infinite loading list (code example) using Vue's HOC technology. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In web development, we all use a paged loading mechanism for data. One variation is to use a loop loading mechanism on the page. When you pull it to the bottom of the page, there is a load more button. The problem is that when different data is to be displayed, a lot of such lists have to be written, but the logic is similar.

1. Maintain a set of data

2. Load more data

3. Use the data with the corresponding components Display it

4. Handle loading status, etc.

Is there such a component to complete all the same logic?

Requirements

There needs to be such an InfiniteList component, which is responsible for managing the loading and maintenance of related data, and then displaying it in the form of a list, and list items must be Component determined by the caller.

HOC

The concept of high-order components is often mentioned in React, similar to high-order functions.
Higher-order function: (fn) => otherFn
Higher-order component: component => otherComponent
Higher-order component is used for code reuse Excellent tools, mainly in processing logic and universality, have miraculous effects.

So I decided to use HOC to achieve this requirement

Reference article: http://hcysun.me/2018/01/05/%...
Conscience Blog

Knowledge involved in this article

• vue

• vue’s render function

implementation

0

I use vue and iview UI libraries

1

First make the UI framework, I use a vue file to build the entire component the basic framework. Source code address

• html part

<template>
  <div>
    <div>
      <slot></slot>
    </div>
    <div>
      <button>
        {{loadButtonText}}
      </button>
    </div>
  </div>
</template>

Use a slot to distribute items to be rendered in a loop

• js part

Some UI-related data (not very important)

 props: {
      loadTip: {
        type: String,
        default: "加载更多"
      }
      ...
    },
    computed: {
      loadButtonText() {},
      tipIcon() {}
    }

The most important part of this part is only one event emission, which converts the behavior of clicking the button into Request to load data

handleClickLoad() {
        // 发射 请求加载数据的 事件
        this.$emit("on-load");
      }

• The css part is omitted

2

The next step is the most important part, writing HOC
First of all, you must understand what the components in Vue are. Like when we write a Vue file, what is exported is an object, so when we write HOC now, we actually need to return an object in the end.
So I wrote the following function to generate HOC

/**
 * 使用高阶组件的办法实现了一个无限加载列表
 * 可以根据数据循环渲染出特定的组件，并且管理加载状态
 * @param component 具体项的组件 {props: {data}}
*/
function InfiniteList(listItem) {
    return {
        props:...
        data(){}
        ...
    }
}

And if we render, of course we use Vue’s render function

render(h) {
    return h(component, data, children);
}

We use the combination method, the outermost layer needs We used the template we wrote in step 1, so we imported it and registered it

import InfiniteListTemplate from "./InfiniteListTemplate";
function InfiniteList(listItem) {
    return {
        ...
        components: {
          InfiniteListTemplate  //  列表框架的模板，这个模板里面只有ui表现
        },
        ...
    }
}

The render function should not be difficult for programmers who are familiar with React, and the official website also has a very detailed introduction.

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);
    },

Here our template is rendered in the outermost layer (called the template component), and the props and attrs of the current HOC are passed to the template component.
The HOC data is mentioned here, it is very simple, it is two states and a data array

data() {
      return {
        hasMore: true,
        loading: false,
        dataList: []
      }
    }

Then, where is the loop rendering? Don’t worry, the listItems in render are the components we render in a loop. Map is used here. I believe people who use React are very familiar with this style.

const listItems = this.dataList.map(item => h(component, {
            props: {
              data: item
            }
          })
        );

The final return is where

return h(InfiniteListTemplate, {options}, listItems);

is What about maintenance data? Of course, we need to pass in a load data function for management. We define

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));
        }
      }
    },

in the props of HOC and then we still remember that the template function launches a on-loadEvent? We need to listen to it in HOC and process the logic

render(h) {
    return h(InfiniteListTemplate, {
        ...
        on: {
            'on-load': () => self.handleLoadData()
        }
    }, listItems);
},
methods: {
      /**
       * 监听模板点出了加载按钮时的操作
       * 调用数据加载函数加载数据
       * @return {Promise<void>}
       */
      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;
        }
      }
    },</void>

Complete InfiniteList.js code

3

Use it again

<script>
import MyComponent from "./components/MyComponent";
import InfiniteList from "./components/hoc/InfiniteList";
const InfiniteListComponent = InfiniteList(MyComponent);
...

data() {
    loadDataFunc: (index, offset) => Promise<[]>
}
</script>

<template>
  <div>
    <infinitelistcomponent>
    </infinitelistcomponent>
  </div>
</template>

MyComponent .vue is a very simple component

<template>
  <div>Hello</div>
</template>

<script>
  export default {
    name: "MyComponent",
    props: {
      data: {
        type: String
      }
    }
  }
</script>

The rendering is as follows

Summary

In the front end During the development process, HOC is a powerful tool for code utilization, but it has high abstraction requirements.
I feel like I’m in love with React...Vue is so annoying to implement this HOC

The above is the detailed content of How Vue's HOC technology develops an infinite loading list (code example). For more information, please follow other related articles on the PHP Chinese website!