Comment la technologie HOC de Vue développe une liste de chargement infinie (exemple de code)

Le contenu de cet article explique comment développer une liste de chargement infinie (exemple de code) à l'aide de la technologie HOC de Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans le développement Web, nous utilisons tous un mécanisme de chargement de pagination pour les données. Une variante consiste à utiliser un mécanisme de chargement en boucle sur la page. Lorsque vous la tirez vers le bas de la page, il y a un. charger plus de bouton. Le problème est que lorsque différentes données doivent être affichées, de nombreuses listes de ce type doivent être rédigées, mais la logique est similaire.

1. Maintenir un ensemble de données

2. Charger plus de données

3. Utiliser les données avec le correspondant composants Affichage

4. Gérer l'état de chargement, etc.

Existe-t-il un tel composant pour compléter tout de même la même logique ?

Exigences

Il doit y avoir un tel composant InfiniteList, qui est chargé de gérer le chargement et la maintenance des données pertinentes, puis de les afficher sous forme de liste, et le Les éléments de la liste doivent être Composant déterminé par l'appelant.

HOC

Le concept de composants d'ordre supérieur est souvent mentionné dans React, à l'instar des fonctions d'ordre supérieur.
Fonctions d'ordre supérieur : (fn) => otherFn
Composants d'ordre supérieur : component => otherComponent
Les composants d'ordre supérieur sont un excellent outil pour la réutilisation du code. Ils sont principalement efficaces dans le traitement de la logique et de l'universalité.

J'ai donc décidé d'utiliser HOC pour répondre à cette exigence

Article de référence : http://hcysun.me/2018/01/05/%...
Conscience Blog

Les connaissances impliquées dans cet article

• vue

• La fonction de rendu de Vue

Implémentation

0

J'utilise la bibliothèque d'interface utilisateur vue et iview

1

Créez d'abord le framework UI, j'utilise un fichier vue pour construire l'intégralité composant le cadre de base. Adresse du code source

• partie HTML

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

Utiliser un emplacement pour distribuer les éléments à rendre en boucle

• partie js

Quelques données liées à l'interface utilisateur (pas très importantes)

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

La partie la plus importante de cette partie n'est qu'une seule émission d'événement , qui consiste à cliquer sur le bouton Le comportement est converti en une demande de chargement de données

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

• la partie CSS est légèrement

2

La chose suivante est la partie la plus importante, lors de l'écriture de HOC
, vous devez d'abord comprendre quels sont les composants de Vue. Par exemple, lorsque nous écrivons un fichier Vue, ce qui est exporté est un objet, donc lorsque nous écrivons HOC maintenant, nous devons en fait renvoyer un objet à la fin.
J'ai donc écrit la fonction suivante pour générer HOC

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

Et si nous effectuons le rendu, bien sûr, nous utilisons la fonction de rendu de Vue

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

Nous utilisons la méthode de combinaison, la plus externe La couche doit utiliser le modèle que nous avons écrit à l'étape 1, nous l'importons donc et l'enregistrons. La fonction de rendu

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

ne devrait pas être difficile pour les programmeurs familiers avec React. le site officiel. Introduction détaillée.

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

Ici, notre modèle est rendu au niveau de la couche la plus externe (appelée composant de modèle) et les accessoires et attributs du HOC actuel sont transmis au composant de modèle.
Les données HOC sont mentionnées ici, c'est très simple, c'est deux états et un tableau de données

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

Alors, où est le rendu de la boucle ? Ne vous inquiétez pas, les listItems dans render sont les composants que nous rendons en boucle. Map est utilisé ici. Je pense que les personnes qui utilisent React connaissent très bien ce style

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

Le retour final est <.>

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

pour charger les données pour la gestion. Nous définissons

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

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>

3

Utilisez-le à nouveau ensuite

<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

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

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

Résumé

sur le front-end Pendant le processus de développement, HOC est un outil puissant pour l'utilisation du code, mais il a des exigences d'abstraction élevées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!