Wie die HOC-Technologie von Vue eine unendliche Ladeliste entwickelt (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Entwicklung einer unendlichen Ladeliste (Codebeispiel) mit der HOC-Technologie von Vue. Ich hoffe, dass er für Sie hilfreich ist.

In der Webentwicklung verwenden wir alle einen Paging-Lademechanismus für Daten. Eine Variante besteht darin, einen Schleifenlademechanismus auf der Seite zu verwenden Klicken Sie auf die Schaltfläche „Mehr laden“. Das Problem besteht darin, dass, wenn unterschiedliche Daten angezeigt werden sollen, viele solcher Listen geschrieben werden müssen, die Logik aber ähnlich ist.

1. Datensatz pflegen

2. Mehr Daten laden

3. Verwenden Sie die Daten entsprechend Komponenten anzeigen

4. Ladestatus usw. verwalten

Gibt es eine solche Komponente, um die gleiche Logik zu vervollständigen?

Anforderungen

Es muss eine solche InfiniteList-Komponente vorhanden sein, die für die Verwaltung des Ladens und Verwaltens relevanter Daten und deren anschließende Anzeige in Form einer Liste verantwortlich ist, und Listenelemente müssen vom Aufrufer als Komponente bestimmt werden.

HOC

Das Konzept der Komponenten höherer Ordnung wird in React häufig erwähnt, ähnlich wie bei Funktionen höherer Ordnung.
Funktionen höherer Ordnung: (fn) => otherFn
Komponenten höherer Ordnung: component => otherComponent
Komponenten höherer Ordnung sind ein hervorragendes Werkzeug für die Wiederverwendung von Code. Sie sind hauptsächlich bei der Verarbeitung von Logik und Universalität wirksam.

Also habe ich beschlossen, HOC zu verwenden, um diese Anforderung zu erfüllen

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

In diesem Artikel enthaltenes Wissen

• vue

• Vues Renderfunktion

Implementierung

0

Ich verwende die Vue- und iview-UI-Bibliothek

1

Erstelle zuerst das UI-Framework. Ich verwende eine Vue-Datei, um die gesamte Komponente zu erstellen das Grundgerüst. Quellcodeadresse

• HTML-Teil

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

Verwenden Sie einen Slot, um Elemente zu verteilen, die in einer Schleife gerendert werden sollen

• js-Teil

Einige UI-bezogene Daten (nicht sehr wichtig)

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

Der wichtigste Teil dieses Teils ist nur eine Ereignisemission, die die konvertiert Verhalten beim Klicken auf die Schaltfläche in „Anforderung zum Laden von Daten“

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

• CSS-Teil wird weggelassen

2

Der nächste Schritt ist Der wichtigste Teil ist das Schreiben von HOC
Zunächst müssen Sie verstehen, was Komponenten in Vue sind. Wenn wir beispielsweise eine Vue-Datei schreiben, wird ein Objekt exportiert. Wenn wir also jetzt HOC schreiben, müssen wir am Ende tatsächlich ein Objekt zurückgeben.
Also habe ich die folgende Funktion geschrieben, um HOC zu generieren

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

Und wenn wir rendern, verwenden wir natürlich die Renderfunktion von Vue

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

Wir verwenden die Kombinationsmethode, die äußerste Ebene muss verwendet werden Die Vorlage, die wir in Schritt 1 geschrieben haben, haben wir importiert und registriert. Die Renderfunktion sollte für Programmierer, die mit React vertraut sind, nicht schwierig sein. Auf der offiziellen Website gibt es auch eine sehr detaillierte Einführung.

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

Hier wird unsere Vorlage auf der äußersten Ebene (die sogenannte Vorlagenkomponente) gerendert und die Requisiten und Attribute des aktuellen HOC werden an die Vorlagenkomponente übergeben.

Die HOC-Daten werden hier erwähnt, sie sind sehr einfach, es sind zwei Zustände und ein Datenarray

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

Wo ist dann das Schleifenrendering? Keine Sorge, die listItems in render sind die Komponenten, die wir in einer Schleife rendern. Ich glaube, dass Leute, die React verwenden, mit diesem Stil sehr vertraut sind >

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

Was ist mit den Wartungsdaten? Natürlich müssen wir eine

-Funktion zum Laden von Daten

für die Verwaltung übergeben. Wir definieren

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

in den Requisiten von HOC. Dann erinnern wir uns noch daran, dass die Vorlagenfunktion ein Veranstaltung? Wir müssen es uns im HOC anhören und die Logik verarbeiten

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

InfiniteList.js-Code vervollständigen3

on-loadNächstes Mal verwenden

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

ist eine sehr einfache Komponente

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>

Das Rendering ist wie folgt

MyComponent.vue

Zusammenfassung

Im Vordergrund- Am Ende des Entwicklungsprozesses ist HOC ein leistungsstarkes Tool für die Codenutzung, stellt jedoch hohe Abstraktionsanforderungen. Ich habe das Gefühl, ich bin in React verliebt ... Vue ist so nervig, dieses HOC zu implementieren

Das obige ist der detaillierte Inhalt vonWie die HOC-Technologie von Vue eine unendliche Ladeliste entwickelt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!