Vue의 HOC 기술이 무한 로딩 목록을 개발하는 방법(코드 예)-JS 튜토리얼-php.cn

이 기사의 내용은 Vue의 HOC 기술을 사용하여 무한 로딩 목록(코드 예제)을 개발하는 방법에 대한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

웹 개발에서 우리는 모두 데이터에 페이지 로딩 메커니즘을 사용합니다. 한 가지 변형은 페이지에서 루프 로딩 메커니즘을 사용하는 것이며 페이지 하단에 추가 로드 버튼이 있습니다. 문제는 서로 다른 데이터를 표시하려면 이런 목록을 많이 작성해야 하는데 논리는 비슷하다는 점이다.

데이터 세트 유지
더 많은 데이터 로드
해당 구성요소와 함께 데이터 표시
프로세스 로딩 상태 등

이런 구성요소가 있나요? 모두 똑같은 논리인가요?

Requirements

관련 데이터의 로딩 및 유지 관리를 담당하고 이를 목록 형태로 표시하는 InfiniteList 컴포넌트가 있어야 하며, 목록 항목은 에서 결정한 컴포넌트여야 합니다. 발신자.

HOC

고차 컴포넌트 개념은 React에서 고차 함수와 비슷하게 자주 언급됩니다.
고차 함수: (fn) => otherFn(fn) => otherFn
高阶组件：component => otherComponent
高阶组件用是代码复用的优秀工具，主要在处理逻辑方面和普适性上，有着奇效。

所以我决定用HOC来实现这个需求

参考文章：http://hcysun.me/2018/01/05/%...
良心博客

本文涉及的知识

vue
vue的render函数

实现

0

我使用的是vue和iview UI库

1

先弄出UI框架先，我用一个vue文件来构建整个组件的基本框架。源代码地址

html部分

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

로그인 후 복사

用一个slot来分发要循环渲染的项目

js部分

一些UI有关的数据（不是很重要）

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

로그인 후 복사

这部分比较重要的只有一个事件发射，将点按钮的行为转换为请求加载数据

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

로그인 후 복사

css部分略

2

接下来就是最重要的部分，编写HOC
首先要明白，Vue中的组件，到底是什么。像我们写一个Vue文件，export出的是一个对象，所以我们现在写HOC，其实也是要最后返回一个对象。
所以我写了下面的函数来生成HOC

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

로그인 후 복사

而我们如果渲染呢，当然是用Vue的render函数

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

로그인 후 복사

我们使用组合的方式，最外层需要用到我们第1步写到的模板，于是导入它，并注册它

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

로그인 후 복사

render函数对于熟悉React的程序员来说应该是不难的，官网也有很详细的介绍。

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的data，非常简单，就是两个状态和一个数据数组

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

로그인 후 복사

然后呢，循环渲染在哪？别急，render中的listItems就是我们循环渲染出来的组件，这里使用了map，相信使用React的人非常熟悉这种风格

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

로그인 후 복사

最终返回的就是

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

로그인 후 복사

在哪里维护数据呢？当然是要传入一个加载数据的函数来进行管理，我们在HOC的props里面定义

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事件么？我们需要在HOC里监听它并且处理逻辑

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>

로그인 후 복사

完整InfiniteList.js代码

3

接下来使用一遍

<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고차 구성 요소: comComponent => otherComponent

고차 구성 요소는 코드 재사용을 위한 훌륭한 도구입니다. 주로 처리논리와 보편성에 있어서 기적적인 효과를 갖는다.

그래서 저는 이 요구 사항을 달성하기 위해 HOC를 사용하기로 결정했습니다

참고 기사: http://hcysun.me/2018/01/05/%... 양심 블로그

이에 관련된 지식 Article

vue

vue의 렌더링 기능

🎜implementation🎜

0

🎜vue 및 iview UI 라이브러리를 사용하고 있습니다. 🎜

1

🎜 먼저 UI 프레임워크를 만듭니다. vue 파일을 사용하여 전체 구성 요소의 기본 프레임워크를 만듭니다. 소스 코드 주소🎜

🎜🎜html part🎜🎜

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

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

로그인 후 복사

🎜루프에서 렌더링할 항목을 배포하려면 슬롯을 사용하세요🎜

🎜🎜js 부분🎜🎜🎜일부 UI 관련 데이터(별로 중요하지 않음)🎜rrreee🎜 이 부분에서 가장 중요한 부분은 버튼 클릭 동작을 요청으로 변환하는 단 하나의 이벤트 방출입니다. 데이터를 로드하려면🎜rrreee

🎜🎜CSS 부분을 축약했습니다🎜🎜

2

🎜작성할 때 다음 단계가 가장 중요합니다. HOC🎜, 먼저 Vue의 구성 요소가 무엇인지 이해해야 합니다. 예를 들어 Vue 파일을 작성할 때 내보내는 것은 객체이므로 지금 HOC를 작성하면 결국 실제로 객체를 반환해야 합니다. 🎜그래서 HOC를 생성하기 위해 다음 함수를 작성했습니다🎜rrreee🎜그리고 렌더링한다면 당연히 Vue의 렌더링 함수를 사용합니다🎜rrreee🎜저희는 조합 방식을 사용하는데 가장 바깥쪽 레이어는 1단계에서 작성한 템플릿을 사용해야 하므로 import해서 등록하세요 🎜rrreee🎜render 기능은 React에 익숙한 프로그래머라면 어렵지 않을 것이고, 공식 홈페이지에도 아주 자세하게 소개되어 있습니다. 🎜rrreee🎜여기서 템플릿은 가장 바깥쪽 레이어(템플릿 구성 요소라고 함)에서 렌더링되고 현재 HOC의 props와 attrs가 템플릿 구성 요소에 전달됩니다. 🎜여기서 언급된 HOC 데이터는 매우 간단합니다. 두 가지 상태와 데이터 배열입니다🎜rrreee🎜그럼 루프 렌더링은 어디에 있나요? 걱정하지 마세요. 렌더링의 listItems는 우리가 루프에서 렌더링하는 구성 요소입니다. Map은 여기에서 사용됩니다. React를 사용하는 사람들은 이 스타일에 매우 익숙할 것입니다🎜rrreee🎜최종적으로 반환되는 것은🎜rrreee🎜 데이터? 물론 관리를 위해 🎜load data🎜 함수를 전달해야 합니다. HOC의 props에 🎜rrreee🎜를 정의한 다음 템플릿 함수가 on-load 이벤트를 발생시켰다는 것을 기억하세요. ? 이를 모니터링하고 HOC에서 로직을 처리해야 합니다🎜rrreee🎜Complete InfiniteList.js code🎜

3

🎜다음에 사용하세요🎜rrreee🎜MyComponent.vue는 매우 간단한 구성 요소입니다. 🎜rrreee🎜렌더링은 다음과 같습니다🎜🎜🎜🎜🎜🎜🎜요약🎜🎜프론트엔드 개발 과정에서 HOC는 코드 활용을 위한 강력한 도구이지만 추상화 요구 사항이 높습니다. 🎜React를 사랑하게 된 것 같아요...Vue는 이런 HOC를 구현하기가 너무 귀찮습니다🎜🎜🎜

위 내용은 Vue의 HOC 기술이 무한 로딩 목록을 개발하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!