Vue の HOC テクノロジーが無限ロードリストを開発する方法 (コード例)-jsチュートリアル-php.cn

Vue の HOC テクノロジーが無限ロードリストを開発する方法 (コード例)

不言

リリース： 2019-01-10 11:11:47

転載

3498 人が閲覧しました

この記事の内容は、Vue の HOC テクノロジーを使用して無限ロードリストを開発する方法 (コード例) です。必要な方は参考にしていただければ幸いです。

Web 開発では、データのページ読み込みメカニズムを使用します。そのバリエーションの 1 つは、ページの下部にループ読み込みメカニズムを使用することです。さらに読み込むボタン。問題は、異なるデータを表示する場合、そのようなリストを大量に記述する必要があることですが、ロジックは同様です。

データセットを維持する
さらにデータを読み込む
データを対応するデータとともに使用するコンポーネントそれを表示します。
読み込みステータスなどを処理します。

すべて同じロジックを完成させるそのようなコンポーネントはありますか?

要件

このような InfiniteList コンポーネントが必要です。このコンポーネントは、関連データの読み込みと保守を管理し、それをリスト形式で表示する役割を果たします。 list items は、呼び出し元 によって決定されたコンポーネントである必要があります。

HOC

高階コンポーネントの概念は、高階関数と同様に、React でよく言及されます。

高階関数:
(fn) => otherFn高階コンポーネント:
component =>otherComponent高階コンポーネントは次の目的で使用されます。コードの再利用主に処理ロジックと汎用性において優れたツールは、奇跡的な効果をもたらします。

そこで、この要件を達成するために HOC を使用することにしました

参考記事: http://hcysun.me/2018/01/05/%...

Conscience Blog

この記事に関連する知識

vue
vue のレンダリング関数

実装

vue および iview UI ライブラリを使用します

最初に UI フレームワークを作成し、vue ファイルを使用してコンポーネント全体を構築します。基本的な枠組み。ソースコードアドレス

html パート

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

ログイン後にコピー

スロットを使用して、ループ内でレンダリングされる項目を配布します

js パート

UI 関連のデータ (あまり重要ではありません)

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

ログイン後にコピー

このパートの最も重要な部分は 1 つのイベント発行だけであり、これは変換されます。データの読み込み要求のボタンをクリックしたときの動作

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

ログイン後にコピー

次ステップは、HOC の作成という最も重要な部分です

まず第一に、Vue のコンポーネントが何であるかを理解する必要があります。 Vue ファイルを書くときと同様に、エクスポートされるのはオブジェクトなので、今 HOC を書くときは、実際には最終的にオブジェクトを返す必要があります。

そこで、HOC を生成するために次の関数を書きました

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

ログイン後にコピー

レンダリングする場合は、もちろん Vue のレンダリング関数を使用します

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

ログイン後にコピー

組み合わせ方法を使用します。最外層のニーズを使用しました。手順 1 で作成したテンプレートをインポートして登録しました。

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

ログイン後にコピー

render 関数は、React に慣れているプログラマにとっては難しくなく、公式 Web サイトにも非常に詳細に紹介されています。

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 データについて説明します。非常に単純です。2 つの状態と 1 つのデータ配列です。

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

ログイン後にコピー

それでは、ループはどこでレンダリングされているのでしょうか?心配しないでください。render の listItem は、ループ内でレンダリングするコンポーネントです。React を使用する人は、このスタイルによく慣れていると思います。

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

ログイン後にコピー

はメンテナンスデータはどうですか?もちろん、管理のために

load data

関数を渡す必要があります。HOC の props で

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

ログイン後にコピー

を定義します。その後、テンプレート関数が on を起動することを覚えています。 -loadイベント? HOC でそれをリッスンしてロジックを処理する必要があります

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

ログイン後にコピー

InfiniteList.js コードを完成させます3

もう一度使用してください

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>

ログイン後にコピー

MyComponent .vue

は非常に単純なコンポーネントです

<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>

ログイン後にコピー

レンダリングは次のとおりです

Vue の HOC テクノロジーが無限ロードリストを開発する方法 (コード例) 概要フロントエンド内開発プロセス中、HOC はコードを利用するための強力なツールですが、抽象化には高い要件があります。