ホームページ > 記事 > ウェブフロントエンド > Vue の HOC テクノロジーが無限ロード リストを開発する方法 (コード例)
この記事の内容は、Vue の HOC テクノロジーを使用して無限ロード リストを開発する方法 (コード例) です。必要な方は参考にしていただければ幸いです。
Web 開発では、データのページ読み込みメカニズムを使用します。そのバリエーションの 1 つは、ページの下部にループ読み込みメカニズムを使用することです。さらに読み込むボタン。問題は、異なるデータを表示する場合、そのようなリストを大量に記述する必要があることですが、ロジックは同様です。
データ セットを維持する
さらにデータを読み込む
データを対応するデータとともに使用するコンポーネント それを表示します。
読み込みステータスなどを処理します。
すべて同じロジックを完成させるそのようなコンポーネントはありますか?
このような InfiniteList コンポーネントが必要です。このコンポーネントは、関連データの読み込みと保守を管理し、それをリスト形式で表示する役割を果たします。 list items は、呼び出し元 によって決定された コンポーネントである必要があります。
HOC高階コンポーネントの概念は、高階関数と同様に、React でよく言及されます。高階関数:
(fn) => otherFn高階コンポーネント:
component =>otherComponent高階コンポーネントは次の目的で使用されます。コードの再利用 主に処理ロジックと汎用性において優れたツールは、奇跡的な効果をもたらします。
Conscience Blogこの記事に関連する知識
<template> <div> <div> <slot></slot> </div> <div> <button> {{loadButtonText}} </button> </div> </div> </template>スロットを使用して、ループ内でレンダリングされる項目を配布します
props: { loadTip: { type: String, default: "加载更多" } ... }, computed: { loadButtonText() {}, tipIcon() {} }このパートの最も重要な部分は 1 つのイベント発行だけであり、これは変換されます。データの読み込み要求のボタンをクリックしたときの動作
handleClickLoad() { // 发射 请求加载数据的 事件 this.$emit("on-load"); }
そこで、HOC を生成するために次の関数を書きました
/** * 使用高阶组件的办法实现了一个无限加载列表 * 可以根据数据循环渲染出特定的组件,并且管理加载状态 * @param component 具体项的组件 {props: {data}} */ function InfiniteList(listItem) { return { props:... data(){} ... } }
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: [] } }
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>
レンダリングは次のとおりです
概要フロントエンド内 開発プロセス中、HOC はコードを利用するための強力なツールですが、抽象化には高い要件があります。
React が大好きになったような気がします...Vue はこの HOC を実装するのがとても面倒です以上がVue の HOC テクノロジーが無限ロード リストを開発する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。